Webpack 3 笔记

我使用的版本：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) => {

});

---

吐槽：

1. 以前 Gulp 取代 Grunt 的时候，大家都说 Gulp 好，条例清晰。现在 webpack 又回到配置文件的怀抱，大家还是用得开开心心的……