javascript - Webpack 配置不接受配置模式选项
问题描述
**尝试将模式选项添加到 webpack 配置时出现错误我需要通过查看此答案 github.com/webpack-contrib/webpack-hot-middleware/issues/来配置 {mode:'developement'} 以启用 hmp **
WebpackOptionsValidationError:配置对象无效。Webpack 已使用与 API 模式不匹配的配置对象进行初始化。- 配置具有未知属性“模式”。这些属性是有效的:object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance? , plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? } 对于错别字:请更正。对于加载器选项:webpack 2 不再允许配置中的自定义属性。应该更新加载器以允许通过 module.rules 中的加载器选项传递选项。在加载器更新之前,可以使用 LoaderOptionsPlugin 将这些选项传递给加载器: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // 可能仅适用于某些模块 options: { mode: ... } }) ] 在 webpack (C:\Users\asdf\WebstormProjects\node_modules\webpack\lib\webpack.js:19:9) 在 Object. (在 Module._compile (internal/modules/cjs/loader.js:689:30) 在 Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) 在 Module.load(内部/modules/cjs/loader.js:599:32) 在 tryModuleLoad (internal/modules/cjs/loader.js:538:12) 在 Function.Module._load (internal/modules/cjs/loader.js:530:3 ) 在 Function.Module 中。
/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const commonConfig = require('./webpack.config.common');
module.exports = webpackMerge(
commonConfig,
{
devtool: 'cheap-module-eval-source-map',
entry: {
main: ['babel-polyfill', 'webpack-hot-middleware/client', './app/index.js'],
},
output: {
path: __dirname,
publicPath: '/',
filename: '[hash].bundle.js',
},
module: {
rules: [
{
test: /\.mspcss/,
use: [
'style-loader',
'css-loader?modules=true&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
'resolve-url-loader',
'sass-loader?sourceMap'
]
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader?sourceMap']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
BABEL_ENV: JSON.stringify('development'),
},
__DEV__: true,
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
title: 'some- Development',
template: path.resolve(__dirname, 'index.ejs'),
filename: path.resolve(__dirname, 'index.html'),
favicon: 'favicon.ico',
inject: 'body'
}),
]
}
)
/* eslint-enable */
解决方案
你用的是什么版本的 webpack?您可能使用的是版本 2 或 3,并且最新版本的 webpack-dev-server (3.2.1) 以 webpack 4 为目标。我遇到了同样的问题并通过安装 webpack-dev-server 版本 2.11.5 来修复它
npm uninstall webpack-dev-server
npm i -D webpack-dev-server@2.11.5
推荐阅读
- vb.net - 如何解决此组合框故障?
- java - 更改 JSONArray 中某些键的名称
- haskell - (新?)可折叠的模态运算符
- javascript - 如何在正确的上下文中将函数传递给单击处理程序?
- excel - 从多个项目 # 的非静态列表中返回特定项目 # 的总和
- javascript - 如果选中复选框,则更改类 bg
- php - 如何将数据从 MySQL 导出到 Excel(.xlsx) 但在导出前处理数据
- python - 蟒蛇,Windows。寻址父目录中的文件夹
- javascript - Array.filter 没有返回所需的输出
- angular - 角度项目中的笑话和茉莉花