基础webpack配置

  1. // webpack.config.js
  2. const path = require('path')
  3. const htmlWebpackPlugin = require('html-webpack-plugin')
  4. const {CleanWebpackPlugin} = require('clean-webpack-plugin')
  5. module.exports = {
  6.   // 单入口spa
  7.     entry: './src/index.js',
  8.  // 多入口mpa
  9.  //entry: {
  10.  //    index: './src/index.js',
  11.  //    login: './src/login.js'
  12.  //},
  13.   mode: 'development',
  14.   output: {
  15.       path: path.resolve(__dirname, './dist'),
  16.     filename: '[name].js'
  17.   },
  18.   module: {
  19.         rules: [
  20.       {
  21.                 test: /\.css$/,
  22.         use: ['style-loader', 'css-loader'],
  23.       },  
  24.     ]
  25.   },
  26.   plugins: [
  27.       new htmlWebpackPlugin({
  28.         template: './src/index.html',
  29.       filename: 'index.html'
  30.     }),
  31.     new CleanWebpackPlugin(),
  32.   ]
  34. }

思考题

1. hash, chunkhash, contenthash的区别

  1. hash跟整个项目的构建相关，只要项目的文件发生更改，整个项目构建的hash值都会发生更改，并且全部文件相同的hash值
  2. chunkhash，由于采用hash每一次构建生成的值不一样，即使文件内容没有发生变化，无法实现缓存的效果，而chunkhash 是根据不同的入口文件进行依赖解析，构建单独的chunk, 生成对应的哈希值，在项目中把一些公共库和程序入口文件分开，采用chunkhash单独构建，只要不改动公共库的代码，就可以保持其哈希值不会受影响
  3. contenthash, 由于chunkhash的同一个模块将js和css分离，其哈希值也是相同的，修改一处，js和css的哈希值都会变，无法做到很好缓存，而contenthash表示由文件的内容产生的值，内容不同产生的contenthash值也不一样，项目中通常把css抽离出对应的css文件加以引用
  4. 小结，对于缓存的友好度：contenthash > chunkhash > hash

2. 谈谈对bundle, chunk, moulde的区别

  1. 开发中项目源码中的一个个文件，无论是ESM还是CommonJS或者是AMD的模块规范，都是属于module
  1. 当开发中的module源文件被webpack进行打包时，webpack会根据文件的引用关系生成chunk文件，webpack会给这些chunk生成对应的id用于后续操作
  2. webpack处理好chunk文件，最后会输出bundle文件，它包含经过加载和编译的最终源文件，可以直接在浏览器运行
  3. 一般而言，一个chunk对应一个bundle, 但也有例外，如果使用MiniCssExtractPlugin从chunk 中抽离出css会生成单独的css bundle文件
  4. 小结，module, chunk 和 bundle其实是同一份代码在不同场景下的不同名字，开发者开发时写的代码就是module, webpack 处理代码是就是chunk, 最后生成在浏览器可以直接运行的代码就是bundle