<ul id="a6qeo"></ul><strike id="a6qeo"></strike>

<fieldset id="a6qeo"></fieldset>

<strike id="a6qeo"></strike>

<del id="a6qeo"></del>

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

dreamtecher 發(fā)布于2019-08-26 13:50 / 486人閱讀

摘要：將熱重載的相關(guān)配置放入的每一項中，達到每一個文件都可以實現(xiàn)熱重載的目的這樣中選項就變成了如下調(diào)用方法，將基礎(chǔ)設(shè)置與開發(fā)設(shè)置進行合并的作用類似于少則添加，同則覆蓋在開發(fā)環(huán)境下生成，便于調(diào)試但是官方說的相對路徑有一個，所以暫

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")
  // 將熱重載的相關(guān)配置放入entry的每一項中，達到每一個文件都可以實現(xiàn)熱重載的目的
  // 這樣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])
  })
  // 調(diào)用webpack-merge方法，將基礎(chǔ)設(shè)置與開發(fā)設(shè)置進行合并
  // webpack-merge的作用類似于extend：少則添加，同則覆蓋
  module.exports = merge(baseWebpackConfig, {
    module: {
      // 在開發(fā)環(huán)境下生成cssSourceMap，便于調(diào)試（但是官方說cssSourceMap的相對路徑有一個bug，所以暫時將其關(guān)閉了）
      rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
    },
    // 配置Source Maps 在開發(fā)中使用cheap-module-eval-source-map更快
    devtool: "#cheap-module-eval-source-map",
    plugins: [
      // DefinePlugin可以為webpack提供一個在編譯時可以配置的全局常量
      // 在這里我們可以通過"process.env"這個全局變量的值來判定所處的環(huán)境
      new webpack.DefinePlugin({
        "process.env": config.dev.env
      }),
      new webpack.HotModuleReplacementPlugin(),
      // 頁面中的報錯不會阻塞編譯，但是會在編譯結(jié)束后報錯
      new webpack.NoEmitOnErrorsPlugin(),
      new HtmlWebpackPlugin({
        filename: "index.html",
        template: "index.html",
        inject: true
      }),
      new FriendlyErrorsPlugin()
    ]
  })