webpack4.0打包失败的探索

①：运行命令npx webpack index.js 打包index.js文件失败，如下图提示

度娘说是因为没有设置webpack为生产或开发模式，于是我在package.json文件中添加如下代码

"scripts": {
    "dev":"webpack –-mode development",
    "build": "webpack –-mode production"
  },

若按上代码设置后，仍然报同样的错，可试着手动输入命令设置模式

webpack --mode=production（生产模式） 或 webpack --mode=development（开发模式）

注：设置模式为生产模式，被打包后的文件会自动被压缩；设置模式为开发模式，则不会被压缩

②：上面报错解决后，又出现新的报错，如下图

后经一番查询发现，原来是没有webpack.config.js文件所致，webpack4以前都是自动生成，现在需要手动配置了（坑爹啊）

下面为官方webpack.config.js基础配置示例代码

var path = require('path'); //引入node一个名为path的核心模块

module.exports ={
    mode: 'development', //设置模式为开发模式
    entry: './src/index.js', //入口文件，即被打包的文件，加载项目时会首先加载该文件    
output: {
        path: path.resolve(__dirname, 'dist'), 
        //path后面必须是绝对路径，调用模块resolve方法生成dist文件夹，用来存放打包后的文件；
        //__dirname代指webpack.config.js当前所在项目路径
        filename: 'bundle.js' //输出文件，即打包后生成的文件，该文件名可自定义
}
};

③：正常情况下应该是可以了，若出现下面报错

说明webpack.config.js中的entry入口文件路径有问题（比如上面代码中，entry: './src/index.js'，路径错误）

补充：若运行npm install报错，提示缺少README文件和仓库字段，可参考下面链接解决

https://blog.csdn.net/harryptter/article/details/76261581

从webpack4.x开始，webpack-cli 和 webpack是单独安装的，以前是安装了webpack-cli会顺带安装webpack

　　　　npm install webpack --save-dev本地安装（webpack-cli同理）

npm install webpack -g全局安装（webpack-cli同理）

npm install webpack -g --save-dev 全局和本地都安装（webpack-cli同理）

npm install webpack webpack-cli --save-dev 本地同时安装webpack和webpack-cli（全局安装同理）

npm uninstall webpack webpack-cli --save-dev 本地同时卸载webpack和webpack-cli（单独卸载webpack或webpack-cli同理）

注：上面命令中的 --save-dev也可用 -D替代，它俩是等价的

如果报下图错，是因为你在package.json文件里加入了注释信息，json文件里不能有注释