我有一个 vuejs webapp，我正在从 webpack3 迁移到 webpack4。我正在尝试更新配置以使用新的优化工具，但是当我运行它时，我的应用程序没有加载。main.js 文件存在，但它似乎没有做任何事情，并且开发工具控制台没有显示任何内容。
如果我不使用chunks: 'all'，那么我的应用程序可以工作，但是我的 js 文件很大。谁能帮我修复我的配置文件？提前致谢！
另请注意，我使用的是 aspnetcore。
我在下面显示：
- webpackconfig.js
- 包.json
- 进入js文件
- html索引文件
- webpack 输出
这是我的 webpack 配置：
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {
const isDev = !(env && env.prod);
return [{
mode: isDev ? 'development' : 'production',
entry: {
'main': './ClientApp/boot-app.js'
},
output: {
path: path.join(__dirname, bundleOutputDir),
publicPath: '/dist/',
filename: '[name].js',
chunkFilename: '[name].[contenthash:8].js'
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue$': 'vue/dist/vue.common',
'components': path.resolve(__dirname, './ClientApp/components'),
'tools': path.resolve(__dirname, './ClientApp/tools'),
'base': path.resolve(__dirname, './ClientApp/'),
'img': path.resolve(__dirname, './wwwroot/img')
}
},
module: {
rules: [
{ test: /\.vue$/, include: /ClientApp/, use: 'vue-loader' },
{ test: /\.js$/, include: /ClientApp/, use: 'babel-loader' },
{
test: /\.(css|scss|sass)/,
use: [
isDev ? 'vue-style-loader' : MiniCSSExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{ test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/, use: 'url-loader?limit=100000' }
]
},
optimization: {
runtimeChunk: false,
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: function (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`;
}
}
}
}
},
plugins: [
new webpack.HashedModuleIdsPlugin(), // so that file hashes don't change unexpectedly
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].[hash].css'
}),
new webpack.HotModuleReplacementPlugin()
]
}];
};
这是我的 package.json
{
"name": "my app",
"description": "my app",
"version": "0.0.1",
"author": "lverre",
"private": true,
"devDependencies": {
"aspnet-webpack": "^3.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.2",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"core-js": "^2.5.1",
"cross-env": "^5.0.5",
"css-element-queries": "^0.4.0",
"css-loader": "^3.4.2",
"file-loader": "^5.0.2",
"hashed-module-id-plugin": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"sass-loader": "^7.3.1",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^3.0.0",
"vue": "^2.6.11",
"vue-loader": "^15.9.0",
"vue-style-loader": "^4.1.2",
"vue-router": "^3.1.5",
"vue-template-compiler": "^2.6.11",
"vuex": "^3.0.1",
"vuex-router-sync": "^5.0.0",
"webpack": "^4.41.5",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.10",
"webpack-dev-middleware": "^3.7.2",
"webpack-hot-middleware": "^2.25.0"
},
"dependencies": {}
}
这是我的 boot-app.js 文件，它是 webpack 条目：
import 'core-js/es6/promise'
import 'core-js/es6/array'
import Vue from 'vue'
import { sync } from 'vuex-router-sync'
import router from './router'
import store from 'tools/store'
import App from 'components/app-root'
sync(store, router);
const app = new Vue({
store,
router,
...App
});
app.$mount('#app');
这是我的 Index.html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
<link rel="icon" type="image/ico" href="~/favicon.ico" />
</head>
<body>
<div id="app"><span style="line-height:100vh;width:100vw;text-align:center;display:inline-block;background:#EEE;"><img src="~/img/wheel.gif" style="margin:0px 4px 4px 4px;" />Loading Web App...</span></div>
<script src="~/dist/main.js" asp-append-version="true"></script>
</body>
</html>
最后，这是 webpack 的输出：
1>v12.14.1
1>Performing first-run Webpack build...
1>Hash: 8f64c9e617681a7d9069
1>Version: webpack 4.41.5
1>Child
1> Hash: 8f64c9e617681a7d9069
1> Time: 17962ms
1> Built at: 02/20/2020 5:14:45 PM
1> Asset Size Chunks Chunk Names
1> 0.b492eb23.js 13.5 KiB 0 [emitted] [immutable]
1> 1.b4f894be.js 9.14 KiB 1 [emitted] [immutable]
1> 2.9dab94c2.js 36.7 KiB 2 [emitted] [immutable]
1> 3.f31dcc88.js 33.7 KiB 3 [emitted] [immutable]
1> 4.dde409ef.js 10.3 KiB 4 [emitted] [immutable]
1> 5.39b4a0b9.js 6.82 KiB 5 [emitted] [immutable]
1> 6.559365e1.js 5.71 KiB 6 [emitted] [immutable]
1> main.js 880 KiB main [emitted] main
1> npm.babel-runtime.e944a466.js 13.9 KiB npm.babel-runtime [emitted] [immutable] npm.babel-runtime
1> npm.core-js.ceba3f6f.js 215 KiB npm.core-js [emitted] [immutable] npm.core-js
1> npm.css-loader.48e5a965.js 3.02 KiB npm.css-loader [emitted] [immutable] npm.css-loader
1> npm.inline-worker.8dfd1980.js 2.76 KiB npm.inline-worker [emitted] [immutable] npm.inline-worker
1> npm.process.e2f745dc.js 5.85 KiB npm.process [emitted] [immutable] npm.process
1> npm.regenerator-runtime.4488ff8a.js 26.4 KiB npm.regenerator-runtime [emitted] [immutable] npm.regenerator-runtime
1> npm.setimmediate.bb06f868.js 7.21 KiB npm.setimmediate [emitted] [immutable] npm.setimmediate
1> npm.timers-browserify.57593fb7.js 2.67 KiB npm.timers-browserify [emitted] [immutable] npm.timers-browserify
1> npm.vue-hot-reload-api.2af5ecec.js 7.84 KiB npm.vue-hot-reload-api [emitted] [immutable] npm.vue-hot-reload-api
1> npm.vue-loader.bd373c54.js 3.41 KiB npm.vue-loader [emitted] [immutable] npm.vue-loader
1> npm.vue-router.b7224a0b.js 76.2 KiB npm.vue-router [emitted] [immutable] npm.vue-router
1> npm.vue-style-loader.0121d20d.js 8.38 KiB npm.vue-style-loader [emitted] [immutable] npm.vue-style-loader
1> npm.vue.3fb7d7f1.js 327 KiB npm.vue [emitted] [immutable] npm.vue
1> npm.vuex-router-sync.7e7d78fc.js 2.18 KiB npm.vuex-router-sync [emitted] [immutable] npm.vuex-router-sync
1> npm.vuex.97f31906.js 30.7 KiB npm.vuex [emitted] [immutable] npm.vuex
1> npm.webpack.d644d8a7.js 1.68 KiB npm.webpack [emitted] [immutable] npm.webpack
1> opt.fb154780.js 760 KiB opt [emitted] [immutable] opt
1> opt~staff.f7ca55c0.js 77.1 KiB opt~staff [emitted] [immutable] opt~staff
1> staff.3a9db472.js 3.21 MiB staff [emitted] [immutable] staff
1> Entrypoint main = npm.core-js.ceba3f6f.js npm.babel-runtime.e944a466.js npm.vue-style-loader.0121d20d.js npm.vue.3fb7d7f1.js npm.webpack.d644d8a7.js npm.css-loader.48e5a965.js npm.process.e2f745dc.js npm.setimmediate.bb06f868.js npm.timers-browserify.57593fb7.js npm.vue-hot-reload-api.2af5ecec.js npm.vue-loader.bd373c54.js npm.vue-router.b7224a0b.js npm.vuex-router-sync.7e7d78fc.js npm.vuex.97f31906.js main.js