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.0port 指定一个要监听的端口号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/'

转载于:https://www.cnblogs.com/zjh-study/p/10855716.html