距离上次更新已经过了 1089 文中部分内容可能已经过时,如有疑问,请在下方留言。

webpack详细配置:smile:
webpack详细配置之entry
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| 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' }
|
webpack.config.js文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { entry: { index: ['./src/index.js', './src/count.js'], add: './src/add.js' }, output: { filename: '[name].js', path: resolve(__dirname, 'build') }, plugins: [new HtmlWebpackPlugin()], mode: 'development' };
|
webpack详细配置之output
filename
:文件名称(指定名称+目录)。
path
:输出文件目录(将来所有资源输出的公共目录)。
publicPath
:所有资源引入公共路径前缀 –> ‘imgs/a.jpg’ –> ‘/imgs/a.jpg’。
chunkFilename
:非入口chunk的名称,如:
第一种情况:通过import语法,将文件单独分割成一个chunk,这个chunk的名称会采用这个chunkFilename: 'js/[name]_chunk.js'
这个命名。
第二种情况: 通过optimization将node_modules分割成单独的一个chunk,这个chunk的名称也会采用这个chunkFilename: 'js/[name]_chunk.js'
这个命名。
关于代码分割详细看:这里。
library
:整个库向外暴露的变量名。
llibraryTarget: 'window'
变量名添加到哪个上 browser。
libraryTarget: 'global'
变量名添加到哪个上 node。
webpack.config.js文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| 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'), publicPath: '/', chunkFilename: 'js/[name]_chunk.js', }, plugins: [new HtmlWebpackPlugin()], mode: 'development' };
|
webpack详细配置之module
test: /\.css$/
:正则表达式,用来检测文件。
loader: 'eslint-loader'
单个loader用loader。
use: ['style-loader', 'css-loader']
多个loader用use。
exclude: /node_modules/
排除node_modules下的js文件。
include: resolve(__dirname, 'src')
只检查 src 下的js文件。
enforce: 'pre'
优先执行。
enforce: 'post'
延后执行。
oneOf: []
以下配置只会生效一个。
webpack.config.js文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
| 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') }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.js$/, exclude: /node_modules/, include: resolve(__dirname, 'src'), enforce: 'pre', loader: 'eslint-loader', options: {} }, { oneOf: [] } ] }, plugins: [new HtmlWebpackPlugin()], mode: 'development' };
|
webpack详细配置之resolve
resolve解析模块的规则
- alias 配置解析模块路径别名: 优点简写路径 缺点路径没有提示。
- extensions 配置省略文件路径的后缀名。注意不能有相同的文件名。
- modules 告诉 webpack 解析模块是去找哪个目录,不用一个一个向上级目录去寻找,直接一步到位。
webpack.config.js文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| 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'], modules: [resolve(__dirname, '../../node_modules'), 'node_modules'] } };
|
webpack详细配置之 devserver
webpack.config.js文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| devServer: { contentBase: resolve(__dirname, 'build'), watchContentBase: true, watchOptions: { ignored: /node_modules/ }, compress: true, port: 5000, host: 'localhost', open: true, hot: true, clientLogLevel: 'none', quiet: true, overlay: false, proxy: { '/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '' } } } }
|
webpack详细配置之optimization
splitChunks
代码分割。
runtimeChunk
将当前模块的记录其他模块的hash单独打包为一个文件 runtime。解决:修改a文件导致b文件的contenthash变化。
minimizer
配置生产环境的压缩方案:js和css。
webpack.config.js文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
| 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'
}, runtimeChunk: { name: entrypoint => `runtime-${entrypoint.name}` }, minimizer: [ new TerserWebpackPlugin({ cache: true, parallel: true, sourceMap: true }) ] } };
|