系列：
webpack入門——了解及使用
webpack進階——緩存與獨立打包
文件目錄：
-- /node_modules：依賴的各種模塊
-- /src
– index.js
– print.js
– style.css
– package.json：配置npm相關設置
– webpack.config.js：配置webpack
package.json腳本（輸入npm run xxx，xxx為腳本中對應命令，將會在命令行中執行相應操作）:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack", // webpack打包
"watch": "webpack --watch", // webpack監聽模式
"start": "webpack-dev-server --open" // 自動刷新
}
webpack.config.js:
（這是一個我們已經配置好的webpack配置js，本文中的講解都將基于該文件，會在本文件上多多少少做一些改變以供測試。）
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
},
devtool: 'inline-source-map',
devServer: {
hot: true,
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks: Infinity,
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
HtmlWebpackPlugin
由webpack.config.js可知，webpack打包后生成的是若干個js文件，但是最終這些js文件都是應用在html中的。
假如打包后的文件只有app.js，那么完全可以手動創建一個html，并加入<script type="text/javascript" src="app.js">，html就可以應用該打包后的文件。
但是如果我們打包的文件不止一個，或者打包后的文件包含hash值，那么每次我們都需要添加script或者說每次都需要更改文件的hash值嗎？當然可以，但是這樣很麻煩，開發效率很低。
所以我們就引入了HtmlWebpackPlugin插件，這樣就可以自動生成html模版并且自動添加script。
plugins: [
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks: Infinity,
}),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({ // 已添加該插件
title: 'Output Management'
})
]
現在我們進行wepack打包：
生成目錄：
-- /dist
– app.js
– common.js
– print.js
– index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Output Management</title>
</head>
<body>
<script type="text/javascript" src="common.js"></script><script type="text/javascript" src="app.js"></script><script type="text/javascript" src="print.js"></script></body>
</html>
更多配置：HTML Webpack Plugin
CleanWebpackPlugin
該插件的主要作用是清除前次打包文件。
沒有hash時，這個插件體現不出來效果，我我們在以上的webpack配置中做點小的變動：
// 給輸出文件名上加上hash
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
}
// 注釋掉CleanWebpackPlugin
plugins: [
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks: Infinity,
}),
new webpack.HotModuleReplacementPlugin(),
// new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
然后再次打包，可以看見dist文件夾中：
現在我們只需要hash后的文件給html使用，但是這里卻任然保留著很多上一次打包留下來的東西。
這個時候我們把CleanWebpackPlugin取注釋，然后再次打包。
可以看見上次文件夾里的垃圾都沒有了，只留下了現在需要的文件。
故CleanWebpackPlugin的效果是在打包前，刪除指定的曾經打包的文件夾，然再新建并把最新打包好的內容放在dist文件夾里。
參數為文件夾字符串數組，更多配置：Clean Webpack Plugin
webpack-dev-server
webpack有一個功能叫做監聽，使用方法：命令行中輸入 webpack --watch。
這樣啟動webpack之后，每當我們在源文件中發生了改變，都會進行重新打包，這樣提高了生產效率，雖然重新打包了，但是我們必須刷新頁面才能看見更變。
這樣是不友好的，如果能夠自己刷新頁面那就極好了，這也就是webpack-dev-server的作用，啟動一個小型server達到實時刷新的效果。
使用方法：
sudo npm install webpack-dev-server --save-dev
## 然后啟動的時候，就
webpack-dev-server --open
## 運行參數可以用以下查看
webpack-dev-server -help
## 常用的有 編譯刷新的時候出現顏色和進程條
webpack-dev-server --progress --colors
我們將該腳本寫入了package.json中，可以快捷啟動 npm run start。
Hot Module Replace
熱替換常常和webpack-dev-server同時使用，所謂熱替換（HMR: Hot Module Replace）描述的是運行中的一個系統，我要更換其中部分內容，而仍然要保持不替換的內容繼續工作，并在替換后，替換部分能夠立即生效。
可能到這里大家還不是很明白熱替換的具體作用，簡單來說就是部分刷新。
假如我們僅僅只使用webpack-dev-server，然后在index.js 引入了 style.css。 那么我們修改一下style.css的樣式，webpack-dev-server會監聽到源文件發生了變化，然后重新進行webpack打包，然后再刷新頁面，可能到這里已經滿足了很多人的需求。但是我現在有了一個新的需求，我頁面上有一個input，我在input中輸入了一系列文字，現在我希望，我更改了樣式，input中的文字仍然保持不變，只有修改的樣式發生改變。我們知道webpack-dev-server在源文件發生改變后，會刷新整個頁面，一旦刷新的整個頁面，那么input中的文字必當消失。 這個時候就是體現熱替換強大功能的時候了，使用了熱替換，就可以僅僅只更改樣式而保持input中的值不發生改變。
使用方法：
- 在命令行中直接使用：
webpack-dev-server --hot
- 將啟動配置寫入webpack.config.js中，首先在插件數組中添加該插件：
plugins: [
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "common",
minChunks: Infinity,
}),
new webpack.HotModuleReplacementPlugin(), // 在實例webpack.config.js中已添加
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
這之后我們將進行webpack-dev-server的配置，
devServer: {
hot: true, // hot為true則代表啟動了熱替換服務
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
進行配置之后，我們直接啟動npm run start腳本既可（webpack-dev-server --open）。
由本例我們知道了devServer是關于webpack-dev-server的配置，我們來看看常用參數：
- port：8080（Number，訪問端口），從localhost:8080訪問服務器
- hot：是否開啟熱替換模式
- contentBase：簡單來說就是提供靜態資源文件的目錄，如果我們沒有使用HtmlWebpackPlugin的，而是手動的添加了index.html，那么這個時候index.html在哪個目錄下，contentBase就需要寫哪個目錄。這里一定要寫絕對路徑。因為這個路徑是基于本機的，如果寫相對路徑則是相對于本機的根路徑的。
- publicPath：開發模式中，打包的文件在該目錄下，而不是在output中制定的文件夾下。并且路徑是相對于當前目錄的，以'/'開頭。例如：publicPath: '/public/'，則應該通localhost:8080/public/來訪問打包的文件，例如我要訪問common.js，那么就是localhost:8080/public/common.js。使用該路徑時，通常都不會自己手寫index.html，這樣會造成訪問混亂，直接使用HtmlWebpackPlugin生成HTML。
更多配置：Webpack Dev Server
source map
首先我們先在本例的webpack配置上做出一些修改：
// devtool: 'inline-source-map' // 注釋掉source-map
之后我們運行npm run start，這個時候我們的項目應該正常進入了開發模式中。進入print.js文件：
import _ from 'lodash';
export default function printMe() {
console.log(_.join(['qq', 'bb'], ' '));
}
這個時候我們把console改成consol然后保存，在頁面上觸發這個printMe函數，發現控制臺上：
我們知道錯誤明明出現在print.js中，但是由于是app.js引用了print.js，所以報錯還是在app.js上，這樣以后我們出現了錯誤很難定位出錯的位置，導致難以調試，現在我們吧
// devtool: 'inline-source-map'解注，然后重新執行npm run start。再次觸發printMe這個函數：
然后我們可以看見，清楚的定位了出錯的是在print.js第四行，這就是source map的作用，用于錯誤定位。但是在生產環境中，我們一般都是經過調試好的文件，所以在生產環境中不需要這個source map。
相關信息查看：開發輔助調試工具(Devtool)
參考資料：
開發中 Server
Webpack dev server
webpack-dev-server 使用總結
Webpack使用教程三（webpack-dev-server）
本文將持續更新。。。。
