构建期间webpack出错但不是dev：“来自UglifyJS的静态错误[...]。 意外的标记：punc（...）“

Question

Came across this error after adding a module (in my case it's vue2-dropzone but apparently this occurs with some other node modules as well) to my codebase. It occurred when I ran npm run build , but everything worked fine using the webpack dev server ( npm run dev ).

ERROR in static/js/vendor.5efd79c0d4a823d6add3.js from UglifyJs
Unexpected token: punc (() [./node_modules/vue2-dropzone/dist/vue2Dropzone.js:1,41920][static/js/vendor.5efd79c0d4a823d6add3.js:42174,41885]

Found a simple solution to the problem, which I'm posting as an answer below -- but would very much like to hear if anyone knows WHY this fixes the problem.

Answer 1

The issue is that for reasons above my pay grade, babel-loader must be used to load this particular module. Or something like that. The solution is to modify your webpack.base.conf.js file to include the offending module (whichever one appears in the error above) in the babel-loader rule as follows:

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/<NAME_OF_NODE_MODULE>')]
}

UPDATE (per SLaks in the comments): This happens when UglifyJS requires Babel's features (eg language extensions) in order to understand a given module's code.