使用webpack构建前端开发环境,可以直接使用webpack构建本地服务,实现页面保存自动刷新
1.利用webpack搭建本地服务器,在前面的代码基础上继续学习
首先安装模块webpack-dev-server
npm install --save-dev webpack-dev-server
2.修改配置文件webpack.json
"scripts": {
"server": "webpack-dev-server --open --mode development"
},
3.修改配置文件webpack.config.js,设置文件内修改保存即及时刷新
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true, //实时刷新
host: "192.168.1.6", //本机的局域网ip
open: true //是否运行成功后直接打开页面
}
}
此处不加 – mode development会出现黄色报错
此时在终端命令行执行npm run server即可执行功能,生成bundle.js