webpack-dev-server的基本配置和使用

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/ ，就可以打开页面。