1.安装webpack-dev-server
npm i webpack-dev-server
2.配置dev-server
在package.json 文件中添加：
"dev": "webpack-dev-server --config webpack.config.js"
image.png
在webpack.config.js文件中全局添加：
target: 'web',
表示编译目标是web平台
image.png
3.判断环境，设置环境变量标识正式环境和开发环境
在终端输入：npm i cross-env
原因：mac和windows 获取环境变量的方法不一样，为了统一，用cross-env
在package.json中配置环境变量
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
image.png
环境判断，在webpack.config.js中添加
const isDev = process.env.NODE_ENV === 'development'
if (isDev) {
config.devServer = {
port: 8000,
host: '0.0.0.0',
overlay: {
errors:true // 错误可以显示到网页上面
}
}
}
module.exports = config
image.png
4.写入html
npm i html-webpack-plugin
在webpack.config.js中写：
const HTMLPlugin = require('html-webpack-plugin')
new HTMLPlugin(),
image.png
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
},
}),
给webpack编译和js中判断环境，区别打包版本。
5.运行
npm run dev
image.png
运行成功：
image.png
在浏览器输入 http://localhost:8000/ ，就可以打开页面。
