webpack -- 配置开发环境

一、开发环境

配置开发环境，需要安装webpack-dev-server模块

npm install webpack-dev-server --save-dev

二、配置开发环境

在package.json文件的npm scripts对象里面，添加开发环境运行

scripts: {
    "dev": "webpack-dev-server --open"
}

三、配置devServer

在webpack.config.js文件里面配置相关参数，注意devServer跟entry，output等同级

devServer: {
    contentBase: './dist', // 告诉服务器从哪个目录中提供内容
    port: 8888, // 配置端口号
    host: "0.0.0.0", // 配置host，推荐写成0.0.0.0
    proxyTable: {
        "/api": {
            target: '',
            changeOrigin: true,
            pathRewrite: {
                "^/api": ''
            }
        }
    }
}

四、配置热重载模式

在devServer里面配置热重载模式，这个模式通常设置在开发环境，生成环境，应该去掉
配置热重载模式，不不要刷新整个页面，只会刷新改变的数据
配置热重载，必须配置HotModuleReplacementPlugin和NoEmitOnErrorsPlugin
如果实在dev里面配置了webpack-dev-server --open --hot，上面的那个Hot插件会自动添加，不需要配置

devServer: {
    hot: true,
    overlay: {
        errors: true, // 编译出错是显示在网页上
    }
},
plugins: [
    new webpack.HotModuleReplacementPlugin(), // 启动热重载功能
    new webpack.NoEmitOnErrorsPlugin(), // 去掉一些不必要的信息
]

或者

scripts: {
    "dev": "webpack-dev-server --open --hot"
}

真的是蛋疼，不知道为什么我这个配置，修改了index.html里面的内容，页面并不会更改数据
恩，确定了，这个只有入口文件修改了，才会触发，也就是修改了entry入口文件的内容，或者依赖文件内容，才会触发热重载

五、开发环境配置属性

devServer配置表
host
指定配置一个host，默认是localhost，建议0.0.0.0
port
指定一个要监听的端口号
open
运行本地命令后，打开浏览器，默认是false，也可以是浏览器名称的字符串
overlay
出现编译器错误或警告时，在浏览器中显示全屏覆盖层，默认false

overlay: {
    warning: true, // 警告
    errors: true, // 错误
}

proxy
代理服务器

proxy: {
    "/api": {
        target: 'url',
        changeOrigin: true,
        pathRewrite: {
            "^/api": 'url', // 在生产环境，是不需要传/api的，所以需要重新路径
        },
        secure: false, // 默认不接受https且无效证书，如果需要则改成false
    }
}

publicPath
这个默认配置是'/'，修改 devServer.publicPath，将 bundle 放在指定目录下

publicPath: '/assets/'