const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
//一个拷贝资源的插件,后面我会介绍用法
const CopyWebpackPlugin = require('copy-webpack-plugin')
//生成html模板的插件,一个经常用到的wbepack插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//一个更友好展示错误日志的插件
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
//一个自动打开可用端口的包
const portfinder = require('portfinder')
//当前环境的host
const HOST = process.env.HOST
//当前环境的port
const PORT = process.env.PORT && Number(process.env.PORT) //开发环境的配置
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
//loader的配置,具体内容可以参考utils文件
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
},
// cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool, devServer: {
//重新加载server时,控制台对一些错误以warning的方式提示
clientLogLevel: 'warning',
//当使用 HTML5 History API 时,任意的 404 响应都可能需要被替代为 index.html
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
//启用 webpack 的模块热替换特性
hot: true,
//告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要,这里我们禁用
contentBase: false,
//是否压缩
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
//是否自动打开浏览器
open: config.dev.autoOpenBrowser,
//编译出错时是否有提示
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
//静态内容的路径,此路径下的打包文件可在浏览器中访问
publicPath: config.dev.assetsPublicPath,
//接口的代理
proxy: config.dev.proxyTable,
//启用 quiet 后,除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。
quiet: true, // necessary for FriendlyErrorsPlugin
//监视文件的选项
watchOptions: {
poll: config.dev.poll,
}
},
plugins: [
//DefinePlugin 允许创建一个在编译时可以配置的全局常量。这里生成了一个当前环境的常量
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
//模块热替换插件,修改模块时不需要刷新页面
new webpack.HotModuleReplacementPlugin(),
//当开启 HMR 的时候使用该插件会显示模块的相对路径
new webpack.NamedModulesPlugin(),
//在编译出现错误时,使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
//打包后js文件放在body的最后
inject: true
}),
//将static的内容拷贝到开发路径,忽略这个文件夹下“.XX”的文件
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
})

手撕vue-cli配置——webpack.dev.conf.js篇的更多相关文章

  1. vue -- 脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

  2. 手撕vue-cli配置——webpack.base.conf.js篇

    在开始写webpack.base.conf.js(简称base)之前,我们先来看一下vue-loader.conf.js这个文件,毕竟在base中我们还会用到: 'use strict' //引入前一 ...

  3. 手撕vue-cli配置——webpack.prod.conf.js篇

    'use strict' const path = require('path') const utils = require('./utils') const webpack = require(' ...

  4. vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)

    最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...

  5. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  6. vue-cli脚手架build目录中的webpack.dev.conf.js配置文件

    此文章用来解释vue-cli脚手架build目录中的webpack.dev.conf.js配置文件 此配置文件是vue开发环境的wepack相关配置文件 关于注释 当涉及到较复杂的解释我将通过标识的方 ...

  7. vue-cli脚手架npm相关文件解读(3)webpack.dev.conf.js

    系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...

  8. 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 ...

  9. vue-cli脚手架之webpack.dev.conf.js

    webpack.dev.conf.js  开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...

随机推荐

  1. jQuery ajax的前台代码编写

    jQuery ajax的前台代码: <script type="text/javascript" src="/include/jquery/jquery-1.1.3 ...

  2. Saltstack之SaltSyndic

    SaltSyndic 1,SaltSyndic必须运行在salt-master上面 2,Syndic要连接另外一个Master比它更高级 在master安装syndic yum -y install ...

  3. 1.9TF的过拟合-dropout

    不带dropout程序并通过tensorboard查看loss的图像 """ Please note, this code is only for python 3+. ...

  4. split和strip的使用

    我觉得都可以进行分隔,但最大的不同就是一个返回list,一个返回字符串 s1 = 'deng ye xun' s1.split() Out[8]: ['deng', 'ye', 'xun'] s1.s ...

  5. oracle listagg函数、lag函数、lead函数 实例

    Oracle大师Thomas Kyte在他的经典著作中,反复强调过一个实现需求方案选取顺序: “如果你可以使用一句SQL解决的需求,就使用一句SQL:如果不可以,就考虑PL/SQL是否可以:如果PL/ ...

  6. CodeForces - 55C Pie or die 想法题(猜程序)

    http://codeforces.com/problemset/problem/55/C 题意:一个博弈. 题解:瞎猜,目前不清楚原理 #include<iostream> #inclu ...

  7. python数据结构之树(二叉树的遍历)

    树是数据结构中非常重要的一种,主要的用途是用来提高查找效率,对于要重复查找的情况效果更佳,如二叉排序树.FP-树. 本篇学习笔记来自:二叉树及其七种遍历方式.python遍历与非遍历方式实现二叉树 介 ...

  8. JS中"属性"的用法

    JS的属性和C#有相似之处  ! 使用get和set来进行属性的获取和设置 var obj={ a:"1", get age(){ return obj.a; }, set age ...

  9. python2.7+pyqt4实现记事本基本功能

    记事本程序: # coding:utf-8 import sys from PyQt4.QtGui import QMainWindow from PyQt4.QtGui import QApplic ...

  10. sublime eslint 和 jshint的安装与使用

    jshint简介 jslint是一javascript的语法检测,众多前端自动化工具都又用到,编辑器也用到jshint. webstorm很强大,自身带有,但是我使用的电脑带不动.sublime或者a ...