webpack搭建本地服务及自动刷新浏览器

搭建本地服务

首先，在项目中安装webpack-dev-server
npm install webpack-dev-server -D
在package.json文件中添加如下：

{
	"scripts":{
		"dev":"webpack-dev-server --hot"
	}
}

（–hot指启动模块热替换，会自动添加webpack.HotModulePeplacementPlugin插件。）

在terminal中执行npm run dev
打印如下日志：

10% building 1/1 modules 0 activei ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from ./index.html
i ｢wdm｣: Hash: 58f6b116e14b9d029478
Version: webpack 4.42.0
Time: 6044ms
Built at: 2020-03-11 21:43:20

在浏览器中访问http://localhost:8080/就可以看到页面了，我们的服务器也就搭好了。但是，你会发现，当编辑index.html的时候，保存编译之后，浏览器并没有自动刷新。那么，只好接着配置咯=。=

保存编译后自动刷新浏览器

文件目录如下：

|----index.html
|----package.json
|----webpack.config.js
|----src
     |----index.js
     |----index.scss
|----dist

在webpack.config.js文件中配置如下：

const path = require('path');

const config = {
	mode: 'development', // 通过 mode 声明开发环境
	entry: "./src/index.js",
	output: {
		path: path.resolve(__dirname, './dist'),
		// 打包多出口文件
		filename: 'js/bundle.js'
	},
	devServer:{
		publicPath: "/",
    	contentBase: "./index.html",
    	host: "127.0.0.1",
		port: "8090",
    	overlay: true,  // 浏览器页面上显示错误
    	// open: true, // 开启浏览器
		// stats: "errors-only", //表示只打印错误
    	//服务器代理配置项
    	proxy: {
            '/testing/*': {
                target: 'https://www.baidu.com',
                secure: true,
                changeOrigin: true
            }
        }
	}
};

module.exports = config;

terminal中重新执行npm run dev，自动刷新就可以了。
至此，webpack搭建本地服务及自动刷新浏览器就完成了。撒花

题外话，关于devServer相关配置属性的理解：
contentBase:'./index.html'告诉服务器从哪个目录中提供内容。即将index.html作为本地服务器可访问的资源
publicPath:'/'此路径下的打包文件可在浏览器中访问。值总是以斜杠(/)开头和结尾

webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一样。