vue - webpack.dev.conf.js
描述:开发时的配置.(配置开发时的一些操作)
例如这里,是否自动打开浏览器(默认true)
'use strict' // build/util.js
const utils = require('./utils')
// node_modules里面的webpack
const webpack = require('webpack')
// config/index.js
const config = require('../config')
// 对象合并
const merge = require('webpack-merge')
// 路径
const path = require('path') // 引入webpack.base.conf.js配置
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder') // 配置
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT) const devWebpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map开发速度更快(只检测修改了的文件进行更新,而不是全部)
devtool: config.dev.devtool, /**
* 这里配置开发服务器
*/
devServer: {
clientLogLevel: 'warning',
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
// 是否开启HMR
hot: true,
// 内容
contentBase: false, // 因为我们使用CopyWebpackPlugin
// 是否压缩
compress: true, host: HOST || config.dev.host,
port: PORT || config.dev.port, // config => config/index.js
open: config.dev.autoOpenBrowser, overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
// 如果不开启,则不提示友好的错误信息!
quiet: true, // FriendlyErrorsPlugin所必需的
watchOptions: {
poll: config.dev.poll,
}
}, /**
* 配置插件
*/
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR在更新时在控制台中显示正确的文件名。
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// 复制到自定义静态源
new CopyWebpackPlugin([
{
// 来自(可以是对象,可以是String)
from: path.resolve(__dirname, '../static'),
// 走向(可以是对象,可以是String)
to: config.dev.assetsSubDirectory,
// 忽略此类文件
ignore: ['.*']
}
])
]
}) /**
* 模块导出(Promise)
*/
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => { if (err) {
reject(err)
} else {
// 发布新的端口,这是e2e测试所必需的
process.env.PORT = port
// 添加开发服务器到端口地址
devWebpackConfig.devServer.port = port // 添加 FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
})) resolve(devWebpackConfig)
}
})
})
vue - webpack.dev.conf.js的更多相关文章
- vue - webpack.dev.conf.js for merge
webpack-merge提供了一个merge连接数组并合并创建新对象的对象的函数.如果遇到函数,它将执行它们,通过算法运行结果,然后再次将返回的值包装在函数中. 这种行为在配置webpack时特别有 ...
- vue - webpack.dev.conf.js for FriendlyErrorsPlugin
描述:webpack网页端友好的报错信息就来自它 官网:https://www.npmjs.com/package/friendly-errors-webpack-plugin new Friendl ...
- vue - webpack.dev.conf.js for HtmlWebpackPlugin
描述: 这是一个webpack插件,可以简化HTML文件的创建,为您的webpack捆绑服务提供服务. 这对于webpack包含文件名中包含哈希值的bundle 来说尤其有用,它会更改每个编译. 您可 ...
- vue - webpack.dev.conf.js for CopyWebpackPlugin
描述:将单个文件或整个目录复制到构建目录 官网地址:https://www.npmjs.com/package/copy-webpack-plugin // 复制到自定义静态源 new CopyWeb ...
- vue - webpack.dev.conf.js for node-portfinder
描述:获取当前可用的port. (vue-cli配置好了,一旦端口被占用,报错,再次运行时会打开:8080+1,依次类推...8080+n) 官网地址:https://www.npmjs.com/pa ...
- VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)
最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...
- vue -- 脚手架之webpack.dev.conf.js
webpack.dev.conf.js 开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...
- 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 ...
随机推荐
- 洛谷 P3128 [USACO15DEC]最大流Max Flow-树上差分(点权/点覆盖)(模板题)
因为徐州现场赛的G是树上差分+组合数学,但是比赛的时候没有写出来(自闭),背锅. 会差分数组但是不会树上差分,然后就学了一下. 看了一些东西之后,对树上差分写一点个人的理解: 首先要知道在树上,两点之 ...
- Bzoj3566/洛谷P4284 [SHOI2014]概率充电器(概率dp)
题面 Bzoj 洛谷 题解 首先考虑从儿子来的贡献: $$ f[u]=\prod_{v \in son[u]}f[v]+(1-f[v])\times(1-dis[i]) $$ 根据容斥原理,就是儿子直 ...
- Codeforces Round #426 (Div. 2) D The Bakery(线段树 DP)
The Bakery time limit per test 2.5 seconds memory limit per test 256 megabytes input standard input ...
- Flask实战第67天:Flask+Celery实现邮件和短信异步发送
之前在项目中我们发送邮件和 短信都是阻塞的,现在我们来利用Celery来优化它们 官方使用文档: http://flask.pocoo.org/docs/1.0/patterns/celery/ re ...
- 线程间操作无效: 从不是创建控件“textBox2”的线程访问它
如何:对 Windows 窗体控件进行线程安全调用 线程间操作无效: 从不是创建控件的线程访问它的三种方法 如果使用多线程处理来提高 Windows 窗体应用程序的性能,则你必须确保以线程安全的方式调 ...
- 【DFS】【枚举】Gym - 101246G - Revolutionary Roads
给你一张有向图,问你将任意一条边变成双向后,所能得到的最大强连通分量的大小. 缩点之后,预处理can(i,j)表示i能到j. 之后枚举每一条边(u,v),再枚举其他所有点t,如果can(u,t) &a ...
- bzoj 1734: [Usaco2005 feb]Aggressive cows 愤怒的牛
1734: [Usaco2005 feb]Aggressive cows 愤怒的牛 Description Farmer John has built a new long barn, with N ...
- 输入sql语句,将结果写入到xml文件
import java.io.FileOutputStream; import java.sql.Connection; import java.sql.DriverManager; import j ...
- Codeforces Gym 100269B Ballot Analyzing Device 模拟题
Ballot Analyzing Device 题目连接: http://codeforces.com/gym/100269/attachments Description Election comm ...
- HDU 4638 Group (2013多校4 1007 离线处理+树状数组)
Group Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...