在供应商bundle中最小化增量时 webpack 的问题

Question

我正在尝试在用webpack和babel处理的项目中使用增量dom 我正在使用 webpack 自动将脚本与供应商分开，但我在使用浏览器控制台日志显示的增量 dom 函数时遇到问题： 未捕获的语法错误： 未捕获的语法错误： 函数语句需要函数名称

function (e) {return 11 === e.nodeType || 9 === e.nodeType} (t)? t.activeElement: null} (e); return n && e.contains (n)? function (e, t) {para (var n = [], r = e; r! == t;) {var o = r; n.push (o), r = o.parentNode} return n} (n, t): []}

我可以看到问题出在 Webpack 缩小 vendor.bundle.js 文件时，因为当我将选项最小化设置为 false 时，代码可以完美运行。

如何强制正确缩小？

这是我的webpack.config.js文件：

const path = require('path');  
module.exports = (env = {}, argv = {}) => {  
const isProd = argv.mode === 'production';  
return {  
entry: {  
brick: './src/brick.js'  
},  
output: {  
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'  
},  
optimization: {  
minimize: true,  
splitChunks: {  
cacheGroups: {  
commons: {  
test: /node_modules/,  
name: "vendor",  
chunks: "initial"
}
}
}
},
resolve: {
modules: [
path.resolve('./'),
path.resolve('./node_modules')  
]
},  
module: {  
rules:  [  
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env'], 
plugins: ['@babel/plugin-proposal-class-properties']
}
}
},
{
test: /-tpl.hbs$/,
use: ['babel-loader', 'incremental-bars-loader']  
}  
]  
},  
stats: { 
colors: true  
},  
devtool: 'source-map',  
devServer: {  
// Display only errors to reduce the amount of output.  
stats: "errors-only",  
compress: true,  
contentBase: path.join(__dirname, 'dist'),  
host: 'localhost', //process.env.HOST, // Defaults to `localhost`  
port: process.env.PORT, // Defaults to 8080  
open: 'http://localhost:8080/index.html', // Open the page in browser  
},  
}  
};

package.json ：

{  
"name": "brick",  
"version": "1.0.0",  
"description": "Base strtucture of webcomponents",  
"main": "index.js",  
"author": "Alex Mora <oa.mora>",  
"license": "MIT",  
"scripts": {  
"dev": "webpack-dev-server --debug --devtool source-map --output-pathinfo --mode development --progress --colors"  
},  
"devDependencies": {  
"@babel/core": "^7.5.5",  
"@babel/plugin-proposal-class-properties": "^7.5.5",  
"@babel/preset-env": "^7.5.5",  
"babel-loader": "^8.0.6",  
"incremental-bars-loader": "^0.1.0",  
"webpack": "^4.39.2",  
"webpack-cli": "^3.3.7",  
"webpack-dev-server": "^3.8.0"  
},  
"dependencies": {  
"incremental-dom": "^0.6.0"  
}  
}

砖.js ：

import {patch, elementVoid, elementOpen, text, elementClose} from 'incremental-dom';  
import template from './brick-tpl.hbs';  
class Brick extends HTMLElement {  
_root = {};  
constructor() {  
super();  
let root = this._root = this.attachShadow({mode: 'closed'});  
patch(root, () => {  
this.render({someCondition: true, text: 'texto'})  
});  
let i = 0;  
setInterval(() => {  
patch(root, () => {  
this.render({someCondition: (i % 2) === 0, text: 'texto', numero: i++})  
});  
}, 1000)  
}  
render(data) {  
template(data);  
}  
}  
customElements.define('magic-brick', Brick);

砖-tpl.hbs ：

<div>  
some text
</div>  
<h1>Hello! {{text}} {{numero}}</h1>  
{{#if someCondition}}  
<p>  
es par  
</p>  
{{/if}}

Answer 1

主要问题是缩小，Webpack 默认使用 Terser，但似乎有一个错误

一种可能的解决方案是更改最小化器插件， 我将 terser 插件更改为 babel-minify-webpack-plugin， 所以优化部分现在看起来像这样

const MinifyPlugin = require('babel-minify-webpack-plugin');
optimization: {
minimize: true,
minimizer: [new MinifyPlugin()],
splitChunks: {
cacheGroups: {
commons: {
test: /node_modules/,
name: "vendor",
chunks: "initial"
}
}
}
},