【发布时间】：2018-08-27 11:52:36
【问题描述】：
我的浏览器应用程序的网络和网络工作者部分之间共享了大量代码。
我如何告诉 webpack 将我的代码分成公共块，以保证结果 100% 工作？
在我告诉 webpack 生成公共块（它确实如此）之后，webworker 代码中断（在运行时失败）。即使我修复了微不足道的“未定义窗口”错误，工作人员也什么都不做。
我相信这与 webpack 的“target”选项有关，默认设置为“web”。但我需要“网络”目标，因为我没有纯粹的网络工作者代码。
我也不能做多个 webpack 配置，因为我不能用多个配置做公共块的事情......
我该怎么办？
如果有人感兴趣：我正在尝试为我的应用构建一个最小尺寸的构建，其中包括 monaco 编辑器（提供工作人员）：
https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md
您可以在此处（页面底部）看到入口点由 1 个主入口文件 + 工人组成。
由于我正在使用重复的代码，目前至少浪费了 6 MB，并且由于这个问题目前无法拆分。浪费了很多流量。
有什么想法吗？ :)
我的 webpack 4.1.1 配置基本上是：
module.exports = (env, options) => {
const mode = options.mode;
const isProduction = mode === 'production';
const outDir = isProduction ? 'build/release' : 'build/debug';
return {
entry: {
"app": "./src/main.tsx",
"editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
"ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker.js'
},
output: {
filename: "[name].bundle.js",
path: `${__dirname}/${outDir}`,
libraryTarget: 'umd',
globalObject: 'this',
library: 'app',
umdNamedDefine: true
},
node: {
fs: 'empty'
},
devtool: isProduction ? undefined : "source-map",
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"],
alias: {
"@components": path.resolve(__dirname, "src/components"),
"@lib": path.resolve(__dirname, "src/lib"),
"@common": path.resolve(__dirname, "src/common"),
"@redux": path.resolve(__dirname, "src/redux"),
"@services": path.resolve(__dirname, "src/services"),
"@translations": path.resolve(__dirname, "src/translations"),
"@serverApi": path.resolve(__dirname, "src/server-api")
}
},
optimization: isProduction ? undefined : {
splitChunks: {
minSize: 30000,
minChunks: 1,
name: true,
maxAsyncRequests: 100,
maxInitialRequests: 100,
cacheGroups: {
default: {
chunks: "all",
priority: -100,
test: (module) => {
const req = module.userRequest;
if (!req) return false;
return (!/node_modules[\\/]/.test(req));
},
},
vendor: {
chunks: "all",
test: (module) => {
const req = module.userRequest;
if (!req) return false;
if (!/[\\/]node_modules[\\/]/.test(req)) return false;
return true;
},
priority: 100,
}
}
},
},
module: {
rules: [...(isProduction ? [] : [
{
enforce: "pre", test: /\.js$/, loader: "source-map-loader",
exclude: [
/node_modules[\\/]monaco-editor/
]
}
]),
{
test: require.resolve('jquery.hotkeys'),
use: 'imports-loader?jQuery=jquery'
},
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader",
options: {
configFileName: 'src/tsconfig.json',
getCustomTransformers: () => {
return {
before: [p => keysTransformer(p)]
};
}
}
},
{
test: /\.(css|sass|scss)$/,
use: extractSass.extract({
use: [
{
loader: 'css-loader',
options: {
minimize: isProduction
}
},
{
loader: "postcss-loader",
options: {
plugins: () => [autoprefixer({
browsers: [
'last 3 version',
'ie >= 10'
]
})]
}
},
{ loader: "sass-loader" }
],
fallback: "style-loader"
})
},
{
test: /node_modules[\/\\]font-awesome/,
loader: 'file-loader',
options: {
emitFile: false
}
},
{
test: { not: [{ test: /node_modules[\/\\]font-awesome/ }] },
rules: [
{
test: { or: [/icomoon\.svg$/, /fonts[\/\\]seti\.svg$/] },
rules: [
{ loader: 'file-loader?mimetype=image/svg+xml' },
]
}, {
test: { not: [/icomoon\.svg$/, /fonts[\/\\]seti\.svg$/] },
rules: [
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'svg-url-loader',
options: {}
}
},
]
},
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader'
},
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader" },
]
},
]
},
plugins: [
new HardSourceWebpackPlugin({
cacheDirectory: '../node_modules/.cache/hard-source/[confighash]', configHash: function (webpackConfig) {
return require('node-object-hash')({ sort: false }).hash(Object.assign({}, webpackConfig, { devServer: false }));
},
environmentHash: {
root: process.cwd(),
directories: [],
files: ['../package-lock.json'],
}
}),
new webpack.ProvidePlugin({
"window.$": "jquery"
}),
new CleanWebpackPlugin(outDir),
extractSass,
new HtmlWebpackPlugin({
title: 'my title',
filename: 'index.html',
minify: isProduction ? {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
removeComments: true,
removeRedundantAttributes: true
} : false,
template: 'index_template.html',
excludeChunks: ['ts.worker', "editor.worker"]
}),
new webpack.IgnorePlugin(/^((fs)|(path)|(os)|(crypto)|(source-map-support))$/, /vs[\\\/]language[\\\/]typescript[\\\/]lib/)
].concat(isProduction ? [new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})] : [])
}
};
【问题讨论】：
-
不幸的是，该线程中的修复（删除 HotModuleReplacementPlugin）不适用于我，没有启用该插件。我认为这更适用于我：github.com/webpack/webpack/issues/6525。那么 webpack 中缺少功能并且没有错误？
-
我想这会解决你的问题：stackoverflow.com/a/49119917/1544364
-
我对工人不太了解，但这似乎也相关？ github.com/webpack/webpack/issues/6472
-
手动更改全局对象 (window=self) 没有帮助。工人然后什么都不做（运行，但不做它的工作，没有错误）。我真的怀疑这是因为他们不是“网络+网络工作者”的组合目标。我想目标不仅仅是改变全局对象
标签： javascript webpack bundle web-worker code-splitting