^ – ^

  • Front end rookie, love front end, keep learning
  • WeChat: jie178463596
  • Wechat small group: purely discuss technology, interview, work, less paddling, refuse advertising

Know the Plugin

CleanWebpackPlugin

HtmlWebpackPlugin

Generated index.html analysis

Customize HTML templates

Custom template data filling

The introduction of DefinePlugin

The use of DefinePlugin

CopyWebpackPlugin

The directory structure

wk.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack'); // DefinePlugin is a built-in webPack plug-in
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: "./src/main.js".output: {
    filename: "js/bundle.js".// Must be an absolute path
    path: path.resolve(__dirname, "./build"),
    // assetModuleFilename: "img/[name].[hash:6][ext]"
  },
  module: {
    rules: [{// Rules use regular expressions
        test: /\.css$/.// Match resources
        use: [
          // { loader: "css-loader" },
          // Note: write order (bottom up, right to work, back to front)
          "style-loader",
          {
            loader: "css-loader".options: {
              importLoaders: 1}},"postcss-loader"].// loader: "css-loader"
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader".options: {
              importLoaders: 2}},"postcss-loader"."less-loader"] {},test: /\.(png|jpe? g|gif|svg)$/.// type: "asset/resource", file-loader effect
        // type: "asset/inline", url-loader
        type: "asset".generator: {
          filename: "img/[name].[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024}}}, {test: /\.ttf|eot|woff2? $/i,
        type: "asset/resource".generator: {
          filename: "font/[name].[hash:6][ext]"}}},plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "Ha ha webpack".template: "./public/index.html"
    }),
    new DefinePlugin({
      // Enclose two quotes
      BASE_URL: '". /"
    }),
    new CopyWebpackPlugin({
      patterns: [{// to: XXX, // no need to write, the default is output.path
          from: "public".globOptions: {
            ignore: [
              "**/index.html"."**/.DS_Store"."**/abc.txt"]}}]})]}Copy the code

publuc/index.html

<! DOCTYPEhtml>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <! -- built files will be auto injected -->
  </body>
</html>
Copy the code

build/index.html

<! DOCTYPEhtml>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    
    <link rel="icon" href="./favicon.ico">
    
    <title>The webpack JieShuai</title>
  <script defer src="js/bundle.js"></script></head>
  <body>
    <noscript>
      <strong>We're sorry but your webpack doesn't work properly without JavaScript enabled.</strong>
    </noscript>
    <div id="app"></div>
    <! -- built files will be auto injected -->
  </body>
</html>
Copy the code