webpack - 入口点的 webpack vue-loader 问题:“块中的错误”
问题描述
我正在尝试将 vue 添加到我现有的 webpack 应用程序(基于这个简单的演示)。我只想在特定入口点加载 vue 和 SFC 文件,但在构建期间出现此错误:
ERROR in chunk testview [entry]
style.css
Conflict: Multiple chunks emit assets to the same filename style.css (chunks app and testview)
我要加载的文件是./js/components/main-content.vue
有问题的入口点 ./js/views/TestView.js 文件的内容是:
import Vue from "vue";
import MainContent from "../components/main-content";
let MainComponent = Vue.extend(MainContent);
new MainComponent().$mount("#mainContent");
值得注意的是,如果我在 app.js 中包含上述内容,它可以正常工作。该错误没有出现,并且 vue(和 SFC)在浏览器中正确加载。
我的 webpack.config.js 的缩写版本是:
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = (env, argv) => {
return {
entry: {
app: ["./src/polyfills.js", "./src/scss/styles.scss", "./src/app.js"],
...
testview: "./src/js/views/TestView.js"
},
output: {
path: assets,
filename: "[name].[hash].js",
publicPath: "/static/"
},
resolve: {
modules: ["node_modules", "src"],
alias: {
vue$: "vue/dist/vue.esm.js"
},
extensions: ["*", ".js", ".vue"]
},
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
...
}
]
},
{
test: /\.s?[ac]ss$/,
use: [
{
loader: "vue-style-loader"
},
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader"
}
...
]
},
{
test: /\.vue$/,
loader: "vue-loader"
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2,
minSize: 0
}
}
},
occurrenceOrder: true
},
plugins: [
new HtmlWebpackPlugin({
hash: true,
inject: false,
template: "./src/jinja-templates/base.html.j2",
filename: `${templates}/base.html.j2`,
environment: environment,
development: ifNotProduction()
}),
new MiniCssExtractPlugin({
filename: devMode ? "style.css" : "style.[hash].css"
}),
...
new VueLoaderPlugin()
]
};
};
解决方案
推荐阅读
- angular - Angular 6静态变量不断重置为“未定义”
- javascript - AngularJS无法获取下拉菜单的选定索引
- mysql - 操作数应包含 1 列 if 子句
- oauth-2.0 - 如何在 Drupal 中集成 Oauth2 以进行用户登录?
- operator-keyword - Acumatica 在 BQL 中将 In <> 运算符用于整数
- javascript - 如何在 javascript/vuejs 中从孩子的 Id 中过滤父 json
- spring-boot - 在 WebFlux 中禁用 HTTP 缓存
- c# - Microsoft Graph:在 SharePoint 驱动器上搜索 DriveItems 不返回任何结果
- javascript - Angular 5 错误:无法绑定到“ngForFor”,因为它不是“li”的已知属性
- android - 将项目从 Android Studio 版本 2 转换为 3- 配置问题