vue-cli中配置webpack系列文章六 ------ webpack.dev.conf.js

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()
    ]
  })