webpack用法
entry
webpack构建的入口,webpack根据入口文件找到依赖模块以及依赖的模块所依赖的模块。
// 单文件写法
entry: {
index: '/app/index.js',
about: '/app/about.js',
}
// 多文件写法,将多个文件打包到同一个bundle中
entry: {
index: ['webpack-hot-middleware/client', '/app/index.js'],
vendors: ['react', 'react-dom', 'redux', 'react-router'],
}
output
webpack的输出,指示webapck如何输出、以及输出到哪里、输出的格式等。
path:输出文件的目录。 filename:输出的文件名,一般跟entry配置相对应。
chunkFilename:块,非入口entry模块,会自动拆分文件,也就是常说的按需加载,与路由中的require.ensure相对应
publicPath:文件输出的公共路径
output: {
path: path.resolve(__dirname, '/assets'),
// entry中的文件对应的文件名
filename: 'js/[name].js',
// 动态加载的文件对应的文件名
chunkFilename: 'js/[name].[chunkhash:8].js',
publicPath: '/static/',
}
// 按需加载
// webpack会以'./chunk'为新的入口生成一个chunk
// 代码只有执行到import语句时,才会动态加载chunk对应的文件
// import返回一个promise对象,可以调用then方法接受返回值
import(/* webpackChunkName: 'chunkName' */ './chunk').then();
loader
webpack只能解析js文件,loader赋予webpack将其他文件转化为webpack能解析的模块的能力。
test:正则表达式,匹配编译的文件
exclude:排除的文件
include:包含的文件
use > loader:相当于test匹配到的文件的解析器
use > options:配合loader使用,可以是字符串或者对象
modules: {
rules: [
{
test: /\.jsx?$/,
use: ['babel-loader'],
},
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')],
},
},
'postcss-loader',
'sass-loader'
],
}
],
}
plugin
webpack的插件,webpack在构建过程中,会在特定的生命周期广播特定的事件,plugin会监听webpack广播的事件,在收到感兴趣的事件后进行特定操作。
常用的webpack插件:
clean-webpack-plugin 删除打包目录中的文件
html-webpack-plugin 自动生成HTML模板,并将打包后的js文件插入HTML中。
mini-css-extract-plugin 提取css代码
webpack构建流程
1、初始化参数
从配置文件(webpack.config.js)和shell脚本读取合并参数,得到最终的参数。
2、开始编译
用上一步得到的参数初始化Compiler对象,加载所有配置的插件,通过执行对象的run方法开始执行编译。
3、确定入口
根据配置中的entry找出所有的入口文件。
4、编译模块
从入口文件出发,调用所有配置的loader对模块进行翻译,再找出该模块依赖的模块,递归本步骤直到所有入口文件所依赖的文件都经过处理。
5、完成模块编译
经过上一步骤之后,得到每个模块被翻译之后的最终内容和他们之间的依赖关系。
6、输出资源
根据入口和模块之间的依赖关系,组装成一个个包含多个模块的chunk,再将每个chunk转换成一个单独的文件加入输出列表中,这一步是可以修改输出内容的最后机会。
7、输出完成
在确定好输出内容之后,根据配置(webpack.config.js和shell)确定输出的路径和文件名,将文件内容写入到文件系统。