webpack 安装和使用webpack ./src/main.js ./dist/bundle.js错误解决方案

注意：一定要注意文件路径！

（1）全局安装后，应该都是最新版的，搜索之后说是新版本的指令有所不同

npm install webpack -g
npm install webpack-cil -g

（2）然后输入上面这句进行打包

webpack ./src/main.js -o ./dist/bundle.js

（3）webpack.config.js（下面是我配置文件）

const path = require('path')

module.exports = {
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
  output: { // 输出文件相关的配置
    path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
    filename: 'bundle.js' // 这是指定 输出的文件的名称
  }
}

（4）蜜汁生成文件：

（5）虽然生成文件很迷，但是总算打包ok了，开始使用：

（6）可以使用，ok，现在修改main.js的一些东西，重新打包：使用webpack就可以：

（7）它说路径不对（这不是它自动生成的嘛），fine，修改配置文件：webpack.config.js

const path = require('path')

module.exports = {
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
  output: { // 输出文件相关的配置
    path: path.join(__dirname, './dist/bundle.js'), // 指定 打包好的文件，输出到哪个目录中去
    filename: 'bundle.js' // 这是指定 输出的文件的名称
  }
}

（8）再重新使用webpack打包：

（9）有警告，在配置文件再加上mode参数，再修改配置文件webpack.config.js:

const path = require('path')

module.exports = {
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
  output: { // 输出文件相关的配置
    path: path.join(__dirname, './dist/bundle.js'), // 指定 打包好的文件，输出到哪个目录中去
    filename: 'bundle.js' // 这是指定 输出的文件的名称
  },

  // 通过选择 development 或 production 之中的一个，来设置 mode 参数，可以启用相应模式下的 webpack 内置的优化
  mode:'development'
}

（10）再次尝试：