var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')

// 一个可以合并数组和对象的插件
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')

// 一个用于生成HTML文件并自动注入依赖文件(link/script)的webpack插件
var HtmlWebpackPlugin = require('html-webpack-plugin')

// 用于更友好地输出webpack的警告、错误等信息
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})

// 合并基础的webpack配置
module.exports = merge(baseWebpackConfig, {
// 配置样式文件的处理规则,使用styleLoaders

module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},

// 配置Source Maps。在开发中使用cheap-module-eval-source-map更快
devtool: '#cheap-module-eval-source-map',

// 配置webpack插件
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),

// 后页面中的报错不会阻塞,但是会在编译结束后报错
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})

webpack.dev.conf.js的更多相关文章

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

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

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

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

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

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

  5. webpack.dev.conf.js详解

    转载自:https://www.cnblogs.com/ye-hcj/p/7087205.html webpack.dev.conf.js详解 //引入当前目录下的utils.js文件模块var ut ...

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

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

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

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

  8. npm ERR! mathine_call@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` npm ERR! Exit status 1

    internal/modules/cjs/loader.js:583 throw err; ^ Error: Cannot find module 'webpack' at Function.Modu ...

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

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

  10. npm ERR! code ELIFECYCLE webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`

    “E:\Program Files\JetBrains\WebStorm 2018.1.4\bin\runnerw.exe” G:\node\nodejs\node.exe G:\node\nodej ...

随机推荐

  1. NGUI 背景图自适应

    背景图UISprite组件调整如下: UIRoot设置: 不保持比例自适应: 保持宽与屏幕宽一致,高度随宽的缩放比例进行缩放:

  2. qurtz.net

    Quartz.NET的使用(附源码)(作者 陈珙)   简介 虽然Quartz.NET被园子里的大神们写烂了,自己还是整理了一篇,结尾会附上源码地址. Quartz.NET是一款功能齐全的开源作业调度 ...

  3. 【374】Adobe Acrobat 操作技巧

    1. 文件内容增减 参考:如何在PDF文件中删除页面 参考:如何旋转.移动.删除和重新编号 PDF 页面 双击PDF文档,并在预览程序中打开它. 如果在其他程序(如Adobe Reader)中打开文档 ...

  4. C语言函数入参压栈顺序为什么是从右向左?

    看到有人提问到,在处理printf/cout时,压栈顺序是什么样的?大家都知道是从右往左,也就是说从右往左的计算,但是,这里的计算不等于输出. a++和++a的压栈的区别:在计算时,遇到a++会记录此 ...

  5. Celery 图,[转]

    https://www.cnblogs.com/forward-wang/p/5970806.html

  6. centos 卸载和安装软件

    rpm -qa 列出所有已安装软件包 rpm -e packagename  删除软件包 rpm -e --nodeps packagename  强制删除软件和依赖包 rpm -q 包名     查 ...

  7. curl get请求

    curl --proxy 192.168.1.159:8889  -d "grant_type=client_credential&appid=wxxx&secret=xxx ...

  8. Html写作规范

    HTML是描述网页结构的超文本标记语言,HTML规范能够使HTML代码风格保持一致,使得HTML更容易理解和维护. 整体结构 用编辑器快捷键一键搞定 <!DOCTYPE html>---- ...

  9. io输出流变为输入流

    java 输出流转化为输入流 new ByteArrayInputStream(byteArrayOutputStream.toByteArray());

  10. ABAP IMPORT&EXPORT的用法

    1含有事务码 1.1 不注入参数,直接调用 CALL TRANSACTION 'SUIM' AND SKIP FIRST SCREEN. 1.2 注入参数, SET PARAMETER ID: '屏幕 ...