webpack3 编译兼容 IE8- 的正确姿势

发表于 | 分类于 | 评论数：

接上一篇《关于新版本 webpack gulp 兼容 IE8- 的正确姿势》踩了几次坑后，重新整理下方案。

遇到的问题

上一篇中的方法在 webpack 更新后，uglify 缓存地址也发生了变化，需要重新找地址。
后来测试发现不论是 uglify-js2 uglify-js3 都是支持 IE8 兼容处理的。
但在 webpack.optimize.UglifyJsPlugin 中加配置参数却无效。(webpack 的锅)
总不能每次都手动去找 webpack 缓存路径进行劫持吧，那要疯了。

UglifyjsWebpackPlugin

关键点依然在于 UglifyjsWebpackPlugin 插件，但并不是内置的 webpack.optimize.UglifyJsPlugin 插件。

1
$ npm i -D uglifyjs-webpack-plugin

单独安装这个插件后使用即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js',
  },
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        ie8: true,
      },
    }),
  ],
};

是不是觉得返璞归真了。

ps: webpack 2 3 版本都支持。

小结

这一发现是同事发现 uglify-js3 中也支持 ie8 兼容处理。
然后我重新去测试了几遍，顺便翻了 webpack 官网插件 后验证可行性。
否则我可能还会继续使用之前那个繁琐的方式。