我使用的版本:3.5.1
我是渐进式使用 webpack 的,一开始只用它打包 js。但是现在开始会把越来越多的依赖交给它管理,所以记一篇笔记。这篇不是教程,而是结合开发经验,总结一些特定需求的解决方案。
将 .vue 中的样式提取到独立文件
主要依赖 extract-text-webpack-plugin 这个插件。
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
module: {
loaders: [
{
test: /\.vue$/,
loaders: 'vue-loader',
options: {
loaders: {
stylus: ExtractTextPlugin.extract({
use: ['css-loader', 'stylus-loader'],
fallback: 'vue-style-loader'
})
}
}
}
}
},
plugins: [
new ExtractTextPlugin('./css/styles.css')
]
}
这段代码省去了其它内容。它会把所有 .vue 中的 stylus 样式抽出来,放在 output.path/css/styles.css
里。
处理样式中的图片
上面的配置,如果样式中有 background url()
就会报错,这是因为 webpack 要管理所有依赖。此时需要使用 url-loader
和 filel-loader
。前者可以把图片转化成 base64,后者则是把图片复制到新的位置,并加以管理。
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|svg)$/,
loader: 'url-loader',
options: {
name: '[path][name].[ext]',
limit: 8192
}
}
]
}
}
这段代码,会处理 CSS 中引用的图片,其中,<=8K 的图片会转化成 Base64,其它会复制到 output.path/图片路径/
目录下。此时,如果你对几个输出文件的路径有要求,可以通过调整 output.publicPath
来实现。比如在我的项目中,我希望生成的结构是:
build/
css/
img/
js/
index.html
而生成的 CSS 里,图片的路径是 img/pic.jpg
。此时可以通过设置 publicPath: '../'
,将其修改为 ../img/pic.jpg
。
压缩 JS
以前压缩 JS 都放在 Gulp 里来做,Webpack 只负责打包 JS,所以 .pipe(uglify())
即可。如今把东西放到 webpack 里统一打包了,在这样操作会报错,因为有很多其它资源。
此时要用到 uglifyjs-webpack-plugin,目前最新版本 1.0.0-alpha.2,可以直接压缩 ES6 代码,省去不少事。
const Uglify = require('uglifyjs-webpack-plugin');
module.exports = {
plugins: [
new Uglify()
]
};
在 JS 里使用
最近为公司制作官网,要做国际化,所以需要输出不同语言版本。HTML 部分直接用 cheerio 遍历更新即可;JS 遇到一些问题,主要是想看怎么替换比较好。目前采取的方案是把所有文字放在一个单独的 JSON 文件,然后用 webpack.DefinePlugin 来替换到 JS 里,但是这样就需要在 JS 里直接执行 webpack。
查了一下没找到相关文档,关键词也被占用,很难搜。不过看下 webpack-stream 插件的源码,做法也很简单:
const webpack = require('webpack');
webpack(config, (err, stats) => {
});
吐槽:
- 以前 Gulp 取代 Grunt 的时候,大家都说 Gulp 好,条例清晰。现在 webpack 又回到配置文件的怀抱,大家还是用得开开心心的……
发表回复