webpack学习_webpack-dev-server自动编译代码

之前每次修改完之后都要执行npm run build来编译,下面有三种方式可以实现代码变化后自动编译代码,下面只重点说webpack-dev-server,其他的请看webpack开发文档

1.webpack's Watch Mode  指示 webpack "watch" 依赖图中的所有文件以进行更改。如果其中一个文件被更新，代码将被重新编译，所以你不必手动运行整个构建(虽然不用执行npm run build就自动编译,可是需要自主率先你浏览器)

2.webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载(既能够改变代码后自动编译也能够让浏览器自动重新加载)

3.webpack-dev-middleware是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。(有一丢丢复杂,详情看webpack开发文档)

这里着重看到的是第二个方法webpack-dev-server

Step1:安装

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

Step2:webpack.config.js配置devServer,配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件

module.exports = {
   ...
       devServer: {
           contentBase: './dist'
       },
   ...
  };

Step3:在package.json配置添加script脚本

{
    "scripts": {
        ...
         "start": "webpack-dev-server --open",
        ...
    },
}

Step4:运行npm start 浏览器自动加载页面,修改和保存任意源文件,web服务器就会自动重新加载编译后的代码