前言

每次要编译代码时，手动运行 npm run build 就会变得很麻烦

webpack 中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：

webpack's Watch Mode
webpack-dev-server
webpack-dev-middleware（不写

起步

项目初始化及安装完webpack后，只新建了以下三个文件

main.js

function Component(){
    var div=document.createElement('div')
    div.innerHTML="自动编译"
    return div
}
document.body.appendChild(Component())

webpack.config.js

const HtmlWebpackPlugin=require('html-webpack-plugin') //需要npm安装
module.exports = {
    entry: './src/main.js',
    plugins:[
        new HtmlWebpackPlugin({
            title:'output management'
        })
    ],
    output:{
        filename:'bundle.js',
    },
 };

1. 使用观察模式

在观察模式下，如果其中一个文件被更新，代码将被重新编译。

在package.json添加脚本以方便启动观察模式

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "watch":"webpack --watch" //添加
},

启动观察模式

npm run watch

这时候会看到 webpack 在编译代码

现在只要修改并保存了文件，就会看到webpack 在自动重新编译修改后的模块

如果想关闭观察模式，重新打开项目即可

**缺点：**需要刷新浏览器才能看到重新编译后的效果

2. 使用webpack-dev-server（推荐）

webpack-dev-server 为提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

即重新编译后还会自动帮助我们刷新浏览器

安装

npm install --save-dev webpack-dev-server

配置

//...
module.exports = {
    //...
    
    //告知 webpack-dev-server，在 localhost:8080 下建立服务
    //并将 dist 目录下的文件，作为可访问文件。
    devServer:{
        contentBase:'./dist' 
    }
 };

添加脚本

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack",
  "watch":"webpack --watch", 
  "start":"webpack-dev-server --open" //添加
},

执行命令

npm run start

这个时候会发现它帮我们自动打开浏览器。现在如果修改和保存任意文件，web 服务器就会自动重新加载编译后的代码并呈现新的页面。

如果误关了浏览器，可以随时在终端窗口找到本地链接进行访问

不过在开启Web服务器之前，需要在html-webpack-plugin插件的基础上npm run build自动生成一个index.html，否则启动服务器会看不要预期的页面。这是因为配置上写的是从dist里访问文件,如果dist里面没有该文件自然访问不到了。当然如果本身dist里面就有html，就不需要再build了。

webpack笔记6-应用篇-自动编译

前言

起步

1. 使用观察模式

2. 使用webpack-dev-server（推荐）