④webpack 配置详解

---

本人是个新手，写下博客用于自我复习、自我总结。
如有错误之处，请各位大佬指出。
学习资料来源于：尚硅谷

---

entry

entry的用法，目前已经都遇到过了，一共三种。

1. entry: './src/js/index.js' 单入口
   它会打包形成一个chunk。 输出一个bundle文件。
   此时chunk的名称默认是 main 。
   （就是假如在output里，没有指定名字：filename: '[name].js'，
   那么默认名是main）。
2. entry: ['./src/index.js', './src/count.js'] 多入口
   所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件。
   这种用法之前在HMR中用到过，当时是通过修改entry入口，将html文件引入。
   目前，这种用法只用在HMR功能中，让html热更新生效。
3. 多入口。这种用法之前在code split，代码分割中提到，就是用来有几个入口文件就形成几个chunk，输出几个bundle文件。 此时chunk的名称是 key 。

entry: {
    index: './src/js/index.js',
    test: './src/js/test.js'
}

组合用法：

entry: {
    index: ['./src/index.js', './src/count.js'], 
    add: './src/add.js'
}

---

output

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  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'
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development'
};

这其中publicPath: '/'，一般用于生产环境，它会在路径前加一个前缀，比如，路径会从’imgs/a.jpg’ 变成 ‘/imgs/a.jpg’ ，这两种路径还是有区别的，加斜杠会以当前服务器地址为补充，去服务器根目录下寻找这么一个目录，不加斜杠是在当前路径下找。
效果：<script type="text/javascript" src="/js/main.js"></script></body>

library一般用来暴露一些库，通常结合dll，将某些库单独打包，然后引入使用，平常不用。

chunkFilename: 'js/[name]_chunk.js'可以修改非入口chunk的名称

index.js

import count from './count';

console.log('index.js文件加载了~');

import('./add').then(({ default: add }) => {
  console.log(add(1, 2));
});

console.log(count(3, 2));

add.js

function add(x, y) {
  return x + y;
}

export default add;

count.js

function count(x, y) {
  return x - y;
}

export default count;

效果：

---

module

下面只写比较常用的，也是之前用的比较多的，但不是没有其他的用法，有需要查看官方文档就好了。

module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/,
        // 多个loader用use
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.js$/,
        // 排除node_modules下的js文件
        exclude: /node_modules/,
        // 只检查 src 下的js文件
        include: resolve(__dirname, 'src'),
        // 优先执行
        enforce: 'pre',
        // 延后执行
        // enforce: 'post',
        // 单个loader用loader
        loader: 'eslint-loader',
        options: {}
      },
      {
        // 以下配置只会生效一个
        oneOf: []
      }
    ]
}

---

resolve

这个resolve不是之前取路径那个resolve，这个之前没用过，resolve是用来解析模块的规则。

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'development',
  // 解析模块的规则
  resolve: {
    // 配置解析模块路径别名: 优点简写路径 缺点路径没有提示
    alias: {
      $css: resolve(__dirname, 'src/css')
    },
    // 配置省略文件路径的后缀名
    extensions: ['.js', '.json', '.jsx', '.css'],
    // 告诉 webpack 解析模块是去找哪个目录
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
  }
};

对于modules用法，我们可以这么用，modules: ['node_modules']，它就会告诉 webpack 解析模块是去找哪个目录，如果在本级找不到就会去上一级目录寻找。因为之前我提到过，我为了引入的方便，我把需要的文件都下载到了项目的最外层，所以在这里我就通过寻找路径的resolve精确寻找。为了避免找不到，就多加了一个查找，即：modules: [resolve(__dirname, '../../node_modules'), 'node_modules']

通过设置alias，设置了$css，即存放css的路径，那么在js中引入的时候，就可以如下面的index.js的方式引入（也就避免了，如果存放css的路径层级比较多，在js中比较累赘的问题，当然缺点就是只看js文件，你不知道这个css样式是从哪里引入的）。

同时通过设置extensions，可以让我们引入时，省略文件路径的后缀名。当要引入时，它会去指定的目录下，先寻找js后缀有没有这个文件，然后是json后缀、jsx后缀、css后缀，以此类推。找不到就会报错。通常情况下，这里不省略css后缀名，毕竟它是从前向后找，而且有可能会出现命名相同的情况，可能会出现意想不到的问题，这里只是做个示范。如下面的index.js。

index.js

import '$css/index';

index.css

html,body {
  height: 100%;
  background-color: pink;
}

---

dev server

注意：devServer只用于开发环境。

devServer: {
    // 运行代码的目录
    contentBase: resolve(__dirname, 'build'),
    // 监视 contentBase 目录下的所有文件，一旦文件变化就会 reload
    watchContentBase: true,
    watchOptions: {
      // 忽略文件
      ignored: /node_modules/
    },
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 5000,
    // 域名
    host: 'localhost',
    // 自动打开浏览器
    open: true,
    // 开启HMR功能
    hot: true,
    // 不要显示启动服务器日志信息
    clientLogLevel: 'none',
    // 除了一些基本启动信息以外，其他内容都不要显示
    quiet: true,
    // 如果出错了，不要全屏提示~
    overlay: false,
    // 服务器代理 --> 解决开发环境跨域问题
    proxy: {
      // 一旦devServer(5000)服务器接受到 /api/xxx 的请求，就会把请求转发到另外一个服务器(3000)
      '/api': {
        target: 'http://localhost:3000',
        // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api）
        pathRewrite: {
          '^/api': ''
        }
      }
    }
}

---

optimization

optimization之前在代码分割中用过。
注意：只用于生产环境。

像当初代码分割一样，这里依然给文件名字加了哈希值，依然会出现以前提到过的问题，就是当我们修改a文件时，a的哈希值就会发生改变，而index因为引入a文件，所以它的哈希值也发生了变化。现在我们不想让index的哈希值也发生改变，所以使用到了runtimeChunk。因为设置了哈希值，所以相当于index文件是根据哈希值引入其他文件的，现在runtimeChunk就会将当前模块的记录其他模块的hash单独打包为一个文件，这样一来a文件改变，只会改变runtimeChunk文件中的哈希值。

当webpack版本在4.2.6及以上时，现在用库terser去压缩js和css，当我们用默认配置去压缩，就不需要修改minimizer中的内容。要修改的话，先下载这个库：

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build'),
    chunkFilename: 'js/[name].[contenthash:10]_chunk.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [new HtmlWebpackPlugin()],
  mode: 'production',
  resolve: {
    alias: {
      $css: resolve(__dirname, 'src/css')
    },
    extensions: ['.js', '.json', '.jsx', '.css'],
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
      // 默认值，不用写：
      /* minSize: 30 * 1024, // 分割的chunk最小为30kb
      maxSize: 0, // 最大没有限制
      minChunks: 1, // 要提取的chunk最少被引用1次
      maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量
      maxInitialRequests: 3, // 入口js文件最大并行请求数量
      automaticNameDelimiter: '~', // 名称连接符
      name: true, // 可以使用命名规则
      cacheGroups: {
        // 分割chunk的组
        // node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js
        // 满足上面的公共规则，如：大小超过30kb，至少被引用一次。
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          // 优先级
          priority: -10
        },
        default: {
          // 要提取的chunk最少被引用2次
          minChunks: 2,
          // 优先级
          priority: -20,
          // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包模块
          reuseExistingChunk: true
        } 
      }*/
    },
    // 将当前模块的记录其他模块的hash单独打包为一个文件 runtime
    // 解决：修改a文件导致b文件的contenthash变化
    runtimeChunk: {
      name: entrypoint => `runtime-${entrypoint.name}`
    },
    minimizer: [
      // 配置生产环境的压缩方案：js和css
      new TerserWebpackPlugin({
        // 开启缓存
        cache: true,
        // 开启多进程打包
        parallel: true,
        // 启动source-map
        sourceMap: true
      })
    ]
  }
};

a.js

export function add(x, y) {
  return x + y;
}

index.js

import(/* webpackChunkName: 'a' */'./a.js').then(({ add }) => {
  console.log(add(1, 2));
});

---