作用：让代码上线运行缓存更好使用

缓存：
babel缓存
cacheDirectory:true
—> 让第二次打包构建速度更快
文件资源缓存
hash:每次webpack构件时会生成唯一一个hash值
问题：因为js和css同时使用一个hash值
如果重新打包，会导致所有缓存失效（可能我只改动一个文件）
chunkhash：根据chunk生成的hsash值。如果打包来源于同一个chunk，那么hash值就一样
问题：js和css的hash值还是一样的
因为css是在js中被引入的，所以同属于一个chunk
contenthash：根据文件的内容生成hash值，不同文件的hash值一定不一样
—> 让代码上线运行缓存更好使用

代码以contenthash为例

  1. const { resolve } = require('path')
  2. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  3. const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
  4. const HtmlWebpackPlugin = require('html-webpack-plugin');
  6. /**
  7.  * 缓存：
  8.  * babel缓存
  9.  *   cacheDirectory:true
  10.  *   --> 让第二次打包构建速度更快
  11.  * 文件资源缓存
  12.     * hash:每次webpack构件时会生成唯一一个hash值
  13.     *  问题：因为js和css同时使用一个hash值
  14.     *  如果重新打包，会导致所有缓存失效（可能我只改动一个文件）
  15.     * chunkhash：根据chunk生成的hsash值。如果打包来源于同一个chunk，那么hash值就一样
  16.     *  问题：js和css的hash值还是一样的
  17.     *   因为css是在js中被引入的，所以同属于一个chunk
  18.     * contenthash：根据文件的内容生成hash值，不同文件的hash值一定不一样
  19.     * --> 让代码上线运行缓存更好使用
  20.  */
  23.  //定义nodejs环境变量：决定使用browserslist的哪个环境
  24. process.env.NODE_ENV = 'production'
  26. //复用loader
  27. const commonCssLoader = [
  28.     MiniCssExtractPlugin.loader,
  29.     'css-loader',
  30.     {
  31.         //还需要在package.json中定义browserslist
  32.         loader: 'postcss-loader',
  33.         options: {
  34.             ident: 'postcss',
  35.             plugins: () => [
  36.                 require('postcss-preset-env')()
  37.             ],
  39.         }
  40.     }
  41. ]
  43. module.exports = {
  44.     entry: './src/js/index.js',
  45.     output: {
  46.         filename: 'js/built.[contenthash:10].js',
  47.         path: resolve(__dirname, 'build'),
  48.         // publicPath: 'build'
  49.     },
  50.     module: {
  51.         rules: [
  52.             {
  53.                 //在package.json中eslintConfig --> airbnb
  54.                 test: /\.js$/,
  55.                 exclude: /node_modules/,
  56.                 //优先执行
  57.                 enforce: 'pre',
  58.                 loader: 'eslint-loader',
  59.                 options: {
  60.                     fix: true
  61.                 }
  62.             },
  63.             {
  64.                 //以下loader只会匹配一个
  65.                 //注意：不能有两个配置 处理同一个文件
  66.                 oneOf: [
  67.                     {
  68.                         test: /\.css$/,
  69.                         use: [...commonCssLoader],
  70.                     },
  71.                     {
  72.                         test: /\.less$/,
  73.                         use: [...commonCssLoader, 'less-loader']
  74.                     },
  75.                     /**
  76.                      * 正常来讲，一个文件只能被一个loader处理
  77.                      * 当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
  78.                      * 先执行eslint 再执行babel
  79.                      */
  81.                     {
  82.                         test: /\.js$/,
  83.                         exclude: /node_modules/,
  84.                         loader: 'babel-loader',
  85.                         options: {
  86.                             presets: [
  87.                                 [
  88.                                     '@babel/preset-env',
  89.                                     {
  90.                                         //按需加载
  91.                                         useBuiltIns: 'usage',
  92.                                         //指定core-js版本
  93.                                         corejs: {
  94.                                             version: 3
  95.                                         },
  96.                                         targets: {
  97.                                             chrome: '60',
  98.                                             firefox: '60',
  99.                                             ie: '9',
  100.                                             safari: '10',
  101.                                             edge: '17'
  102.                                         }
  103.                                     }
  104.                                 ],
  105.                             ],
  106.                             //开启babel缓存
  107.                             //第二次构建时，会读取之前的缓存
  108.                             cacheDirectory:true
  109.                         }
  110.                     },
  111.                     {
  112.                         test: /\.(jpg|png|gif)/,
  113.                         loader: 'url-loader',
  114.                         options: {
  115.                             limit: 8 * 1024,
  116.                             name: '[hash:10].[ext]',
  117.                             outputPath: '../imgs',
  118.                             esModule: false,
  120.                         }
  121.                     },
  122.                     {
  123.                         test: /\.html$/,
  124.                         loader: 'html-loader'
  125.                     },
  126.                     {
  127.                         exclude: /\.(js|css|less|html|jpg|png|gif)/,
  128.                         loader: 'file-loader',
  129.                         options: {
  130.                             outputPath: 'media',
  132.                         }
  133.                     }
  135.                 ]
  136.             }
  138.         ]
  139.     },
  140.     plugins: [
  141.         new MiniCssExtractPlugin({
  142.             filename: 'css/built.[contenthash:10].css'
  143.         }),
  144.         new OptimizeCssAssetsWebpackPlugin(),
  145.         new HtmlWebpackPlugin({
  146.             template: './src/index.html',
  147.             minify: {
  148.                 collapseWhitespace: true,
  149.                 removeComments: true
  150.             }
  151.         })
  152.     ],
  153.     mode: 'production',
  154.     devtool:'source-map'
  155. }