webpack4配置热更新

目录

 

step1：

step2：

step3:

---

step1：

1. 在文件夹中创建3个文件夹，分别是：src、dist、config
2. 然后在src下创建一个main.js
3. 在dist下创建一个index.html
4. 在config下创建一个webpack.dev.js
5. 使用命令行，进入当前文件夹，输入：npm init -y，系统会生成一个webpack.json文件，并且有相关的一些配置内容
6. 使用命令行，输入：git init . 创建一个git的.文件，该文件是隐藏不可见的。

step2：

1. 使用命令行，全局安装：webpack、webpack-cli、webpack-dev-server，方法是：

   cnpm install webpack webpack-cli webpack-dev-server

    

2. 配置config目录下的webpack.dev.js文件，定义入口文件为：main.js，开发环境为：开发环境（development），出口：dist文件夹，如下示例：webpack.dev.js

   const path = require("path")    // 这里引入node的path模块
   module.exports = {
       // 入口文件可以有多个，多个的时候用数组的形式写
       entry: {
           main: "./src/main.js"    // 这里定义main.js为入口文件
       },
   
       // 打包环境：开发/生产
       mode: "development",        // 打包环境为：生产环境
   
       // 出口，只能有一个
       output: {
           filename: "[name]-bundle.js",    // 打包后的文件名称，[name]是根据打包的文件名自动生产的，后面的-bunle是写死的
           path: path.resolve(__dirname, "../dist"),    // dist文件夹
           publicPath: '/'     // 公开路径        // 定义一个路径
       },
   
       // 配置本地服务器
       devServer: {
           contentBase: "dist"     // 指定一个本地服务器路径，否则会默认为根目录
       }
   }

    

step3:

上面的操作完成之后，开始执行webpack的命令进行打包了。

1. 在命令行输入：webpack-dev-server --config=config/webpack.dev.js进行打包

   webpack-dev-server --config=config/webpack.dev.js

   打包完成之后，在dist文件夹会多出一个main-bundle.js的文件，这个文件实际上就是我们在src上创建的main.js文件

2. 进入dist下的index.html，创建一个基本的HTML格式内容，并且引入打包过后生产的main.js（就是dist下的main-bundle.js）

3. 进入src下的main.js文件，输入一些内容，如console.log('hello world');保存之后，页面就会输出“hello world”，此时热更新就配置完成了。

4. 补充：上述操作是在mac环境下进行，在window环境下操作的话，发现打包之后，dist文件夹并没有实际生成一个新文件，但是可以按上述方法进行操作即可，同样是可以生效的。

5. 

6.  

该实例已经提交到GitHub仓库，有需要的朋友可以获取：https://github.com/leegoc/webpack4-hodUpdate.git