一见如故
- chunk是中间过程的代码块,bundle是结果代码块
- entry指定入口文件
- output指定出口chunk和非出口chunk的输出名称及文件夹和打包目录(dist)
- module配置规则,每个规则有test、loader、options等属性
- plugins配置插件
产生chunk的三种途径
1、entry入口(单入口产生一个chunk,多入口产生多个chunk)
2、异步加载模块
3、代码分割(code spliting)
splitChunk: {
cacheGroup: {
vendor: 产生一个chunk
common: 产生一个chunk
}
}
entry
1、string(单入口)
// 打包形成一个chunk,此时chunk的名称默认是main。输出一个bundle文件
entry:'./src/index.js',
output: {
filename:'[name].js',//此处那么就是main
}
2、array(多入口)
// 所有入口文件最终会形成一个chunk,输出只有一个bundle文件
// add.js会被打包到index.js中
// 只有在HMR功能中让html热更新生效用到
entry: ['./src/index.js', './src/index.html']
3、object(多入口)
// 有几个入口文件,就会形成几个chunk(chunk的名称就是key),输出几个bundle。
entry: {
index: './src/index.js',
add: './src/add.js'
}
4、组合用法
// 形成两个chunk,输出两个bundle文件;react和react-dom会形成一个chunk,输出到一个bundle中
// 在dll中会这么用
entry: {
jquery: ['jquery'],
vue: ['react', 'react-dom']
}
output
output: {
// 指定名称和目录,此处name是chunk的名称
filename: 'js/[name].js',
// 将来所有资源输出的公共目录
path: resolve(__dirname, 'dist'),
// 所有资源引入的公共路径前缀,用于生产配置
// 'imgs/a.jpg' => '/imgs/a.jpg'(服务器根目录下找imgs/a.jpg)
publicPath: '/',
// 非入口chunk的名称,如果不见这个配置,非入口的chunk会使用filename规则输出
// 非入口的chunk指:import函数引入的js模块,或者node_modules里面分出的chunk
chunkFilename: 'js/[name]_chunkhhh.js',
// library相关配置只是在项目被别人用到,需要向外暴露时才有用
// 整个库向外暴露的变量名
library: '[name]',
// 变量添加到xx上
libraryTarget: 'window',
// 变量以commonjs规范引入
libraryTarget: 'commonjs'
},
module
module: {
rules: [
{
test: /\.css/,
// 多个loader用use
use: ['style-loader', 'css-loader']
},
{
test: /\.js$/,
// 单个loader用loader
loader: 'bable-loader',
// 单个loader可加options配置选项
options: {},
// 排除node_modules下的文件,用作打包优化
exclude: /node_modules/,
// 只检查src下的js文件,用作打包优化
include: resolve(__dirname, 'src'),
// pre优先执行,post推迟执行
enforce: 'pre'
},
{
// 找到某个文件的处理的loader,就直接用,不再过后面的loader了,用作打包优化
// 如js文件遇到babel-loader和eslint-loader,就只用其中一个,所以把eslint-loader写到oneof外面
oneOf: [
{ test: /\.x1/, loader: 'xxx1' },
{ test: /\.x2/, loader: 'xxx2' }
]
}
]
},
plugins
依赖包:html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
// 默认创建一个html文件,并自动引入打包输出的所有资源
// new HtmlWebpackPlugin()
new HtmlWebpackPlugin({
// 复制模板,并...
template: './src/index.html',
// 输出目录及名称
filename: 'abc/index.html',
// 压缩html
minify: {
// 移除空格
collapseWhitespace: true,
// 移除注释
removeComments: true
}
})
]