webpack学习笔记二：实现自动编译预览

介绍

实现启动一个开发服务，保存代码后能够编译并且浏览器自动刷新。

代码

安装依赖

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

webpack.config.js中配置开发环境

module.exports = {
    
    
	mode: "development",
	entry: "./src/main.js",
	output: {
    
    
		path: `${
      
      __dirname}/dist`,
		filename: "bundle.js",
	},
	devServer: {
    
    
		// 监听文件的位置
		contentBase: `${
      
      __dirname}/dist`,
		compress: true,
		port: 9000,
		//允许通过外部访问
		host: '0.0.0.0',
		// 模块热替换，实现只更新局部
		hot:true
	},
};

package.json中添加启动命令

"scripts": {
    
    
    "serve": "webpack-dev-server --open",
    "build": "webpack"
  },

启动实时预览

npm run serve

结构目录