webpack.config.vendor.js和webpack.config.js中确实令人沮丧的语法错误:
C:\project>node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration[0].module.rules[2].use should be one of these:
non-empty string | function | object { ident?,loader?,options?,query? } | function | [non-empty string | function | object { ident?,query? }]
-> Modifiers applied to the module when rule is matched
Details:
* configuration[0].module.rules[1].use.loader should be a string.
* configuration[0].module.rules[1].use.loader should be one of these:
non-empty string
-> Loader name
* configuration[0].module.rules[2].use.loader should be a string.
* configuration[0].module.rules[2].use.loader should be one of these:
non-empty string
-> Loader name
我遍历了网上示例的语法,我看不到规则的配置如何不遵循API架构,任何人都可以看到??
webpack.config.js
...
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
...
module.exports = (env) => {
...
module: {
rules: [
{
test: /\.css(\?|$)/,use: {
loader: [ MiniCssExtractPlugin.loader,isDevBuild ? 'css-loader' : 'css-loader?minimize'],options: {
publicPath: './'
}
},include: [path.resolve(__dirname,'./ClientApp/content')]
},{
test: /\.scss(\?|$)/,use: {
loader: [isDevBuild ? 'css-loader' : 'css-loader?minimize',MiniCssExtractPlugin.loader,'sass-loader'],options: {
publicPath: './'
}
},'./ClientApp/content')]
},{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf|otf)$/,use: {
loader: 'url-loader?limit=25000'
}
}
]
},...
const clientBundleOutputDir = './wwwroot/dist';
const clientBundleConfig = merge(sharedConfig,{
entry: {
...
},output: {
....
},plugins: [
new MiniCssExtractPlugin(
{
filename: "[name].css",chunkFilename: "[id].css"
}
),
webpack.config.vendor.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const treeShakableModules = [
...
];
const nonTreeShakableModules = [
...
];
const allModules = treeShakableModules.concat(nonTreeShakableModules);
module.exports = (env) => {
const isDevBuild = !(env && env.prod);
const sharedConfig = {
....
module: {
rules: [
{
test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/,use: {
loader: 'url-loader?limit=100000'
}
}
]
},output: {
publicPath: 'dist/',filename: '[name].js',library: '[name]_[hash]'
},plugins: [
new webpack.ProvidePlugin({ $: 'jquery',jQuery: 'jquery','Popper': 'popper.js/dist/umd/popper' }),new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/,path.join(__dirname,'./ClientApp')),new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/,new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/,new webpack.IgnorePlugin(/^vertx$/)
]
};
const clientBundleConfig = merge(sharedConfig,{
entry: {
vendor: isDevBuild ? allModules : nonTreeShakableModules
},output: { path: path.join(__dirname,'wwwroot','dist') },module: {
rules: [
{
test: /\.css(\?|$)/,use: {
loader: [MiniCssExtractPlugin.loader,isDevBuild ? 'css-loader' : 'css-loader?minimize']
}
},'sass-loader']
}
}
]
},plugins: [
new MiniCssExtractPlugin ({
filename: "[name].css",chunkFilename: "[id].css"
}),
此升级始于使用旧的“ extract-text-webpack-plugin”的ASP.NET Core 2.1 Angular v5.1 webpack v1.9,现在已升级为mini-css-extract-plugin。该语法看似合适。加载程序被提供给API模式的方式有点麻烦,但我很茫然。