1, CleanWebpackPlugin

  • Automatic cleanup of last build artifacts
plugins: [
    new CleanWebpackPlugin()
]
Copy the code

2, multi-file entry packaging automatic configuration

const setMPA = () = > {
  const entry = {};
  const htmlWebpackPlugin = [];
  // The only thing to note here is that the file naming format is uniform * matches all folders under SRC
  const entryFiles = glob.sync(path.join(__dirname, "./src/*/index.js"));
  Object.keys(entryFiles).map((index) = > {
    const entryFile = entryFiles[index];
    // Regex matches
    const match = entryFile.match(/src\/(.*)\/index\.js/);
    const pageName = match && match[1];
    entry[pageName] = entryFile;
    htmlWebpackPlugin.push(
      new HtmlWebpackPlugin({
        template: path.join(__dirname, `src/${pageName}/index.html`),
        filename: `${pageName}.html`.inject: true.chunks: [pageName],
        minify: {
          html5: true.collapseWhitespace: true.preserveLineBreaks: false.minifyCSS: true.minifyJS: true.removeComments: false,}})); });return {
    entry,
    htmlWebpackPlugin,
  };
};

// The exported entry and htmlWebpackPlugin are provided for the following use
const { entry, htmlWebpackPlugin } = setMPA();

module.exports = {
  entry: entry, // Single-entry string multi-entry for object key-value pair writing
  mode: "production".plugins: [
    new CleanWebpackPlugin(),
  ].concat(htmlWebpackPlugin),
};

Copy the code

3. CSS packaging optimization

  • Px2rem-loader: automatically converts to REM adaptive display of proportional changes
  • Automatic conversion also need to install lib-flexible and raw-loader, in HTML using EJS (written as follows)
  // HTML resources are inline< % =require('raw-loader! ./meta.html') % > <! --<script>The ${require('raw-loader! babel-loader! ./meta.html')}</script> -->
  <title>Document</title>
  <script>< % =require('raw-loader! babel-loader! . /.. /node_modules/lib-flexible/flexible.js') % ></script><! --<script>The ${require('raw-loader! babel-loader! . /node_modules/lib-flexible')}</script> -->

Copy the code
  • Postcss-loader and autoprefixer: indicates that CSS prefixes are automatically completed
 module: {
    rules: [{test: /.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"."less-loader",
          {
            loader: "postcss-loader".options: {
              plugins: () = > [
                require("autoprefixer") ({browsers: ["last 2 versions"."1%" >."ios 7"],}),],},}, {loader: "px2rem-loader".options: {
              remUnit: 75.remPrecision: 8,},},],},Copy the code

4. Extraction of public resources

1. CDN import
  • HTML – webpack – externals – the plugin installation
  const HtmlWebpackExternalPlugin = require("html-webpack-externals-plugin");
  plugins: [
    new HtmlWebpackExternalPlugin({
      externals: [{module: "react".entry: "https://unpkg.com/react@16/umd/react.production.min.js".global: "React"}, {module: "react-dom".entry: "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js".global: "ReactDOM",
        },
      ],
    }),
  ].concat(htmlWebpackPlugin),
  // And synchronously introduce CDN in HTML
  <script type="text/javascript" src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>,Copy the code
2, splitChunks
optimization: {
    splitChunks: {
      // When the minimum is extracted
      minSize:0.cacheGroups: {
        commons: {
          // Package separately to extract the specified file
          // test: /(react|react-dom)/,
          // name: "vendors",
          // chunks: "all",
          name: "commons".chunks: "all".// Minimum number of times used (extract when more than or equal to)
          minChunks:2}},}},// It needs to be used in HtmlWebpackPlugin
   new HtmlWebpackPlugin({
        template: path.join(__dirname, `src/${pageName}/index.html`),
        filename: `${pageName}.html`.inject: true.// chunks need to be added here.
        chunks: ['common'.'vendors', pageName],
        minify: {
          html5: true.collapseWhitespace: true.preserveLineBreaks: false.minifyCSS: true.minifyJS: true.removeComments: false,},)Copy the code

Website a: www.webpackjs.com/plugins/spl…

5. SourceMap debugging

  • Devtool: packaged files corresponding to “None” are not conducive to development debugging
  • Devtool: “cheap-source-map” corresponds to the pre-package file and indicates the number of exception lines
Package depends on installation
  "devDependencies": {
    "@babel/core": "^ 7.14.6"."@babel/preset-env": "^ 7.14.7"."@babel/preset-react": "^ 7.14.5"."autoprefixer": "^ 9.5.1"."babel-loader": "^ 8.2.2"."clean-webpack-plugin": "^ 4.0.0 - alpha."."css-loader": "^ 5.2.6." "."cssnano": "^ 4.1.10"."file-loader": "^ 6.2.0"."glob": "^" 7.1.4."html-webpack-externals-plugin": "^ 3.8.0." "."html-webpack-plugin": "^ 5.0.0"."less": "^ 4.4.1"."less-loader": "^ 10.0.1." "."mini-css-extract-plugin": "^ 2.1.0." "."optimize-css-assets-webpack-plugin": "^ the 6.0.1." "."postcss-loader": "^ 3.0.0"."px2rem-loader": "^ 0.1.9"."raw-loader": "^ 0.5.1"."react": "^ 17.0.2"."react-dom": "^ 17.0.2"."style-loader": "^ 3.0.0"."url-loader": "^ 4.4.1"."webpack": "^ 5.1.3"."webpack-cli": "^" 3.3.12."webpack-dev-server": "^ 3.11.2"
  },
  "dependencies": {
    "lib-flexible": "^" 0.3.2
  }
Copy the code

Specifically: there may be incompatibilities between different plug-ins and different versions, leading to packaging failure. This is not a configuration problem. I have tested the version here and found no problem

// Github address:Github.com/838216870/w…