webpack配置使用（自动打包）

为什么要使用webpack：

因为在书写代码时，我们会发现有些浏览器并不支持某些高级语法，此时我们则需要寻找适配的其他语句，比较麻烦。而这时我们就可以用webpack来使代码自动转化为适配绝大多数浏览器的语句。

方法：

1.下载并安装Node.js，详情请看npm命令（node.js下载及安装）​​​​​​。

2.打开项目所在文件夹，并在上方输入框输入cmd进入终端。如图所示：

 

3.在终端运行以下命令来安装webpack相关的两个包(不加版本号默认安装最新版本)：

npm install webpack@5.42.1 webpack-cli@4.10.0 -D

4.在项目中配置webpack：

1.在项目根目录中创建名为webpack.config.js的webpack配置文件，并初始化以下配置

module.exports = {
    //代表webpack运行的模式，可选值有两个，development（开发模式）和production（发行模式,还可以对代码进行压缩）
    mode: 'development'
}

2.在packa.json的scripts节点下，新增dev（自己可以随意命名）脚本，内容如下：

"scripts": {
    "dev": "webpack" // script 节点下的脚本，可以通过npm run执行，例如npm run dev。
  }

3.在终端中运行npm run dev命令，启动webpack进行项目的打包构建（如果不能运行，请检查自己Node.js的版本号，将版本号改为16）。

5.项目打包构建完成之后，根目录下会出现一个dist文件夹，文件夹下面会有一个main.js文件（详情可见webpack打包指定文件到指定位置），如图所示：

此时main.js文件里面就是webpack帮我们自动生成的无兼容性问题的js代码。此时将html里js的导入文件改为main.js，具有兼容性问题的代码就可以正常运行了，但此时我们每次修改js里的代码时，都需要重新运行npm run dev，否则效果无法实现，比较繁琐，所以我们需要让他在我们保存js代码时自动进行打包构建。

6.安装webpack-dev-server插件。

运行npm install webpack-dev-server@3.11.2 -D命令来下载webpack-dev-server插件。如图所示：

7.配置webpack-dev-server。

1.修改packa.json的scripts节点中的dev命令：

"scripts": {
    "dev": "webpack serve"
  }

 2.再次运行npm run dev命令，重新进行项目的打包，此时在js里书写代码时，按下Ctrl+S键会自动打包，如果想要停止自动打包，可以连续按两次Ctrl+C停止运行。如图所示：

 3.在浏览器中访问终端中第一条蓝色字体地址，查看打包效果。如图所示：

 可以看出此时的网页出现的正是我们所建项目里的各种文件，而我们的源文件代码正放在我们的src文件夹里，所以此时我们点击src文件夹就会出现我们所写的网页（接下来查看修改后的网页，都要在这个网址进行）。

但是此时修改js代码时，我们会发现网页并不会随之改变样式，此时我们再来观察终端，在第二行的位置它告诉我们，webpack生成的文件在根目录下面。

但此时我们观察根目录，发现它生成的文件并没有在根目录下，而是在dist下。但此时我们在http://localhost:8080里面查找，输入http://localhost:8080/main.js，我们会发现根目录下有这个文件，所以说虽然在根目录下我们看不到这个文件，但它确实是存在的。

 （原因：webpack-dev-server这个插件并没有把webpack生成的文件放到实际的物理磁盘上，而是放到了内存里面，也就是说它是虚拟的，虽然我们看不到，但是它确实存在）

所以此时最新的main.js文件应该是内存里的main.js，而不是dist文件夹里的，所以此时我们需要改变头部js的导入路径，将其改为内存里的main.js的路径。

<script src="/main.js"></script><!--加载引用内存里的的main.js-->

这时候我们再修改js里的代码，然后按下Ctrl+S就会发现网页会同步变化了。