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. python-django开发学习笔记三

    1.简述 1.1 开发环境 该笔记所基于的开发环境为:windows8.python2.7.5.psycopg2-2.4.2.django1.5.4.pyCharm-2.7.3.以上所描述的软件.插件 ...

  2. vs附加调试 w3p进程没有名称

    解决: 把vs用管理员运行

  3. SharePoint 2013 字段属性之JSLink

    在SharePoint 2013中,SPField新增加了一个属性是JSLink,使用客户端脚本修改字段前台展示,我们可以用很多方法修改这个脚本的引用,然后来修改脚本,下面,我们举一个简单的例子. 具 ...

  4. opencv学习笔记霍夫变换——直线检测

    参考大佬博文:blog.csdn.net/jia20003/article/details/7724530 lps-683.iteye.com/blog/2254368 openCV里有两个函数(比较 ...

  5. Scala学习笔记(3)-表达式归纳

    语法:使用表达式定义值和变量 val <identifier>[:<type>]=<expression>  字面值类型 var <identifier> ...

  6. hadoop HA架构安装部署(QJM HA)

    ###################HDFS High Availability Using the Quorum Journal Manager########################## ...

  7. linux:文件打包与压缩

    学习内容介绍:Linux 上常用的压缩/解压工具,介绍了zip.rar.tar的使用. 先总结一下常用命令: zip: 打包 :zip something.zip something (目录请加 -r ...

  8. sed与grep正则

     string editor  流编辑器 sed编辑器是一行一行的处理内容,正在处理的内容存放在缓冲区内,处理完后 按照选项的规定进行输出或者修改文件 option: -n 静默模式结合p可以只输出修 ...

  9. 正则表达式(三):Unicode诸问题下篇(转)

    原文:http://www.infoq.com/cn/news/2011/04/regular-expressions-4 我们使用正则表达式,熟练掌握各种功能和结构只是手段,解决实际的问题才是真正的 ...

  10. windows上apache是线程处理请求,linux上apache是进程处理请求

    windows上apache是线程处理请求,linux上apache是进程处理请求