browserify:用于将CommonJS编译之后可以在浏览器端使用
一、mode
开发环境mode:'development'
生产环境mode:'production'
二、entry
entry: 入口起点
- string -->
'./src/index.js'
单入口
打包形成一个chunk。 输出一个bundle文件。
此时chunk的名称默认是 main - array -->
['./src/index.js', './src/add.js']
多入口
所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。
--> 只有在HMR功能中让html热更新生效~ 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 配合使用
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。