webpack葵花宝典！基础配置大全解（下）

一. Entry

const { resolve } = require("path");



module.exports = {

    entry: './src/index.js',

    output: {

        filename: '[name].js',

        path: resolve(__dirname, 'build')

    },

    module: {

        rules:[]

    },



    plugins:[],

    mode: 'production'

}

string

string --> './src/index.js'

entry: './src/index.js',

单入口

打包形成一个chunk。 输出一个bundle文件。

此时chunk的名称默认是 main

array

array --> ['./src/index.js', './src/add.js']

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

多入口

所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。

--> 只有在HMR功能中让html热更新生效~

object

entry: {

    index: './src/index.js',

    add: './src/add.js'

},

多入口

有几个入口文件就形成几个chunk，输出几个bundle文件

此时chunk的名称是 key

特殊用法

所属入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。

entry: {

    index: ['./src/index.js', './src/test.js'], 

    add: './src/add.js'

},





 index: ['./src/index.js', './src/count.js'], 

add: './src/add.js'

//形成一个chunk，输出一个bundle文件。

特殊用法：可以将react相关插件或者vue相关插件放到一起，打包到一个文件。

例如：

entry: {

    jquery: ['jquery'],

    react: ['react', 'react-dom', 'react-router-dom']

}

// 可以分别打包到一个文件

二. Output

filename

输出文件名称（指定名称+目录）

filename: 'js/[name].js'

path

输出文件目录（将来所有资源输出的公共目录）

path: resolve(__dirname, 'build'),

publicPath

所有资源引入公共路径前缀 。

例如：'imgs/a.jpg' --> '/imgs/a.jpg'

publicPath: '/',

加入publicPath后，index.html中引入的js文件：

未加入的js文件：

chunkFilename

非入口chunk的名称

chunkFilename: 'js/[name]_chunk.js',

在js文件中通过import引入后：

import('./add').then(({ default: add }) => {

  console.log(add(1, 2));

});

打包结果：

name\]与打包输出文件重复，所以取打包文件的id命名。  #### 5. library 整个库向外暴露的变量名，一般同dll结合使用 ```js library: '[name]' ``` #### 6. libraryTarget 变量名添加到哪个位置 ```js libraryTarget: 'window' // 变量名添加到哪个上 browser libraryTarget: 'global' // 变量名添加到哪个上 node libraryTarget: 'commonjs' //以commonjs ```   ### 三. Module 0. loader三种写法： ```js module: { rules: [ // 一 { test: /.css$/, use: [ { loader: 'css-loader' } ] } // 二 { test: /.css$/, loader: 'css-loader' } // 三 { test: /.css$/, use: ['css-loader'] } ] } ``` 用于配置loader 1. **include** 只检查 src 下的js文件 ```js include: resolve(__dirname, 'src'), ``` 2. **exclude** 排除node_modules下的js文件 ```js exclude: /node_modules/, ``` 3. **enforce** 执行顺序 ```js // 优先执行 enforce: 'pre', // 延后执行 enforce: 'post', ``` 4. **loader** ```js // 单个loader用loader loader: 'eslint-loader', ``` 5. **oneOf** 只会匹配一次 ```js { // 以下配置只会生效一个 oneOf: [] } ``` 整体配置： ```js 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 解析模块的规则 1. #### alias 简写文件路径，配置解析模块路径别名。 优点：简写路径 缺点：路径没有提示 ```js alias: { $css: resolve(__dirname, 'src/css') }, ``` 配置别名后，可以在打包入口文件简写引入的css文件： ```js import '$css/index.css'; ``` 会自动拼接，寻找路径：src/css/index.css 2. #### extensions 配置省略文件路径的后缀名 ```js extensions: ['.js', '.json', '.jsx', '.css'], ``` 配置后对于没有配置后缀名的文件会自动依次从前往后进行寻找： ```js import '$css/index'; ``` 配置后尽量不要文件重名，可能会导致查找文件错误。 3. #### modules 告诉 webpack 解析模块是去找哪个目录 ```js modules: ['node_modules'] // 指定路径 modules: [resolve(__dirname, '../../node_modules'), 'node_modules'] ``` 整体配置： ```js resolve: { // 配置解析模块路径别名: 优点简写路径 缺点路径没有提示 alias: { $css: resolve(__dirname, 'src/css') }, // 配置省略文件路径的后缀名 extensions: ['.js', '.json', '.jsx', '.css'], // 告诉 webpack 解析模块是去找哪个目录 modules: [resolve(__dirname, '../../node_modules'), 'node_modules'] } ``` ### 五. devServer 1. #### contentBase 运行代码的目录 ```js contentBase: resolve(__dirname, 'build'), ``` 2. #### watchContentBase 监视 contentBase 目录下的所有文件，一旦文件变化就会 reload ```js watchContentBase: true, ``` 3. #### watchOptions 监听watchContentBase的忽略文件 ```js watchOptions: { ignored: /node_modules/ }, ``` 4. #### compress 启动gzip压缩 5. #### port 端口号 ```js port: 5000, ``` 6. #### host 域名 ```js host: 'localhost', ``` 7. #### open 自动打开浏览器 ```js open: true, ``` 8. #### hot ```js hot: true, ``` 9. #### clientLogLevel 不要显示启动服务器日志信息 ```js clientLogLevel: 'none', ``` 10. #### quiet 除了一些基本启动信息以外，其他内容都不要显示 ```js quiet: true, ``` 11. #### overlay 如果出错了，不要全屏提示 ```js overlay: false, ``` 12. #### proxy 跨域代理 ```js proxy: { // 一旦devServer(5000)服务器接受到 /api/xxx 的请求，就会把请求转发到另外一个服务器(3000) '/api': { target: 'http://localhost:3000', // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api） pathRewrite: { '^/api': '' } } } ``` 整体配置： ```js 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 配置代码分割 1. splitChunks 分割模块包的详细配置（默认配置） ```js splitChunks: { chunks: 'all' // 默认值，可以不写~ /* minSize: 30 * 1024, // 分割的chunk最小为30kb maxSiza: 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 } }*/ }, ``` 2. runtimeChunk 将当前模块的记录其他模块的hash单独打包为一个文件 runtime 修改a文件导致b文件的contenthash变化 解决： ```js runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}` }, ``` 3. minimizer 修改配置生产环境的压缩方案：js和css ```js minimizer: [ // 配置生产环境的压缩方案：js和css new TerserWebpackPlugin({ // 开启缓存 cache: true, // 开启多进程打包 parallel: true, // 启动source-map sourceMap: true }) ] ``` 整体配置： ```js optimization: { splitChunks: { chunks: 'all' // 默认值，可以不写~ /* minSize: 30 * 1024, // 分割的chunk最小为30kb maxSiza: 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 }) ] } ```