webpack-learing/webpack.prod.js

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const glob = require('glob')
const setMPA = () => {
  const entry = {}
  const htmklWebpackPlugins = [];
  const entryFiles = glob.sync(path.join(__dirname ,"./src/*/index.js")) // 匹配入口文件
  console.log('entryFiles',entryFiles)
  Object.keys(entryFiles).map((index) => {
    const entryFile = entryFiles[index]
    const match = entryFile.match(/src\/(.*)\/index\.js/)
    const pageName = match && match[1]
    entry[pageName] = entryFile; // 设置entry
    htmklWebpackPlugins.push( // 设置html模版
      new HtmlWebpackPlugin({
        template: path.join(__dirname, `src/${pageName}/index.html`),
        filename: `${pageName}.html`,
        chunks: ['vendors', pageName],
        inject: true, // 注入css/js
        minify: { // 模板格式设置
          html5:true,
          collapseWhitespace: true ,
          preserveLicenseComments: false ,
          minifyJS: true ,
          minifyCSS: true,
          removeComments: true,
        }
      }),
    )
  })
  return {
    entry,
    htmklWebpackPlugins ,
  }
}
const {entry,htmklWebpackPlugins} = setMPA()
module.exports = {
  entry,
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[chunkhash:8].js' // hash, chunkhash, cententhash 哈希
  },
  // mode: 'development',
  mode: 'production',
  watch: true ,
  module: {
    rules:[
      {
        test: /.js$/,
        use:'babel-loader'
      },
      {
        test: /.css$/,
        use:[
          // 'style-loader',// 将css插入到html style标签，如果要使用contenthash生成css文件，需要注释
          MiniCssExtractPlugin.loader ,
          'css-loader'
        ]
      },
      {
        test: /.less$/,
        use:[
          // 'style-loader',// 将css插入到html style标签，如果要使用contenthash生成css文件，需要注释
          MiniCssExtractPlugin.loader ,
          'css-loader',
          'less-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('autoprefixer')({ // 自动补全
                  overrideBrowserslist:["last 2 version", ">1%", 'ios 7']
                })
              ]
            }
          }, {
            loader: "px2rem-loader",
            options: {
              remUnit: 75, // 1rem = 75px
              remPrecesion: 8, // px转换rem到小数位
            }
          }
        ]
      },
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use:[
          {
            loader: 'file-loader',
            options: {
              // limit: 10240
              name: '[name]_[hash:8].[ext]'
            }
          }
        ]
      },
      {
        test: /.(otf|ttf|woff|woff2|eot)$/,
        use:[
          {
            loader: 'file-loader',
            options: {
              // limit: 10240
              name: '[name]_[hash:8][ext]'
            }
          }
        ]
      }
    ]
  },
  plugins:[
    new MiniCssExtractPlugin({
      filename: '[name]_[contenthash:8].css'
    }),
    new OptimizeCSSAssetsPlugin({ // 压缩css
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano')
    }),
    new CleanWebpackPlugin(), // 构建完成之前删除原来到构建目录
  ].concat(htmklWebpackPlugins),
  // optimization : {
  //   splitChunks: {
  //     cacheGroups: {
  //       commons: {
  //         test: /(react|react-dom)/,
  //         name: "vendors",
  //         chunks: 'all'
  //       }
  //     }
  //   }
  // }
  optimization : {
    splitChunks: {
      minSize: 0, // 引用的模块大小，
      cacheGroups: {
        commons: {
          // test: /(react|react-dom)/,
          name: "commons",
          chunks: 'all',
          minChunks: 3, // 最少引用了两次
        }
      }
    }
  }
}