webpack2 - Webpack 使用 CommonsChunkPlugin 提取 jQuery 等库后使用 UglifyJsPlugin 出错

问题描述

问 题

先说需求:

我用了 jQuery 和 Fountdation Sites (类似于 Bootstrap ),
现在我需要把 jQuery 和 Foundation 用 CommonsChunkPlugin 提取出来,
打包成 vendor.js , 但是在 UglifyJs 的时候出现了错误.

上 Webpack 配置

webpack.common.js

const path = require('path');
const Webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    'js/main': './src/index.js',
    'js/vendor': ['jquery', 'foundation-sites'],
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, '../assets'),
  },
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                config: {
                  path: './config/postcss.config.js',
                  ctx: {
                    autoprefixer: { browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3'], },
                  },
                },
                sourceMap: true,
              },
            },
            'sass-loader',
          ],
        }),
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env'],
            cacheDirectory: true,
          },
        },
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: (getPath) => getPath('css/[name].css').replace('css/js', 'css'),
      allChunks: true,
    }),
    new Webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
    new Webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
    }),
  ],
  resolve: {
    extensions: ['.json', '.js', '.jsx', '.css', '.scss'],
    modules: ['node_modules'],
  },
};

webpack.prod.js

const Merge = require('webpack-merge');
const Webpack = require('webpack');
const WebpackShellPlugin = require('webpack-shell-plugin');
const CommonConfig = require('./webpack.common.js');

module.exports = Merge(CommonConfig, {
  plugins: [
    new Webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false,
    }),
    new Webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      },
    }),
    new Webpack.optimize.UglifyJsPlugin({
      beautify: false,
      mangle: {
        screw_ie8: true,
        keep_fnames: true,
      },
      compress: {
        screw_ie8: true,
      },
      comments: false,
    }),
    new WebpackShellPlugin({
      onBuildExit: ['jekyll build'],
      dev: false,
    }),
  ],
  devtool: 'source-map',
});

再是终端输出:

> webpack --config config/webpack.prod.js

Node#moveTo was deprecated. Use Container#append.
(node:283) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.
Executing additional scripts before exit
Hash: bc6e3c46c9ac8682c675
Version: webpack 3.1.0
Time: 28303ms
           Asset       Size  Chunks                    Chunk Names
    js/vendor.js     619 kB       0  [emitted]  [big]  js/vendor
      js/main.js   83 bytes       1  [emitted]         js/main
       vendor.js    1.71 kB       2  [emitted]         vendor
    css/main.css  957 bytes       1  [emitted]         js/main
js/vendor.js.map     730 kB       0  [emitted]         js/vendor
css/main.css.map   89 bytes       1  [emitted]         js/main
  [19] ./src/index.js 47 bytes {1} [built]
  [20] ./src/sass/mvxtheme.scss 41 bytes {1} [built]
  [21] multi jquery foundation-sites 40 bytes {0} [built]
    + 36 hidden modules

ERROR in js/vendor.js from UglifyJs
Unexpected character '`' [js/vendor.js:10294,124]
Child extract-text-webpack-plugin:
       [0] ./node_modules/css-loader!./node_modules/postcss-loader/lib?{"config":{"path":"./config/postcss.config.js","ctx":{"autoprefixer":{"browsers":["last 2 versions","ie >= 9","and_chr >= 2.3"]}}},"sourceMap":true}!./node_modules/sass-loader/lib/loader.js!./src/sass/mvxtheme.scss 1.09 kB {0} [built]
        + 1 hidden module
Configuration file: /mnt/c/Users/garfi/Documents/GitHub/MvvmCross/docs/_config.yml
            Source: /mnt/c/Users/garfi/Documents/GitHub/MvvmCross/docs
       Destination: dist
 Incremental build: disabled. Enable with --incremental
      Generating...
   GitHub Metadata: No GitHub API authentication could be found. Some fields may be missing or have incorrect data.
                    done in 42.66 seconds.
 Auto-regeneration: disabled. Use --watch to enable.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mvxtheme@1.0.0 build: `webpack --config config/webpack.prod.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mvxtheme@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/garfield/.npm/_logs/2017-07-08T08_57_42_120Z-debug.log
------------------------------------------------------------

最后报错信息:

ERROR in js/vendor.js from UglifyJs
Unexpected character '`' [js/vendor.js:10294,124]

内容较多, 可能看起来比较麻烦一点.

解决方案

错误信息里已经说了，由于出现`这个es6中的模板字符串符号导致的
而UglifyJs只支持es5，uglify-es才支持es6+
但是uglify-es目前并没有比较好的webpack插件(虽然npm上有个连文档都没有的插件....)

解决方案的话，把foundation-sites从bable-loader的exclude里去掉
或者改为引用foundation-sites/dist/js/foundation.js

这篇关于webpack2 - Webpack 使用 CommonsChunkPlugin 提取 jQuery 等库后使用 UglifyJsPlugin 出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！