Webpack 笔记

记录一些 webpack 的使用经验。我是渐进式使用 webpack 的,一开始只用它打包 js。但是现在开始会把越来越多的依赖交给它管理,所以记一篇笔记。这里不会教怎么使用,而是结合开发经验,总结一些特定需求的解决方案。

花莲海岸

我使用的版本: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-loaderfilel-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 又回到配置文件的怀抱,大家还是用得开开心心的……