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. LeetCode 312. Burst Balloons(戳气球)

    参考:LeetCode 312. Burst Balloons(戳气球) java代码如下 class Solution { //参考:https://blog.csdn.net/jmspan/art ...

  2. python语言中的函数装饰器

    装饰器 什么是装饰器? 装饰:给已有的对象(函数)添加新的功能 器:工具              在python中指具备某些功能的函数 装饰器:装饰器就是一个给其他函数增加功能的函数 一种设计原则: ...

  3. vmware搭建lnmp环境配置域名

    找到nginx配置文件,修改server_name 然后找到/etc/hosts文件 修改成如下 之后在Windows本地的C盘的hosts文件中添加解析 好了,这样就可以访问了 通往牛逼的路上,在意 ...

  4. Roslyn Cookbook

    Roslyn Cookbook by Manish Vasani Publisher: Packt Publishing Release Date: July 2017 ISBN: 978178728 ...

  5. 3D模板阴影原理

    3D模板阴影原理 1:先从3dsMax中导出一个简单的场景,一个园环,球,平面. 2:园环直接面向光源,园环对球体来说是一个光线的阻挡物,园环在它上面形成阴影,同时,园环和球体对平面来说是光线的阻挡物 ...

  6. 学习shell脚本之前的基础知识(一)(学习记录帖)

    记录命令历史:我们敲过的命令,linux会有记录,保存在家目录的.bash_history文件中.(备注:只有用户正常退出当前shell时,当前命令才会保存在.bash_history文件中) “  ...

  7. SQL数据库优化

    1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  8. linux 设备驱动分类

    1. 字符设备 :在I/O传输过程中以字符为单位. 2. 块设备: 在传输过程中以块为单位,相关概念有 缓冲,I/O调度,请求队列.主要体现出与字符设备在操作硬件的接口实现方式上是不一样的. 3. 网 ...

  9. Ubuntu系统下手动释放内存

    有时候,像mongo这种,对内存只吃不吐的,我们要手动释放一下. drop_caches的详细文档如下:Writing to this will cause the kernel to drop cl ...

  10. java中map接口hashMap以及Enty之间的用法和关系

    java中map接口hashMap以及Enty之间的转换 首先说的是map接口: Map提供了一种映射关系,其中的元素是以键值对(key-value)的形式存储的,能够实现根据key快速查找value ...