webpack搭建本地开发服务

1.安装 uglifyjs-webpack-plugin混淆插件
他会将js文件进行压缩
执行命令: npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

配置webpack.config文件,注意顺序
const uglifyjsWebpackPlugin=require(“uglifyjs-webpack-plugin”);
plugins:[
new uglifyjsWebpackPlugin(),
],

2.安装html-webpack-plugin html插件
他会将当前webpack打包的js自动装配进入指定的html文件当中
执行命令: npm install html-webpack-plugin@3.2.0 --save-dev

配置webpack.config文件
const htmlWebpackPlugin=require(“html-webpack-plugin”);
在plugins中配置 new htmlWebpackPlugin({ template:‘index.html’})
plugins:[
new htmlWebpackPlugin({
template:‘index.html’
})
],

3 安装开发时服务
执行命令:npm install --save-dev webpack-dev-server@2.9.1
配置webpack.config文件
// 加载本地服务器
devServer: {
contentBase: ‘./dist’,
// 实时监听页面
inline: true
}

简化启动命令为 npm run dev