最近在再做一个vue的项目，在开始之前先熟悉一下整个前端的执行流程，想来想去，决定从webpack开始，开始新建项目，但是发现用NPM 创建好了webpack 之后，运行和打包都出错，报“The 'mode' option has not been set, webpack will fallback to 'production' for this value.”，各种查询，发现问题，npm 在添加webpack包的时候，默认没有添加“webpack.config.js”这个配置文件，所以不管是运行还是打包都在报错，后来找到网上以为老兄分享的方法，记录起来和大家一起分享

解决办法：在根目录下新建 webpack.config.js

model.exports = {
    devtool:"eval-source-map",
    entry:__dirname+"/src/index.js", //入口文件
    output:{
        path:__dirname + "/dist", //打包后文件存放位置
        filename:"bundle.js" //打包后输出文件的文件名
    }
}

再次运行打包命令：

npm run build

发现继续报错，提示没有设置生产环境还是开发环境，所以报错，需要修改webpack.config.js 和package.json

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for thisvalue. 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/

1.webpack.config.js 设置：

module.exports = {
    devtool: 'eval-source-map',
    entry:  __dirname + "/src/index.js",  //入口文件
    output: {
        path: __dirname + "/dist",  //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    }
}

2.package.json 设置：

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": " ",
    "main": "index.js",
    "scripts": {
        "dev": "webpack --mode development", //开发模式
        "build": "webpack --mode production" //生产模式
    },
    "author": "lee",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0"
    }
}

运行开发模式或者打包：

npm run dev 或者 npm run build 

执行后的效果：