webpack -- 配置开发环境

概述一、开发环境 配置开发环境，需要安装webpack-dev-server模块 npm install webpack-dev-server --save-dev 二、配置开发环境 在package.json文件的npm scripts对象里面，添加开发环境运行 scripts: { "dev": "webpack-dev-server --open"} 三、配置devServer 在we 一、开发环境

配置开发环境，需要安装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',pathRewrite: {            "^/API": 'url',// 在生产环境，是不需要传/API的，所以需要重新路径        },secure: false,// 默认不接受https且无效证书，如果需要则改成false    }}

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

publicPath: '/assets/'

总结

以上是内存溢出为你收集整理的webpack -- 配置开发环境全部内容，希望文章能够帮你解决webpack -- 配置开发环境所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。