webpack.dev.conf.js

標籤：依賴   hot   map   git   規則   script   mit   mil   fine   

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