webpack.config.js配置文件报错：The 'mode' option has not been set

 

WARNING in configuration

The 'mode' option has not been set, webpack will fallback to 'production' for th
is value. Set 'mode' option to 'development' or 'production' to enable defaults
for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https

://webpack.js.org/concepts/mode/

 

在cmd下运行webpack命令时，提示以上错误，大概意思是：

     没有设定是开发模式还是生产模式,要求指定。

 

解决：

1、在package.json文件里进行修改：增加如下：

    "dev": "webpack --mode development",

    "build": "webpack --mode production"

2、不能在cmd中，运行webpack命令，否则还会提示，应该运行命令：npm run build

 

20190806补充

 

3、也可以在写webpack.config.js中增加一个选项：mode。mode:"development",

如：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode:"development",
    //入口文件
    entry:{
        useperson:'./js/useperson.js'
    },
    
    //出口
    output:{
        path:__dirname+"/dist/",
        filename:"js/[name].bundle.js"
    },
    
    devServer:{
        host:"localhost",//主机名
        port:"8000",//端口号
        contentBase:__dirname+"/dist" //服务器对应的目录
    },
    
    //针对不同类型文件，使用不同的模块进行打包
    module:{
        rules:[
            {
                test:/\.css$/,
                loader:'style-loader!css-loader'
            },
            { 
              test: /\.(png|jpg)$/, 
              loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]',
            }
        ]
    },
    
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',//即需要打包和拷贝到build目录下的html文件
            filename:'index.html',//目标html文件
            chunks:['useperson'],//对应加载的资源,即html文件需要引入的js模块
            inject:true//资源加入到底部，把模块引入到html文件的底部
        })
        
    ]
}