webpack.dev.conf.js

  var utils = require('./utils')
  var webpack = require('webpack')
  var config = require('../config')
  var merge = require('webpack-merge')
  var baseWebpackConfig = require('./webpack.base.conf')
  var HtmlWebpackPlugin = require('html-webpack-plugin')
  var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
  // 将热重载的相干设置放入entry的每一项中，到达每个文件都能够完成热重载的目标
  // 如许webpack.base.conf.js中entry选项就变成了以下：
  // entry: {
  //    app: ['./src/main.js', './build/dev-client']
  //  }
  Object.keys(baseWebpackConfig.entry).forEach(function(name) {
    baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
  })
  // 挪用webpack-merge要领，将基本设置与开辟设置举行兼并
  // webpack-merge的作用类似于extend：少则增加，同则掩盖
  module.exports = merge(baseWebpackConfig, {
    module: {
      // 在开辟环境下天生cssSourceMap，便于调试（然则官方说cssSourceMap的相对路径有一个bug，所以临时将其封闭了）
      rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
    },
    // 设置Source Maps 在开辟中运用cheap-module-eval-source-map更快
    devtool: '#cheap-module-eval-source-map',
    plugins: [
      // DefinePlugin可认为webpack供应一个在编译时能够设置的全局常量
      // 在这里我们能够经由过程"process.env"这个全局变量的值来剖断所处的环境
      new webpack.DefinePlugin({
        'process.env': config.dev.env
      }),
      new webpack.HotModuleReplacementPlugin(),
      // 页面中的报错不会壅塞编译，然则会在编译完毕后报错
      new webpack.NoEmitOnErrorsPlugin(),
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: true
      }),
      new FriendlyErrorsPlugin()
    ]
  })