升级到 webpack2

近期在公司把 PC-WWW 项目从之前比较复杂的脚本改成了webpack,随后因为看到webpack2发布了正式版本又升级到了 webpack2。效果非常好。

为什么使用 webpack

webpack 是一款非常非常强大的前端资源处理工具,可以把所有前端需要的资源统一处理。比如js文件,css文件,甚至图片,字体文件,html文件。通过一个个独特的 loader 来对文件进行一些处理。

比如可以通过 babel-loader 对使用ES2015+的js代码进行编译处理,改成浏览器可以理解的es5甚至是es3的语法。通过css-loader对css文件进行一些处理,比如hash掉class名,通过stylus-loader将stylus语法的文件转成css语法,通过file-loader对图片进行处理,等等等等。

还有更强大的功能么?当然是有的。

可以通过配置publicPath将静态资源文件直接改成cdn路径。通过html插件将资源文件直接写入html。仅仅通过一个-p参数实现生产环境的配置。通过react-hot-loader实现热重载。通过postcss-loader对css文件进行添加前缀,变量支持等处理。

webpack 使得前端开发变得更加工程化,更加合理,更加舒适,更具有灵活性。

为什么升级 webpack2

既然 webpack1 已经很好用了,为什么还要费大力气升级 webpack2,而且坑也比较多。

主要是因为两个原因:

如果哪位读者做过服务端渲染就会知道,路由的异步加载需要用到 require.ensure,但是这在服务端没有,所以需要 polyfill,很麻烦。而升级到 webpack2 的话就不需要处理这些,用自带的 import 即可。

webpack2 用了 Treeshaking。可以分析引用文件,进而不加载不需要的文件,有效减少文件的大小,减少一定的加载时间,提升用户体验。

就最后的结果来看,服务端渲染正常,而前端js代码文件明显减少,效果很好。

结构

整个结构分为这么几个部分:

一个基础配置模块,用以把通用的配置抽离出来。

一个开发配置项,一个服务端配置项,还有一些特殊的配置脚本

因为yarn拥有更快的安装速度,比较推荐yarn,如果不熟悉,可以看一下这篇文章了解一下

$ yarn add webpack webpack-dev-server\
react-hot-loader@next extract-text-webpack-plugin@2.0.0-beta.5\
babel-loader babel-preset-es2015 babel-preset-react\
babel-preset-stage-0 style-loader css-loader\
autopprefixer postcss-loader postcss-modules-values

dev

由于使用了react-hot-loader,需要在entry加上一些配置

react-hot-loader 是用来热加载组件的,简单来说修改组件以后可以自动在局部刷新,而不用整个页面刷新。可以减少等待时间,使得整个过程没有之前整页刷新那样痛苦。

entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./your/entry.js'
],

至于output的配置也是比较正常的,有一点需要注意的是尽量使用 path.resolve 来解析路径。 output 的作用是告诉 webpack 应该将文件输出在哪里,以什么样的名字输出

output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].bundle.js',
publicPath: '/',
chunkFilename: '[name]-[id].chunk.js'
},

module 是主要的文件处理规则,需要处理的文件在这里定义规则:.css文件需要用css-loader来处理这样的规则。所以 module 的地方配置项变了很多,需要一些调整:

这个module因为dev和server两个部分都要用,所以把它写成了一个func放在base中。至于做成函数而不是配置项是因为css需要在服务端渲染的时候需要切换成另一套配置。

function getModules(cssLocals = false) {
return {
rules: [
{
test: /\.jsx?$/,
use: ['babel-loader'],
exclude: [
path.resolve(__dirname, '..', 'node_modules')
]
},
{
test: /\.css$/,
exclude: [
path.resolve(__dirname, '..', 'node_modules'),
path.resolve(__dirname, '..', 'common', 'assets')
],
loader: getCssLoader(cssLocals)
},
{
test: /\.css$/,
include: [
path.resolve(__dirname, '..', 'node_modules'),
path.resolve(__dirname, '..', 'common', 'assets')
],
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: 'css-loader'
})
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 500,
name: '[name]-[hash].[ext]'
}
}]
}
]
}
}

getCssLoader 的作用是根据不同的参数,返回不同的css配置文件:在服务端渲染阶段,只用生成名字即可,无须将内容输出,而在浏览器中不仅需要生成对应的名字,而且也需要将文件输出,使得样式可见。

function getCssLoader(locals = false) {
const originCssLoaders = [{
loader: `css-loader${locals ? '/locals' : ''}`,
options: {
modules: true,
minimize: true,
camelCase: true,
importLoaders: 1,
localIdentName: '[name]_[local]-[hash:base64:4]',
sourceMap: true
}
}, {
loader: 'postcss-loader'
}]

return locals ? originCssLoaders : ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
'css-loader?modules=true&camelCase=true&importLoaders=1' +
'&localIdentName=[name]_[local]-[hash:base64:4]&sourceMap=true' +
(process.env.NODE_ENV === 'production' ? '&minimize=true' : ''),
'postcss-loader'
]
})
}

因为上面定义了 getModules, 所以现在只要调用就可以得到相应的module配置了,这样webpack就知道如何处理对应的文件:

module: getModules(false)

plugins 是一些插件的配置, 而新版取消了几个配置,这些插件目前感觉是比较合适的:

其作用分别是热更新插件,配置项插件,相同文件打包插件,环境变量定义插件,HTML处理插件,css样式提取插件

  plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.LoaderOptionsPlugin({
debug: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: '[name].[contenthash:8].js',
minChunks: Infinity
}),
new webpack.DefinePlugin({
__DEV__: process.env.NODE_ENV !== 'production' ? 'true' : 'false',
NODE_ENV: process.env.NODE_ENV,
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development_local')
}
}),
new HtmlWebpackPlugin({
filename: 'index.html',
inject: 'body',
template: path.resolve(__dirname, '..', 'your', 'view.html')
}),
new ExtractTextPlugin({
filename: '[name].[contenthash:8].css',
allChunks: true
})
],

还有resolve配置,也就是少写点儿后缀名:

resolve: {
extensions: ['.js', '.jsx']
}

devServer是在开发阶段用到的一些配置,也需要进行一部分设置:

devServer: {
hot: true,
contentBase: path.resolve(__dirname, '..', 'dist'),
historyApiFallback: true,
proxy: [
proxyThis('/apiV1'),
proxyThis('/apiV2')
]
}

这里的proxy作用是对请求进行拦截,转发至另外的服务器。在这个配置中通用的做法是把请求转到mock server上。可以根据自己的需要进行配置,如果有多个配置项推荐写成一个函数调用:

function proxyThis(where) {
return {
path: where,
debug: true,
target: 'http://your.dev.api.server',
secure: false,
changeOrigin: true,
header: {
cookie: 'some cookie'
}
}
}

到这里,整个开发环境的配置就完成了。可以通过写入npm script来进行调用,这样就又可以少打几个字:

"scripts": {
"dev": "cross-env NODE_ENV=development_local webpack-dev-server\
--colors --config ./build/webpack.config.dev.js"

}

server

项目中用到了server render,所以还需要对服务端代码进行打包。打包过程分为两个部分,分为客户端打包和服务端打包。之所以分为两个部分是因为两个部分需求不同,客户端需要代码压缩,需要css文件输出,需要把外部文件打包出来。而服务侧代码则不同,完全拒绝代码压缩,css不需要文件输出,外部node模块直接引用,而无需打包。

在客户端的打包配置如下:

const clientConfig = {
entry: {
bundle: path.resolve(__dirname, '..', 'your', 'client', 'index.js'),
vendor // 根据你自己的项目配置vendor
},
output: {
path: path.resolve(__dirname, '..', 'your', 'client/dist'),
filename: '[name].[chunkhash:8].js',
publicPath: process.env.NODE_ENV !== 'production' ?
`/` : `${your.cdn.server}/`,
chunkFilename: '[id].[chunkhash:8].js'
},
module: getModules(false),
resolve,
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'],
filename: '[name].[chunkhash:8].js'
}),
new webpack.DefinePlugin({
NODE_ENV: process.env.NODE_ENV
}),
new HtmlWebpackPlugin({
filename: 'index.ejs',
template: path.resolve(__dirname, '..', 'your', 'client', 'pc.ejs'),
inject: true,
includes: getViewShouldBeIncluded()
}),
new ExtractTextPlugin({
filename: '[name].[contenthash:8].css',
allChunks: true
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
comments: false
})
]
}

在服务端渲染的时候用了ejs作为模板,里面用了一些语法,所以需要include,这里不给出具体的实现了,作用就是把一些需要include的文件加载进来。

服务端的打包比较类似,不过要加上target和一些output的改变, 还有一定要注意不要打包到 public 目录下,这个文件是不能让用户访问得到的:

const serverConfig = {
devtool: 'source-map',
entry: path.resolve(__dirname, '..', 'your', 'server', 'entry.js'),
output: {
path: path.resolve(__dirname, '..', 'your', 'server', 'output'),
filename: 'index.js',
publicPath: process.env.NODE_ENV !== 'production' ?
`/` : `${your.cdn.server}/`,
chunkFilename: '[id].[chunkhash:8].js',
libraryTarget: 'commonjs2'
},
target: 'node',
node: {
__dirname: true,
__filename: true
},
module: getModules(true),
externals: getExternals(),
resolve,
plugins: [
new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) })
]
}

这里的getExternals是把整个node_modules作为externals:

function getExternals() {
return fs.readdirSync(path.resolve(__dirname, '..', 'node_modules'))
.filter(filename => !filename.includes('.bin'))
.reduce((externals, filename) => {
externals[filename] = `commonjs ${filename}`
return externals
}, {})
}

最后的导出需要导出一个数组,webpack是可以接受的:

module.exports = [clientConfig, serverConfig]

同样写入到npm scripts中

"scripts": {
"compile": "cross-env NODE_ENV=production webpack\
--colors --config ./build/webpack.config.server.js && node ./build/postCompile.js"

}

注意事项

其实之前漏掉了一个很重要的配置:.babelrc

根据官网说是要把 es2015 设置成这样,因为webpack会自动识别并处理:

{ "presets" : [[ "es2015", {"modules": false}], "react"]}

经过我亲身实践,没错,它是骗你的。

这个点说出来全是泪:有时候要加上modules: false,而有时候不需要。我在mac下是需要加,而Ubuntu又不能加。版本更新依旧如此。

所以这个地方,你可能需要靠猜了,加modules: false试试,如果报错类似于exports is not defined这样的错误就去掉再试试。

变成类似于这样的就可以了:

{
"presets": [
"es2015",
"stage-0",
"react"
],
"plugins": [
"transform-runtime",
"react-hot-loader/babel",
]
}

这个插件也改了配置,需要传入对象。还有,注意不要拼错单词 😑

webpack2推荐使用import()异步加载脚本,然而用的时候有时候会报错类似于import and export may only appear at the top level这样的问题,解决方法是这样的:

$ yarn add -D babel-plugin-syntax-dynamic-import

然后加入如下内容到.babelrc中:

{ "plugins": ["syntax-dynamic-import"] }

如果你碰到了类似于这样的报错:parseQuery should get a string as first argument,恭喜你,你可能又踩坑了,解决方案是更新一下loader-utils,这个问题贼坑,我在Ubuntu上没碰到,@可诚 在Mac上碰到了。

解决方法是更新一下这个包

$ yarn upgrade loader-utils

如果你还用了一大堆postcss的插件,那么你可能需要更新到一个新的postcss.config.js中了。

类似于这样的:

module.exports = {
plugins: [
require('postcss-modules-values'),
require('autoprefixer')
]
}

服务端渲染需要用到match,找了很多资料,都是当做同步函数使用的,然而实际上是异步的. 所以在使用的时候一定要注意。一定要注意!一定要注意!

关于服务端渲染请参考这篇文章的实现:教你如何搭建一个超完美的服务端渲染开发环境

如果你还有问题

如果你还有问题,公司的配置我不能开放出来,但是推荐你去看看我另一个项目的配置文件,少了服务端渲染的部分,但是服务端渲染所需要注意的地方在这篇文章中有了一些说明。应该不会有什么问题了的。

AnnatarHe-graduation-project/exam-online-fe

babel-polyfill

这是一个babel用于兼容低版本浏览器的包,里面又引用了core.js,包括了很多es6,7实现的一些方法的实现,这个包挺大的。如果项目中没有用到其中的一些函数,可以选择部分加载。

详细请看这里, 选择项目中用到的函数加载好了。

结论

如果不在意webpack2的无限大坑文档,其实升级之后的打包效果比较好的。

我们项目原来的三个主要文件分别是(未gzip压缩, 未去除babel-polyfill):

vendor: 283kb

bundle: 147kb

css: 18.5kb

经过webpack2的打包降成了:

vendor: 216kb

bundle: 177kb

css: 21.9kb

总共降低了37kb.

效果还是有的。

推荐你也快升(cai)级(keng)吧~😊