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
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值