webpack试练02

1、CleanWebpackPlugin

• 自动清除上次构建产物

plugins: [
    new CleanWebpackPlugin()
]

2、多文件入口打包自动配置

const setMPA = () => {
  const entry = {};
  const htmlWebpackPlugin = [];
  // 这里需要注意的是要统一文件命名格式 *匹配src下面所有的文件夹
  const entryFiles = glob.sync(path.join(__dirname, "./src/*/index.js"));
  Object.keys(entryFiles).map((index) => {
    const entryFile = entryFiles[index];
    // 正则匹配
    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,
  };
};

// 这里导出的entry、 htmlWebpackPlugin 提供给下面使用
const { entry, htmlWebpackPlugin } = setMPA();

module.exports = {
  entry: entry, // 单入口位字符串  多入口为对象  键值对写入
  mode: "production",
  plugins: [
    new CleanWebpackPlugin(),
  ].concat(htmlWebpackPlugin),
};

3、css打包优化

• px2rem-loader：自动转换成rem自适应显示比例变化
• 自动转换时还需安装lib-flexible及raw-loader，在html中用ejs的方式引入（写法如下）

  // html 资源内联
  <%= require('raw-loader!./meta.html') %>
  <!-- <script>${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>${require('raw-loader!babel-loader!../node_modules/lib-flexible')}</script> -->

• postcss-loader 和 autoprefixer：css前缀自动补全

 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,
            },
          },
        ],
      },
    ],
  },

4、公共资源提取

1. cdn方式引入

• html-webpack-externals-plugin安装

  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),
  // 并且同步的在html中引入cdn
  <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>、

2、splitChunks

optimization: {
    splitChunks: {
      // 最小为多少时提取
      minSize:0,
      cacheGroups: {
        commons: {
          // 单独打包提取指定文件
          // test: /(react|react-dom)/,
          // name: "vendors",
          // chunks: "all",
          name: "commons",
          chunks: "all",
          // 最小使用次数（超过或等于便提取）
          minChunks:2
        },
      },
    },
  },
  //  打包后需要在HtmlWebpackPlugin中使用
   new HtmlWebpackPlugin({
        template: path.join(__dirname, `src/${pageName}/index.html`),
        filename: `${pageName}.html`,
        inject: true,
        // chunks 这里需加入（未加入亲测有效）
        chunks: ['common','vendors', pageName],
        minify: {
          html5: true,
          collapseWhitespace: true,
          preserveLineBreaks: false,
          minifyCSS: true,
          minifyJS: true,
          removeComments: false,
        },
   )
  

官网详解：www.webpackjs.com/plugins/spl…

5、sourceMap 调试

• devtool: "none" 对应的打包后的文件不利于开发调试
• devtool: "cheap-source-map"对应的打包前的文件，并指出异常行数

package依赖安装

  "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.0",
    "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.1.1",
    "less-loader": "^10.0.1",
    "mini-css-extract-plugin": "^2.1.0",
    "optimize-css-assets-webpack-plugin": "^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.1.1",
    "webpack": "^5.1.3",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "lib-flexible": "^0.3.2"
  }

特意说下：不同插件及不同版本之间会出现不兼容，导致打包失败的情况，并非配置的问题，这里的版本是我测试过没问题的，如打包失败请按指定版本号安装依赖

// github地址： github.com/838216870/w…