然后,在遇到上述错误并安装 CLI 后,我开始遇到下面的错误。他说有个未知的属性"loaders",但是我像这样传递了"loaders"数组:CLI 移动到一个单独的包中:webpack-cli。请在使用 CLI 时同时安装 'webpack-cli' 和 webpack 本身。
-> 使用 npm 时:npm install webpack-cli -D
-> 使用 yarn 时:yarn add webpack-cli -D module.js:471 throw err; ^
-- package.jsonmodule: { loaders: [ [Object], [Object], [Object], [Object], [Object], [Object] ] } }
无效的配置对象。Webpack 使用不符合 API 模式的配置对象进行初始化。 - 配置.module 有一个未知的属性'loaders'。这些属性是有效的: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? } -> 影响普通模块(
NormalModuleFactory
)的选项。
"url-loader": "^1.0.1",
"webpack": "^4.1.0",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0"
Webpack 共享配置
module.exports = {
entry: './src/main.js',
resolve: {
extensions: ['*', '.js', '.jsx']
},
module: {
loaders: [{
test: /\.jsx$|\.js$/,
loaders: ['babel-loader'],
include: path.resolve(__dirname, '../src')
},
{
test: /\.css$/,
loader: 'style-loader!css',
}, {
test: /\.woff2?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
include: path.resolve(__dirname, '../assets')
},
{
test: /\.(eot|jpeg|jpg|png|svg|ttf|webp)$/,
loader: 'file-loader',
include: path.resolve(__dirname, '../assets')
},
{
test: /\.scss$/,
loader: 'style!css!sass?outputStyle=expanded',
},
{
test: /\.(png|jpg|svg)$/, loader: 'url-loader?limit=8192'
},
]
}
};
-- webpack开发配置
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('Script-Ext-Html-Webpack-Plugin');
const pkg = require('../package.json');
const shared = require('./shared.js');
const bundleName = `${pkg.name}-${pkg.version}.js`;
const indexHtmlPath = path.resolve(__dirname, '../static/index.html');
const port = process.env.PORT || 3000;
// console.log(path.resolve(__dirname, 'dist', `${bundleName}`));
console.log('shared::: ',shared)
module.exports = {
devtool: 'sourcemap',
entry: [
`webpack-dev-server/client?http://0.0.0.0:${port}`,
'webpack/hot/only-dev-server',
shared.entry
],
output: {
path: path.resolve(__dirname, '../'),
filename: `${bundleName}`
},
module: shared.module,
resolve: shared.resolve,
devServer: {
port: port,
inline: true,
contentBase: path.resolve(__dirname, '../static'),
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: indexHtmlPath
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'async'
}),
new webpack.HotModuleReplacementPlugin()
]
};
console.log(module.exports.output);