webpack-dev-server
-
安装依赖包
yarn add webpack-dev-server -D
-
常用配置
devServer: {contentBase: path.join(__dirname, 'static'), // 告诉服务器从哪里提供内容 (默认当前工作目录) openPage: 'views/index.html', // 指定默认启动浏览器时打开的页面 index: 'views/index.html', // 指定首页位置 watchContentBase: true, // contentBase 下文件变动将 reload 页面 (默认 false) host: 'localhost', // 默认 localhost, 想外部可访问用 '0.0.0.0' port: 8080, // 默认 8080 inline: true, // 可以监控 js 变化 hot: true, // 热启动 open: true, // 启动时自动打开浏览器(指定打开 chrome,open: 'Google Chrome')compress: true, // 一切服务都启用 gzip 压缩 disableHostCheck: true, // true:不进行 host 检查 quiet: false, https: false, clientLogLevel: 'none', stats: { // 设置控制台的提示信息 chunks: false, children: false, modules: false, entrypoints: false, // 是否输出入口信息 warnings: false, performance: false, // 是否输出 webpack 建议(如文件体积大小)}, historyApiFallback: {disableDotRule: true,}, watchOptions: {ignored: /node_modules/, // 略过 node_modules 目录}, proxy: { // 接口代理(这段配置更推荐:写到 package.json,再引入到这里)"/api-dev": { "target": "http://api.test.xxx.com", "secure": false, "changeOrigin": true, "pathRewrite": { // 将 url 上的某段重写(例如此处是将 api-dev 替换成了空)"^/api-dev": "" } } }, before(app) {},}
根据目录结构的不同,contentBase、openPage 参数要配置合适的值,否则运行时应该不会立刻访问到你的首页; 同时要注意你的 publicPath,静态资源打包后生成的路径是一个需要思考的点,这与你的目录结构有关。
-
package.json 添加运行命令
"scripts": {"dev": "cross-env BUILD_ENV=development webpack-dev-server --mode development --colors --profile"}
不同操作系统传递参数的形式不一样,cross-env 可以抹平这个平台差异。