vue - webpack.dev.conf.js
描述:开发时的配置.(配置开发时的一些操作)
例如这里,是否自动打开浏览器(默认true)
1 'use strict' 2 3 // build/util.js 4 const utils = require('./utils') 5 // node_modules里面的webpack 6 const webpack = require('webpack') 7 // config/index.js 8 const config = require('../config') 9 // 对象合并 10 const merge = require('webpack-merge') 11 // 路径 12 const path = require('path') 13 14 15 // 引入webpack.base.conf.js配置 16 const baseWebpackConfig = require('./webpack.base.conf') 17 const CopyWebpackPlugin = require('copy-webpack-plugin') 18 const HtmlWebpackPlugin = require('html-webpack-plugin') 19 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 20 const portfinder = require('portfinder') 21 22 // 配置 23 const HOST = process.env.HOST 24 const PORT = process.env.PORT && Number(process.env.PORT) 25 26 const devWebpackConfig = merge(baseWebpackConfig, { 27 module: { 28 rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 29 }, 30 // cheap-module-eval-source-map开发速度更快(只检测修改了的文件进行更新,而不是全部) 31 devtool: config.dev.devtool, 32 33 /** 34 * 这里配置开发服务器 35 */ 36 devServer: { 37 clientLogLevel: 'warning', 38 historyApiFallback: { 39 rewrites: [ 40 { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 41 ], 42 }, 43 // 是否开启HMR 44 hot: true, 45 // 内容 46 contentBase: false, // 因为我们使用CopyWebpackPlugin 47 // 是否压缩 48 compress: true, 49 50 host: HOST || config.dev.host, 51 port: PORT || config.dev.port, 52 53 // config => config/index.js 54 open: config.dev.autoOpenBrowser, 55 56 overlay: config.dev.errorOverlay 57 ? { warnings: false, errors: true } 58 : false, 59 publicPath: config.dev.assetsPublicPath, 60 proxy: config.dev.proxyTable, 61 // 如果不开启,则不提示友好的错误信息! 62 quiet: true, // FriendlyErrorsPlugin所必需的 63 watchOptions: { 64 poll: config.dev.poll, 65 } 66 }, 67 68 /** 69 * 配置插件 70 */ 71 plugins: [ 72 new webpack.DefinePlugin({ 73 'process.env': require('../config/dev.env') 74 }), 75 new webpack.HotModuleReplacementPlugin(), 76 new webpack.NamedModulesPlugin(), // HMR在更新时在控制台中显示正确的文件名。 77 new webpack.NoEmitOnErrorsPlugin(), 78 // https://github.com/ampedandwired/html-webpack-plugin 79 new HtmlWebpackPlugin({ 80 filename: 'index.html', 81 template: 'index.html', 82 inject: true 83 }), 84 // 复制到自定义静态源 85 new CopyWebpackPlugin([ 86 { 87 // 来自(可以是对象,可以是String) 88 from: path.resolve(__dirname, '../static'), 89 // 走向(可以是对象,可以是String) 90 to: config.dev.assetsSubDirectory, 91 // 忽略此类文件 92 ignore: ['.*'] 93 } 94 ]) 95 ] 96 }) 97 98 /** 99 * 模块导出(Promise) 100 */ 101 module.exports = new Promise((resolve, reject) => { 102 portfinder.basePort = process.env.PORT || config.dev.port 103 portfinder.getPort((err, port) => { 104 105 if (err) { 106 reject(err) 107 } else { 108 // 发布新的端口,这是e2e测试所必需的 109 process.env.PORT = port 110 // 添加开发服务器到端口地址 111 devWebpackConfig.devServer.port = port 112 113 // 添加 FriendlyErrorsPlugin 114 devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 115 compilationSuccessInfo: { 116 messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 117 }, 118 onErrors: config.dev.notifyOnErrors 119 ? utils.createNotifierCallback() 120 : undefined 121 })) 122 123 resolve(devWebpackConfig) 124 } 125 }) 126 })
转载于:https://www.cnblogs.com/cisum/p/9612495.html
vue - webpack.dev.conf.js相关推荐
- Vue运行报错webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
vue 项目 npm run dev 运行时报错: npm ERR! xxx@1.0.0 dev: `webpack-dev-server --inline --progress --config b ...
- vue:hadoop@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
运行vue项目是报错: hadoop@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.con ...
- vue项目运行不成功--@1.0.0 dev: **`webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
项目场景: vue 新项目运行–安装依赖包–运行项目 问题描述: 安装依赖包不成功-运行不起来 //mobileap----mobileap是项目名称,package.josn里name(文件夹名称) ...
- 出现`webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`报错
vue 项目 npm run dev 运行时报错: npm ERR! xxx@1.0.0 dev: `webpack-dev-server --inline --progress --config b ...
- webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
vue项目 npm run dev 运行时报错:webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 原因 ...
- Webstorm中提示Cannot find module 'webpack.dev.conf.js'
问题描述: 在Webstorm中运行cordova项目时,提示: Cannot find module 'webpack.dev.conf.js' 先不要着急删掉node_modules,然后重新np ...
- webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 解决办法
最近要做一个可以拖拽的关系图,从github上clone别人的项目后运行时报错webpack-dev-server --inline --progress --config build/webpack ...
- 报错:dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
该问题出现在我从git上刚刚拉下来的项目 在npm install 之后,npm run dev/npm run serve都报错??? 然后我根据 报错信息查看我的 package.json文件 我 ...
- npm报错`webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
今天刚来公司启动项目就给我报下面的错误 百度一下,通常报这个错的原因是:webpack-dev-server 版本存在问题 解决办法:安装 webpack-dev-server 低版本号 方法一:删除 ...
最新文章
- (深入理解)matplotlib的交互模式(block,interactive,ion,ioff,draw,show,plot等的区别)
- if语句的一种使用失误
- Renascence架构原理——遗传规划算法
- 网页效果图设计之色彩索引
- 【转】解决yum安装软件报Couldn't resolve host 'mirrorlist.centos.org问题
- 辽宁学业水平测试 计算机考试,辽宁高中学业水平考试报名系统
- Top-down与Bottom-up
- 关于sqoop增量导入oracle的数据到HDFS的出现的错误总结
- 【UML】构件图Component diagram(实现图)(转)
- 拷贝归档到achivelog目录下_Linux下查看压缩文件内容的 10 种方法
- 如何创建ChromeApp
- 一款短小精悍的日志分析工具web_log_analyse
- 关于读研和生信学科的思考
- 自由手写体字帖pdf_行楷钢笔字帖下载-行楷字帖电子版pdf版 - 极光下载站
- 如何运用eclipse的编写Java程序
- Jvm面试题总结及答案 300道(2022年最新版 )
- 360插件化方案RePlugin学习笔记-外置插件
- 【论文解读】文本分类上分利器:Bert微调trick大全
- 微信小程序:Framework inner error FLOW_CREATE_NODE
- < pre >标签 定义预格式化的文本
热门文章
- linux谁使用内存,linux内存不知被谁用了
- 骚年快醒醒,你适合转行做前端吗?
- 单例模式、使用getInstance()方法的原因及作用
- oracle 定时器时间分区_Oracle数据库之oracle按时间分区以及自动分区
- oracle 审计用户登录信息,Oracle预警用户登录锁定、过期及其审计信息
- matlab案例 光学,MATLAB仿真及其在光学课程中的应用.pdf
- 实现元素拖拽放大缩小_Vue实战067:DOM元素拖拽效果的实现
- 机器学习理论基础 集成学习前期基础--分类决策树与回归决策树
- Pytorch class 中 的__call__方法
- Python基础----字符串