webpack基础配置 webpack-dev-serve

webpack基础配置 webpack-dev-serve

1.复制第二节的webpack.config.js
1.1 npm i webpack-dev-server

	const path = require('path');
	
	module.exports = {
		devServer:{
			 port:8000,//启动服务监听端口
			  host:'0.0.0.0'，//可以通过localhost访问
			  contentBase:'./build'  //服务绝对路径
			  overlay:{//在页面上显示错误信息
			   	errors：true，
			   },
			   open:true，//启动webpack-dev-server时自动打开浏览器
			   hot:true //启用热更
		} ,
		mode:'development',//模式 默认两种 production和develoment
		enty:'./src/index.js'//可以为字符串可以是对象可以是数组
		//这里应用程序开始执行的地方，webpack 开始打包
		output:{
		//webpack 输出结果的位置
		//path需要引入node的path模块
		path:path.resolve(__dirname,'build')
		filename:'build.js'//打包出来的文件名，若需要每次打包处不同文件名，可加哈希值
		//filename:'build.[hash].js'
		},
		 plugins: [
			   //这里放让插件
			   new HtmlWebpackPlugin({
				      filename: 'index.html',
				      template: 'src/workbench.html',对应模板
				      chunks: ['index'],只匹配index.js 
				    }),
			  ],
	}
1.2 修改 package.json
 "scripts": {
			    "start": "webpack-dev-server ",
					...
			  },