轉載自：https://www.cnblogs.com/ye-hcj/p/7087205.html
//引入當前目錄下的utils.js文件模塊
var utils = require('./utils')
//node的path模塊
var path = require('path')
//內置模塊
var webpack = require('webpack')
//引入config目錄下的index.js文件
var config = require('../config')
//進行合并對象，相同項目會進行覆蓋
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
// 下面是一個自動生成html的插件，能夠把資源自動加載到html文件中
// 詳情請看 (1）
var HtmlWebpackPlugin = require('html-webpack-plugin')
// 下面這個插件是用來把webpack的錯誤和日志收集起來，漂亮的展示給用戶
// 詳情請看 (2)
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
//=======================靜態編譯ssi資源==================================
var SSICompileWebpackPlugin = require('ssi-webpack-plugin')
// add hot-reload related code to entry chunks// Object.keys(obj) Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，//數組中屬性名的排列順序和使用 for...in 循環遍歷該對象時返回的順序一致 （兩者的主要區別是 一個 for-in 循環還會枚舉其原型鏈上的屬性）。
Object.keys(baseWebpackConfig.entry).forEach(function (name) {// 下面這個結果就是把webpack.base.conf.js中的入口entry改成如下配置 // app: ['./build/dev-client','./src/main.js']? ? //即數組多加了一個元素
? baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
// 下面是合并配置對象，將這個配置文件特有的配置添加替換到base配置文件中
module.exports = merge(baseWebpackConfig, {
? module: { // 下面是把utils配置中的處理css類似文件的處理方法拿過來，并且不生成cssMap文件
? ? rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
? },
? // cheap-module-eval-source-map is faster for development// devtool是開發工具選項，用來指定如何生成sourcemap文件，cheap-module-eval-source-map此款soucemap文件性價比最高
? devtool: '#source-map',
? plugins: [// DefinePlugin內置webpack插件，專門用來定義全局變量的，下面定義一個全局變量 process.env 并且值是如下 /* 'process.env': { NODE_ENV: '"development"' } 這樣的形式會被自動轉為 'process.env': '"development"' 各位騷年看好了，development如果不加雙引號就當做變量處理，程序會報錯 */
? ? new webpack.DefinePlugin({
? ? ? 'process.env': config.dev.env
? ? }),
? ? //提取公共代碼塊 babel-polyfill只能有一個實例
? ? new webpack.optimize.CommonsChunkPlugin({
? ? ? name: 'vendor',
? ? ? chunks: ['index', 'admin'],
? ? ? minChunks: function (module, count) {
? ? ? ? return (
? ? ? ? ? module.resource &&
? ? ? ? ? /\.js$/.test(module.resource) &&
? ? ? ? ? module.resource.indexOf(
? ? ? ? ? ? path.join(__dirname, '../node_modules')
? ? ? ? ? ) === 0
? ? ? ? )
? ? ? }
? ? }),
? ? // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
? ? new webpack.HotModuleReplacementPlugin(),// 下面這個插件比較簡單，就是當webpack編譯錯誤的時候，來中端打包進程，防止錯誤代碼打包到文件中，你還不知道
? ? new webpack.NoEmitOnErrorsPlugin(),
? ? // https://github.com/ampedandwired/html-webpack-plugin
? ? new HtmlWebpackPlugin({
? ? ? filename: 'index.html',
? ? ? template: 'index.html',
? ? ? favicon: './src/assets/images/favicon.ico',
? ? ? excludeChunks: ['admin'],
? ? ? inject: true
? ? }),
? ? new HtmlWebpackPlugin({
? ? ? filename: 'admin.html',
? ? ? template: 'admin.html',
? ? ? favicon: './src/assets/images/favicon.ico',
? ? ? excludeChunks: ['index'],
? ? ? inject: true
? ? }),
? ? new SSICompileWebpackPlugin({
? ? ? publicPath:'',
? ? ? localBaseDir:'C:/Developer/newWorkspace',
? ? ? minify:false
? ? }),
? ? new FriendlyErrorsPlugin()
? ]
})
(1)html-webpack-plugin插件是用來生成html文件的，有很靈活的配置項，下面是基本的一些用法
plugins: [
? ? new HtmlWebpackPlugin(), // Generates default index.html
? ? new HtmlWebpackPlugin({? // Also generate a test.html
? ? ? filename: 'test.html', // 生成的文件的名稱
? ? ? title: 'Custom template', // 文件的標題
? ? ? template: 'my-index.ejs' //可以指定模塊html文件
? ? })
]
下面是模板文件my-index.ejs的內容
<!DOCTYPE html>
<html>
? <head>
? ? <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
? ? <title><%= htmlWebpackPlugin.options.title %></title> //這里使用特殊的表示插入配置項的title
? </head>
? <body>
? </body>
</html>
(2)friendly-errors-webpack-plugin插件，把webpack編譯出來的錯誤展示給我們，方便調試
? 安裝 npm install friendly-errors-webpack-plugin --save-dev
? 基本使用
? plugins: [
? ? ? new FriendlyErrorsWebpackPlugin(),
? ]
? 注意點，使用這個插件要遵守下點
? ? ? 您需要關閉所有的錯誤日志記錄，將webpack配置靜默選項設置為true
? ? ? 也就是遵循以下三點即可
? ? ? 在使用webpack-dev-middleware插件，關于這個插件的解釋在我的dev-sever-js配置文件中有解釋，設置以下內容
? ? ? ? app.use(require('webpack-dev-middleware')(compiler, {
? ? ? ? ? ? quiet: true, // 必須設置
? ? ? ? ? ? publicPath: config.output.publicPath,
? ? ? ? }));
? ? ? 使用webpack-dev-server時設置如下
? ? ? {
? ? ? ? ? devServer: {
? ? ? ? ? ? ? quiet: true
? ? ? ? ? }
? ? ? }
? ? ? 使用webpack-hot-middleware中間件，關于這個插件的解釋也在我的dev-server-js文章中
? ? ? ? app.use(require('webpack-hot-middleware')(compiler, {
? ? ? ? ? ? log: () => {}
? ? ? ? }));
? ? 做到以上幾點，就可以正常使用這個插件了，這個插件還有一些配置項，感興趣自行了解
(3) HotModuleReplacementPlugin解釋如下
? ? 老哥們知道什么是webpack模塊不
? ? webpack支持如下模塊
? ? ? ? CoffeeScript
? ? ? ? TypeScript
? ? ? ? ESNext (Babel)
? ? ? ? Sass
? ? ? ? Less
? ? ? ? Stylus
? ? 這些模塊支持如下導入的方式
? ? ? ? ES2015 import 語句
? ? ? ? CommonJS require() 語句
? ? ? ? AMD define 和 require 語句
? ? ? ? css/sass/less 文件中的 @import 語句。
? ? ? ? 樣式(url(...))或 HTML 文件(<img src=...>)中的圖片鏈接(image url)
? ? 看到了把，webpack就是這么強大，幾乎囊括了前端所有的東西
? ? 這個插件的作用就是當你的程序在運行時，而你現在要替換、添加或刪除某個模塊，又不想重新加載頁面，
? ? 這個插件幫助你實現無刷新加載，關于內部實現原理，其實有點意思，各位請自行查看
