webpack打包相关

browserify：用于将CommonJS编译之后可以在浏览器端使用

一、mode

开发环境mode:'development'
生产环境mode:'production'

二、entry

entry: 入口起点

1. string --> './src/index.js'
   单入口
   打包形成一个chunk。 输出一个bundle文件。
   此时chunk的名称默认是 main
2. array --> ['./src/index.js', './src/add.js']
   多入口
   所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
   --> 只有在HMR功能中让html热更新生效~

3. object
   多入口
   有几个入口文件就形成几个chunk，输出几个bundle文件
   此时chunk的名称是 key
   --> 特殊用法

        {
          // 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
          index: ['./src/index.js', './src/count.js'], 
          // 形成一个chunk，输出一个bundle文件。
          add: './src/add.js'
        }

三、output

output: {
    // 文件名称（指定名称+目录）
    filename: 'js/[name].js',
    // 输出文件目录（将来所有资源输出的公共目录）
    path: resolve(__dirname, 'build'),
    // 所有资源引入公共路径前缀 --> 'imgs/a.jpg' --> '/imgs/a.jpg'
    publicPath: '/',
    chunkFilename: 'js/[name]_chunk.js', // 非入口chunk的名称
    // library: '[name]', // 整个库向外暴露的变量名
    // libraryTarget: 'window' // 变量名添加到哪个上 browser
    // libraryTarget: 'global' // 变量名添加到哪个上 node
    // libraryTarget: 'commonjs'
  },

filename与缓存

• hash，webpack每次打包都会生成新的hash值
• chunkhash，根据chunk生成的hash值，如果打包来源于同一个chunk，那么hash值就一样
• contenthash，根据文件的内容生成hash值，不同文件的hash值一定不一样

四、loader

webpack只能处理js和json文件，其他类型文件需要loader进行编译转换成webpack可识别的文件

1. 处理样式文件，css、less、sass等

style-loader:创建style标签，将js中的样式资源插入进行，添加到head中生效
css-loader:将css文件编译成commonjs模块加载js中，里面内容是样式字符串
less-loader:将less文件编译成css文件
sass-loader:将sass文件编译成css文件

生产环境处理样式文件

(1) 提取css成单独文件
MiniCssExtractPlugin:使用MiniCssExtractPlugin.loader代替style-loader，style-loader内置了HMR功能，所以开发环境还用style-loader

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

(2) css兼容性处理
postcss，postcss-loader，postcss可以在webpack中配置也可以在postcss.config.js中配置。
postcss兼容的常用插件autoprefixer、postcss-preset-env
browserslist浏览器列表配置，可以在package.json中配置browserslist，也可以在.browserslistrc配置

(3) 压缩css
webpack5以前的版本使用optimize-css-assets-webpack-plugin
webpack5及以后的版本使用css-minimizer-webpack-plugin

2. 处理图片资源

url-loader:基于file-loader，增加base64处理
html-loader:处理html文件中的img图片（负责引入img，从而能被url-loader进行处理）

3. 处理字体资源以及其他资源

file-loader

4. 处理js

(1) js语法检查

eslint-loader(已过时，请使用eslint-webpack-plugin)、eslint(详见https://segmentfault.com/a/11...)

(2) js兼容

babel-loader（支持缓存）
@babel/cli @babel/core（按需加载polyfill） 详见babel转码器
@babel/preset-env
@babel/polyfill（已过时，整体加载体积太大）

(3)js压缩

只需要将mode设置为production，js代码会自动压缩

五、resolve

resolve: {
    // 配置解析模块路径别名: 优点简写路径 缺点路径没有提示
    alias: {
      $css: resolve(__dirname, 'src/css')
    },
    // 配置省略文件路径的后缀名
    extensions: ['.js', '.json', '.jsx', '.css'],
    // 告诉 webpack 解析模块是去找哪个目录
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
  }

六、devServer

开发环境使用，自动编译，自动打开浏览器，自动刷新浏览器。
设置hot:true开启HMR（模块热替换），一个模块发生变化，只会重新打包这一个模块，而不是打包所有模块，提升构建速度。

• 样式文件使用style-loader就可以使用HMR功能
• js文件需要在js中修改代码，只能处理非入口js文件的其他文件

if (module.hot) {
   module.hot.accept('./print.js', function() {
     console.log('Accepting the updated printMe module!');
     printMe();
   })
 }

七、devtool

提供源代码与构建后的代码的映射。分两大类：

• 内联，把映射关系嵌套到js文件中
• 外部，单独生成一个映射文件，生产环境不用内联，而且应该隐藏源码

八、externals

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
例如，从 CDN 引入 jQuery，而不是把它打包

九、生产环境优化

1.处理并压缩html

html-webpack-plugin

2.缓存

• 使用babel-loader进行babel缓存，cacheDirectory: true，让第二次打包构建速度更快
• 文件资源缓存output里的filename使用contenthash

3.treeShaking：去除无用代码

前提：1. 必须使用ES6模块化 2. 开启production环境
在package.json中配置

  "sideEffects": false 所有代码都没有副作用（都可以进行tree shaking）
    问题：可能会把css / @babel/polyfill （副作用）文件去掉
  "sideEffects": ["*.css", "*.less"]

4.codesplit

(1) 使用splitChunks

• 可以将node_modules中代码单独打包一个chunk最终输出
• 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk

module.exports = {
  entry: {
    index: './src/js/index.js',
    test: './src/js/test.js'
  },
  output: {
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  mode: 'production'
};

(2) 使用import动态导入语法，能将某个文件单独打包成一个chunk

import(/* webpackChunkName: 'test' */'./test')
  .then(({ mul, count }) => {
    // eslint-disable-next-line
    console.log(mul(2, 5));
  })
  .catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败~');
  });

5.懒加载

使用import动态导入语法进行懒加载

6.dll

使用dll技术，对某些库（第三方库：jquery、react、vue...）进行单独打包
当你运行 webpack 时，默认查找 webpack.config.js 配置文件
在webpack.dll.js 文件中配置需要单独打包的库，DllPlugin 和 DllReferencePlugin 配合使用