phoenix选择了brunch作为静态资源的管理工具,一番折腾之后,发现这个东西确实独特,配置少,上手简单,编译快。但是随着使用的深入,它的不足也越来越明显,老旧,更新缓慢,各种资源都年久失修。为了让brunch配合vue使用,我甚至还花了几天时间去修复插件vue-brunch的bug,于是,就有了本文所进行的探索。

不过选择webpack并不是因为它多么的好,恰恰相反,我反而觉得它太过复杂,概念繁多,文档看似丰富其实犹抱琵琶。对于新手实在太不友好。不过鉴于功能和流行程度,目前处理复杂的前端资源,webpack还是不二的选择。

目标

实现一个最小化的webpack配置,功能上要能完全取代默认的brunch的配置。

webpack复杂配置的可怕大家都是有目共睹的,所以我希望这个配置能足够精简,仅仅完成phoenix创建项目后默认提供的那些功能就好,因为对于webpack,想扩展功能太容易了。

第一步

首先从assets/package.json开始,需要先卸载devDependencies下所有的包,全都换成webpack系列,命令就不列了,毕竟复制粘贴太烦人,只截取展示一下package.json吧:

1
2
3
4
5
6
7
8
9
10
11
12
"devDependencies": {
"@babel/core": "^7.0.0-beta.37",
"@babel/preset-es2015": "^7.0.0-beta.37",
"babel-loader": "^8.0.0-beta.0",
"copy-webpack-plugin": "^4.3.1",
"css-loader": "^0.28.8",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"style-loader": "^0.19.1",
"uglifyjs-webpack-plugin": "^1.1.6",
"webpack": "^3.10.0"
}

这里我激进的采用了babel 7,相应的,babel-loader的版本需要是8

主要部分

然后,就是最主要的webpack.config.js了,文件内容如下:

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
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
config = {
devtool: 'eval-cheap-module-source-map',
entry: {
app: ['./css/app.css', './js/app.js']
},
output: {
path: path.resolve(__dirname, '../priv/static'),
filename: 'js/[name].js',
},
module: {
rules: [{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: {
loader: 'css-loader',
options: { url: false }
}
})
}, {
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-es2015']
}
}, {
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
},
plugins: [
new ExtractTextPlugin('css/[name].css'),
new CopyWebpackPlugin([{
from: './static'
}])
]
}
if (process.env.MIX_ENV === 'prod' || process.env.NODE_ENV === 'production') {
config.devtool = 'source-map'
config.plugins.concat([
new UglifyJSPlugin({
parallel: true,
sourceMap: true
}),
new webpack.optimize.ModuleConcatenationPlugin()
])
}
module.exports = config

同时,还需要在./css/app.css中加上:

1
@import "./phoenix.css"

可以看到这里使用了4个loader,分别处理css,js和图片三种静态资源,
开发环境中,使用了用于提取css的ExtractTextPlugin和用来拷贝静态资源的CopyWebpackPlugin
针对生产环境,增加了生成source map的选项并使用uglifyjs对代码进行压缩

需要注意的是,这里使用了./css/app.css作为入口之一,也就意味着不必在js文件中加入import来引入css文件,不过这样一来,就需要在app.css文件中加入上面那一行代码来解决引入css的问题。还有一种无需修改代码的方法,即把./css/phoenix.css也加入entry中,不过我认为这样不够直观,并不是一个好的选择。

依然是引入css的问题,phoenix.css中会导入一些字体文件,这些文件并不存在而且也无引入的必要,所以配置css-loader,将选项url置为false,这样webpack在编译时就不会试图检查这些字体了。

最后

为了让静态资源在发生变化时phoenix能够及时响应,必须修改config/dev.exs,变动如下:

1
2
- watchers: [node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
+ watchers: [node: ["node_modules/webpack/bin/webpack.js", "--stdin", "--color",

phoenix默认配置了一些npm scripts,为了命令行保持统一,assets/package.json相应做如下修改:

1
2
3
4
5
- "deploy": "brunch build --production",
- "watch": "brunch watch --stdin"
+ "deploy": "MIX_ENV=prod webpack -p --progress",
+ "build": "webpack --progress",
+ "watch": "webpack --stdin --progress"

对于为何不用npm run命令来运行watcher,官方在这里做出了解释

最后的最后,不要忘记删除brunch-config.js,至此,就大功告成了。

附上目录下文件的变动情况:

1
2
3
4
5
6
deleted: assets/brunch-config.js
modified: assets/css/app.css
modified: assets/package-lock.json
modified: assets/package.json
new file: assets/webpack.config.js
modified: config/dev.exs