我要在webPack config中将开发模式设置为开发时遇到的整个问题！
日志如下：
imgs/screen.png 231 bytes [emitted]
imgs/floor.png 1.74 KiB [emitted]
imgs/wallStock.jpg 77.1 KiB [emitted]
imgs/android-icon.png 16.4 KiB [emitted]
imgs/favicon-96x96.png 7.06 KiB [emitted]
/styles/favicon.ico 1.12 KiB [emitted]
imgs/gcheckmark.png 768 bytes [emitted]
imgs/microphone.png 545 bytes [emitted]
imgs/target.png 25.4 KiB [emitted]
imgs/share-files.png 774 bytes [emitted]
imgs/warning.png 1.3 KiB [emitted]
imgs/webcam.png 398 bytes [emitted]
visualjs2.js 1.84 MiB main [emitted] main
app.html 2.52 KiB [emitted]
/templates/register.html 1.1 KiB [emitted]
/templates/login.html 1.06 KiB [emitted]
[./node_modules/css-loader/index.js!./src/style/styles.css] ./node_modules/css-loader!./src/style/styles.css 9.28 KiB {main} [built]
[./src/app-icon.ts] 641 bytes {main} [built]
[./src/app.ts] 524 bytes {main} [built]
[./src/examples/platformer/platformer.ts] 839 bytes {main} [built]
[./src/examples/platformer/scripts/level1/level1.ts] 5.69 KiB {main} [built]
[./src/icon/permission/webcam.png] 61 bytes {main} [built]
[./src/libs/class/browser.ts] 5.02 KiB {main} [built]
[./src/libs/class/networking/network.ts] 24.9 KiB {main} [built]
[./src/libs/class/view-port.ts] 2.32 KiB {main} [built]
[./src/libs/class/visual-render.ts] 4.15 KiB {main} [built]
[./src/libs/client-config.ts] 2.15 KiB {main} [built]
[./src/libs/ioc.ts] 1.37 KiB {main} [built]
[./src/libs/multiplatform/global-event.ts] 1.48 KiB {main} [built]
[./src/libs/starter.ts] 4.71 KiB {main} [built]
[./src/style/styles.css] 1.06 KiB {main} [built]
Webpack配置：
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const TypedocWebpackPlugin = require('typedoc-webpack-plugin');
module.exports = {
mode: "development",
watch: true,
entry: "./src/app.ts",
output: {
filename: "visualjs2.js",
path: __dirname + "/build"
},
devtool: "inline-source-map",
resolve: {
extensions: [".js", ".ts", ".tsx", ".json"]
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "ts-loader" },
{
test: /\.(jpg|png)$/, loader: "file-loader", options: {
name: '[name].[ext]',
outputPath: "./imgs"
}
},
{ test: /\.css$/, loader: "style-loader!css-loader" },
{
test: /\.(ico)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/styles'
}
}
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
plugins: [
// Make sure that the plugin is after any plugins that add images
new CleanWebpackPlugin(['build'], { /*exclude: ['index.html']*/ }),
new HtmlWebpackPlugin({
filename: 'app.html',
template: 'src/index.html'
}),
new HtmlWebpackPlugin({
filename: '/templates/register.html',
template: 'src/html-components/register.html'
}),
new HtmlWebpackPlugin({
filename: '/templates/login.html',
template: 'src/html-components/login.html'
}),
new ExtractTextPlugin("styles.css")
],
/*
new TypedocWebpackPlugin({
out: './api-doc',
module: 'amd',
target: 'es5',
exclude: '** /node_modules / ** / *.* ',
experimentalDecorators: true,
excludeExternals: true,
name: 'sn-theme',
mode: 'file',
theme: './sn-theme/',
includeDeclarations: false,
ignoreCompilerErrors: true,
})
*/
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 2,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
};
优化工作。无论如何，只有tsconfig.json->模式：“ commonjs”有效。
为什么 visualjs2.js 1.84 MiB main 文件太大！ 有什么建议吗？
模式：生产结果：
警告资产大小限制：以下资产超出了 建议的大小限制（244 KiB）。这可能会影响网络性能。 资产：visualjs2.js（1.52 MiB）
警告入口点大小限制：以下入口点组合 资产大小超出建议的限制（244 KiB）。这可能会影响 网络性能。入口点：主要（1.52 MiB） visualjs2.js
Webpack性能建议中的警告：您可以限制大小 通过使用import（）或require.ensures来确保捆绑包 您的应用程序的各个部分。欲了解更多信息，请访问 https://webpack.js.org/guides/code-splitting/
设置webpack.config模式后出现错误：“生产” （对您来说并不重要，因为这个问题在webpack上）：
visualjs2.js：1未捕获的TypeError：无法读取的属性'getWidth' 未定义 在新的e（visualjs2.js：1） 在e.singlton（visualjs2.js：1） 在新的e（visualjs2.js：1） 在对象。 （visualjs2.js：1） 在对象。 （visualjs2.js：1） 在n（visualjs2.js：1） 在visualjs2.js：1 在visualjs2.js：1
这是我的包裹（依赖项）：
"dependencies": {
"@types/matter-js": "^0.10.2",
"express": "^4.16.4",
"matter-attractors": "^0.1.6",
"matter-js": "^0.14.1",
"npm": "^5.8.0",
"tsconfig": "^7.0.0",
"tslint": "^5.9.1",
"websocket": "^1.0.28"
},
"devDependencies": {
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"source-map-loader": "^0.2.3",
"style-loader": "^0.21.0",
"ts-loader": "^4.4.2",
"typedoc": "^0.13.0",
"typedoc-webpack-plugin": "^1.1.4",
"typescript": "^2.9.2",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"
},