webpack构建流程
从启动webpack构建到输出结果经历了一系列过程：
- 解析webpack.config.js配置参数，调用shell并追加命令行参数，通过 optimist将前两者参数整合成 options 对象传到了下一个流程的控制对象中
- 注册所有配置的插件，让插件监听webpack构建生命周期的事件节点，以做出对应的反应。
- 从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。
- 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
- 递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。
- 输出所有chunk到文件系统。
入口和上下文(entry and context)
entry
指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
-
单入口
entry: './src/app.js'
等同于下面写法：
entry: {
main: './src/app.js'
}
复制代码-
对象语法
分离 应用程序(app) 和 第三方库(vendor) 入口
entry: {
app: './src/main.js',
vendor: './src/jquery.js'
}
复制代码这告诉我们 webpack 从 main.js 和 jquery.js 开始创建依赖图(dependency graph)。这些依赖图是彼此完全分离、互相独立的。
context
webpack 编译时的基础目录，entry和loader 会相对于此目录查找
默认值为当前目录,不建议修改
出口(output)
告诉 webpack 在哪里输出它所创建的 bundles
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: 'js/[name].js'
}
复制代码publicPath
用于指定打包后的文件需要加载的外部资源（如图片、js、css等）的跟路径
默认值是一个空字符串 ""，通常设置成"/"静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径
- loader 输出图片文件配置
{ name: 'imgs/[name].[ext]' }
// 那么图片最终的访问路径为
output.publicPath（'/'） + 'imgs/[name].[ext]' = '/imgs/[name].[ext]'
复制代码- plugin 提取css文件配置：
new ExtractTextPlugin('css/[name].[contenthash:10].css')
// html中加载css打包后代码
"/css/app.9502b0c565.css" rel="stylesheet">
复制代码- html中加载js打包后代码
复制代码path
打包文件输出的目录
建议绝对路径；默认值为当前路径。
path 中用使用 [hash] 模板可用于版本回归
output: {
path: path.resolve('./dist/[hash:8]/')
}
复制代码loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）
注意：module.loaders 改为 module.rules；链式loader
- webpack1语法
module: {
loaders: [{
test: /\.less$/,
loader: "style!css!less"
})
}
复制代码- webpack2、3语法
module: {
rules: [{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
]
}]
}
复制代码文件类
raw-loader 加载文件原始内容，比如.txt文件
file-loader 将文件发送到打包后文件夹中
{
test: /\.(gif|png|jpe?g|svg)$/,
use: [{
loader: 'file-loader',
options:{}
}]
}
复制代码默认输出到output的根目录下，name为32为hash值
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| name | {String | Funciton} | [hash].[ext] | 自定义文件名 |
placeholders
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| [ext] | {String} | file.extname | 资源扩展名 |
| [name] | {String} | file.name | 资源名 |
| [path] | {String} | file.dirname | 资源路径 |
| [hash] | {String} | md5 | 内容的哈希值 |
url-loader 功能类似file-loader
对file-loader的扩展，可以设置小图片转换base64图片
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit:5000,
name: 'img/[name].[ext]?[hash]'
}
}
]
}
复制代码转换编译类
script-loader
在全局上下文(global context)执行一次 JS脚本,就像你在网页上通过