nodejs教程-webpack实现热加载/热部署，不用webpack-dev-server，超简单

    近几天为了研究热部署搞的我一头雾水，就在今天早上发现了一个很简单的方式就可以实现热部署了，没错啦，就是下面这个命令

webpack --watch

其实在我眼里，热加载和热部署都是一样，所以我写2个是为了方便seo查找到

需要加入其他功能请戳  nodejs-webpack进阶教程-逐步加入vue、HtmlWebpackPlugin、css压缩、热部署

步骤

1、新建文件夹,名为 webpack-hot ,先进行初始化

npm init -y

2、在目录下新建 webpack.config.js 配置文件，内容：

module.exports = {
    entry: {
        //js源码入口
        test:'./src/js/test.js'
    },
    output: {
        // 输出目录
        publicPath: "./dist/",
        filename: "./js/[name].js"
    }
}

3、安装项目依赖

#全局webpack
npm i webpack -g

#安装webpack开发环境
npm i webpack -D

#webpack4需要额外安装
npm i webpack-cli -D

4、在根目录新建 index.html文件

    
    


 hello would!!!!

5、在根目录新建src目录，在src目录新建js目录，建好之后如图

6、在js目录新建名为 test.js的 文件，内容：

alert("我是弹窗")

7、打开终端，输入命令进行打包

webpack

打包后，项目中多出了一个文件夹，这就是压缩后js

8、我们在index.html 引入这个js

    
    


 hello would!!!!

 9、到这一步，所有的文件就已经新建好啦，打开终端，输入热部署的命令

webpack --watch

这时候会进入运行状态，

我们直接用浏览器打开index.html文件，字和弹窗都出来了，

 这时候我们修改下js文件，注意，一定要修改 src/js/test.js 这个文件哦，

alert("修改后的弹窗信息");

修改后，终端信息会有所改变，红框内的信息会变化

这时候我们刷新下浏览器 ，弹窗内的信息已经修改，

 到这一步，热部署就完成啦，别看步骤有点多，其实是很简单的，