最近在用vue-cli生成的webpack模板做项目,开发过程中需要改动webpack配置,研究了一下配置文件,发现了一篇很好的博文
http://blog.csdn.net/hongchh/article/details/55113751
照个注释,自己也过了一遍。
文件结构
响应内容
1 | ├─build |
build/dev-server.js
首先来看执行”npm run dev”时候最先执行的build/dev-server.js文件。该文件主要完成下面几件事情:
- 检查node和npm的版本、引入相关插件和配置
- webpack对源码进行编译打包并返回compiler对象
- 创建express服务器
- 配置开发中间件(webpack-dev-middleware)和热重载中间件(webpack-hot-middleware)
- 挂载代理服务和中间件
- 配置静态资源
- 启动服务器监听特定端口(8080)
- 自动打开浏览器并打开特定网址(localhost:8080)
代码注释
1 | //检查nodeJs和npm的版本 |
build/webpack.base.conf.js
webpack.base.conf.js主要完成了下面这些事情:
- 配置webpack编译入口
- 配置webpack输出路径和命名规则
- 配置模块resolve规则
- 配置不同类型模块的处理规则
说明: 这个配置里面只配置了.js、.vue、图片、字体等几类文件的处理规则,如果需要处理其他文件可以在module.rules里面另行配置。
代码注释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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
// 在开头引入webpack,后面的plugins那里需要
var webpack = require("webpack")
//获取绝对路径
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
//webpack 入口文件
entry: {
app: './src/main.js'
},
//webpack 输出路径和命名规则
output: {
//webpack 输出的目标文件夹luj(例如:/dist)
path: config.build.assetsRoot,
//webpack 输出bundle文件命名格式
filename: '[name].js',
//webpack 编译输出的发布路径
publicPath: process.env.NODE_ENV === 'production' ?
config.build.assetsPublicPath : config.dev.assetsPublicPath
},
//模块resolve的规则
resolve: {
extensions: ['.js', '.vue', '.json'],
//别名,方便引用模块
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
//不同类型模块处理规则
module: {
rules: [{
// 对所有.vue文件使用vue-loader进行编译
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
// 对src和test文件夹下的.js文件使用babel-loader将es6+的代码转成es5
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
// 对图片资源文件使用url-loader
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
// 小于10K的图片转成base64编码的dataURL字符串写到代码中
limit: 10000,
// 其他的图片转移到静态资源文件夹
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
// 对多媒体资源文件使用url-loader
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
// 小于10K的资源转成base64编码的dataURL字符串写到代码中
limit: 10000,
// 其他的资源转移到静态资源文件夹
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
// 对字体资源文件使用url-loader
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
// 小于10K的资源转成base64编码的dataURL字符串写到代码中
limit: 10000,
// 其他的资源转移到静态资源文件夹
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
// 增加一个plugins
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
}
build/webpack.dev.conf.js
接下来看webpack.dev.conf.js,这里面在webpack.base.conf的基础上增加完善了开发环境下面的配置,主要包括下面几件事情:
- 将webpack的热重载客户端代码添加到每个entry对应的应用
- 合并基础的webpack配置
- 配置样式文件的处理规则,styleLoaders
- 配置Source Maps
- 配置webpack插件
代码注释
1 | var utils = require('./utils') |
build/utils.js
utils提供工具函数,包括生成处理各种样式语言的loader,获取资源文件存放路径的工具函数。
- 计算资源文件存放路径
- 生成cssLoaders用于加载.vue文件中的样式
- 生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件
1 | var path = require('path') |
build/vue-loader.conf.js
1 | var utils = require('./utils') |
build/dev-client.js
dev-client.js里面主要写了浏览器端代码,用于实现webpack的热更新。
1 | /* eslint-disable */ |
build/build.js
构建环境下的配置。执行”npm run build”的时候首先执行的是build/build.js文件,build.js主要完成下面几件事:
- loading动画
- 删除目标文件夹
- 执行webpack构建
- 输出信息
说明: webpack编译之后会输出到配置里面指定的目标文件夹;删除目标文件夹之后再创建是为了去除旧的内容,以免产生不可预测的影响。
1 | // 检查NodeJS和npm的版本 |
build/webpack.prod.conf.js
构建的时候用到的webpack配置来自webpack.prod.conf.js,该配置同样是在webpack.base.conf基础上的进一步完善。主要完成下面几件事情:
- 合并基础的webpack配置
- 配置样式文件的处理规则,styleLoaders
- 配置webpack的输出
- 配置webpack插件
- gzip模式下的webpack插件配置
- webpack-bundle分析
说明: webpack插件里面多了压缩代码以及抽离css文件等插件。
1 | var path = require('path') |
build/check-versions.js
完成对node和npm的版本检测
1 | // chalk, 用于在控制台输出带颜色字体的插件 |
config/index.js
config文件夹下最主要的文件就是index.js了,在这里面描述了开发和构建两种环境下的配置,前面的build文件夹下也有不少文件引用了index.js里面的配置。
1 | // see http://vuejs-templates.github.io/webpack for documentation. |
配置注释在github上放了一份配置