关于本项目webpack配置说明

• 如果你刚开始学习webpack请先阅读官网文档，了解基本的概念和配置

• 本章只讲解本项目中的配置及遇到过的问题

• 本项目webpack配置文件是webpack.base.conf.js和webpack.config.js

module.exports.entry

• entry是配置webpack入口文件，入口文件都是js文件，由于我们是多页面配置,所以entry参数配置为数组

• 配置webpack要有一个认识，所以资源都是围绕js文件展开的，像其他的html，css资源都要导入到js文件中,然后把js文件作为打包入口去打包

• 考虑到js文件存放的目录比较随意并不一定所有js文件都作为打包入口文件，所以在views.json

  中配置入口文件路径目录（这里约定每个文件夹是一个入口）.配置代码如下

  let entry = {};
  dirJSON.forEach(page => {
   entry[page.url] = path.resolve(__dirname, `./src/views/${page.url}/index.js`);
  });

module.exports.output

• output是配置webpack出口文件，对应每个入口文件（在entry配置的js文件），output主要配置js文件的输入路径，文件名称等

module.exports.plugins

• 该配置以全局的视角处理资源，如删除文件，压缩资源，提取合并资源等

• webpack只处理js文件，对于其他类型的资源要借助插件或者“loader”，如下代码使用html-webpack-plugin插件处理html， 该插件可以指定html的模版、输出路径、文件名、是否压缩及引用哪些资源（chunks）等，因为我们是多页面，所以需要遍历 views.json对每个html模版添加插件

   let plugins = [];
   dirJSON.forEach(page => {
        plugins.push(
            new HtmlPlugin({
                favicon: path.resolve(__dirname, `./src/assets/img/favicon.ico`),
                filename: path.resolve(__dirname, `./dist/${page.url}.html`),
                template: path.resolve(__dirname, `./src/views/${page.url}/index.html`),
                chunks: chunks,
                chunksSortMode: 'manual',
                minify: isProd ? {
                    collapseWhitespace: true,
                    removeComments: true
                } : false,
                xhtml: true
            })
        );
   });

• 默认情况下css会和js打包在一个文件中，如下代码，使用mini-css-extract-plugin 提取样式内容到单独的css文件,可以指定提取后输出的目录，文件名等

   new MiniCssExtractPlugin({
       filename: 'css/' + (isProd ? '[name].[contenthash:8].min.css' : '[name].css'),
       chunkFilename: 'css/' + (isProd ? '[name].chunk.[contenthash:8].min.css' : '[name].chunk.css'),
   })

module.exports.module.rules

• 主要配置项目中的各种类型资源用什么工具处理，如html使用html-withimg-loader，图片使用url-loader等

• 如下代码所示，处理图片使用url-loade和image-webpack-loader, limit=4096表示将小于4kb的图片转为base64字符串嵌在html中，limit参数单位是byte，不是kb， outputPath=img/指定图片输出在img目录下； image-webpack-loader用于压缩图片,注意所有的loader都是从后向前执行，对于这里的图片处理，先执行image-webpack-loader压缩图片，然后使用url-loade处理图片

   {
       test: /\.(png|jpg|jpe?g|gif|svg)$/,
       use: ['url-loader?limit=4096&name=[name]' + (isProd ? '.[hash:8]' : '') + '.[ext]&outputPath=img/', 'image-webpack-loader']
   }

• 如下代码是对css文件的处理（scss文件同理，该项目使用scss写样式）。使用mini-css-extract-plugin插件提取样式内容，同时需要配置 MiniCssExtractPlugin.loader，参数publicPath: '../'可以指定css样式中图片的发布路径，如果不配置css中的图片资源会引用不到（background:url('')），因为我们把 图片放在/img目录下，css放在css目录下，css要引用到图片需要../img/。要么使用绝对路径； css-hot-loader用于监听css文件的改变刷新页面

   {
       test: /\.(css)$/,
       use: [{
           loader: 'css-hot-loader'
       }, {
           loader: MiniCssExtractPlugin.loader,
           options: {
               publicPath: '../'
           }
       }, {
           loader: 'css-loader'
       }]
   }

module.exports.optimization.splitChunks

• webpack4资源分割配置，默认情况下html所引用的js会放在一个js文件中，但是对于公共的js内容我们想放在一起，于是有了如下配置，

  参数test指定打包的资源目录，name给资源起个别名，生成的文件叫chunk，如下代码配置，

  我们把'./node_modules'和'./src/assets/libs'目录下用到的js打包在一起并起名为'vendors'，把'./src/assets'目录下的资源打包在一起并起chunk名为'assets'

• 该配置只需在打包环境（production）下使用，开发模式不需要，所以此配置在webpack.config.js文件中

 splitChunks: {
     chunks: 'initial',
     minSize: 0,
     cacheGroups: {
         vendors: {
             test: path.resolve(__dirname, './node_modules'),
             priority: -1,
             name: 'vendors'
         },
         libs: {
             test: path.resolve(__dirname, './src/assets/libs'),
             priority: -5,
             name: 'vendors'
         },
         assets: {
             test: path.resolve(__dirname, './src/assets'),
             priority: -10,
             name: 'assets'
         }
     }
 }

关于文件使用hash命名

• 对于webpack中的hash，chunkhash，contenthash还不了解，请先百度

• 为了使缓存最大化，js、css和图片均使用hash命名，对于每次打包文件内容不变则文件名不变。使用hash命名只在打包环境（production）下，开发环境下不需要

• 图片名为[name].[hash:8].[ext]

• css利用mini-css-extract-plugin插件配置文件名为[name].[contenthash:8].min.css,chunk名为[name].chunk.[contenthash:8].min.css

• js文件命令为[name].[chunkhash].min.js，chunk名为[name].chunk.[chunkhash].min.js。使用webpack-plugin-hash-output插件

  生成chunkhash，这里不能使用[chunkhash:8],否则js文件名会每次改变；webpack4对js文件也提供了contenthash但是没有效果，可能是提取css时导致了js文件变化

关于文件的压缩

文件压缩只需在打包情况下使用，开发模式不使用

• html压缩在html-webpack-plugin中配置minify参数，该插件依赖html-minifier

  具体配置可以看这里

• 如下代码配置是取消html中的空格和删除注释

  new HtmlPlugin({
     minify: isProd ? {
         collapseWhitespace: true,
         removeComments: true
     } : false,
  })

• css压缩 使用optimize-css-assets-webpack-plugin插件

• js压缩 设置module.exports.optimization.minimize为true，webpack使用uglifyjs-webpack-plugin插件压缩js