瞭解Webpack
什麼是webpack
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。
為什要使用webpack
模塊化開發：讓我們可以把複雜的程序細化為小的文件;
ES6轉ES5：讓我們能夠使用JavaScript的新特性，並且能轉換成瀏覽器可以識別的版本
預處理：Scss，less等CSS預處理器
預編譯：vue單文件組件編譯
…
webpack與gulp的區別
gulp工作流程
Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯，組合，壓縮等任務的具體步驟，工具之後可以自動替你完成這些任務
webpack工作流程
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最後打包為一個（或多個）瀏覽器可識別的JavaScript文件。
使用webpack
·安裝
//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack
配置文件
在根目錄創建webpack.config.js文件，並寫入如下配置信息
entry: 入口文件
output: 輸出設置
path: 打包後的文件存放的路徑
filename: 打包後輸出的文件名
[name]：以入口名作為文件名
[hash]：添加hash值
publicPath: 打包後index.html代碼中文件引用前綴（如：src,href等）
module.exports = {
//__dirname是一個nodejs的global變量，指代當前執行文件所在的文件夾
entry: __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/public/js",//打包後的文件存放的路徑
filename: "bundle.js"//打包後輸出的文件名
}
}
devServer：測試服務器
配合webpack-dev-server插件使用，webpack development server 是一個webpack可選的本地開發的server。它通過nodejs的express 來起一個server提供靜態文件服務，同時它根據配置信息（webpack.config.js）來打包資源，存在內存中，同時當你的代碼發生改變的時候，它還可以刷新你的瀏覽器。它是一個單獨的npm module，通過npm install webpack-dev-server --save-dev來給項目安裝依賴。
contentBase： 服務器路徑（默認：項目的根目錄）
port: 指定端口（默認：8080）
inline: 是否自動刷新（默認：true）
open: 是否自動打開瀏覽器（默認：false）
historyApiFallback: 對於單頁面程序，瀏覽器的histroy可以設置成html5 history api或者hash
proxy: 服務器代理（一般用於解決ajax跨域問題）
webpack-dev-server的實現方法其實是對http-proxy-middleware的封裝
```js
proxy:{
"/api":{
target:"http://api.douban.com/v2/movie",//代理目標服務器
changeOrigin: true,
pathRewrite: {'^/api' : ''}, //替換部分路徑
}
}
```
mode：模式
production（默認）
development
none
modules
rules: 配置Loader（加載器）規則（詳情）
plugin:插件（詳情）
resolve
alias 別名
mainFields
extensions 默認擴展名
resolve: {
alias: {
'vue$' : 'vue/dist/vue.js',
'@':path.resolve('src')
},
mainFields: ['browser', 'main'],
extensions:['.js', '.json']
}
運行
寫好配置文件後，在終端裡運行命令進行打包操作
webpack：輸出打包後的文件（需全局安裝webpack）
webpack-dev-server：不輸出文件，運行靜態服務器（默認8080端口，需全局安裝webpack-dev-server）
任務快捷命令
在package.json中設置快捷方式，命令行運行格式：npm run 快捷命令
"scripts": {
"dev":"webpack-dev-server --inline --progress",
"start":"npm run dev",
"build":"webpack --progess"
Loader（加載器）
Webpack有一個不可不說的優點，它把所有的文件都都當做模塊處理，webpack通過loader來加載各種各樣的資源（如css,sass,less,vue文件組件,圖片等），不同的資源應用的不同的loader，loaders是通過單獨的npm來安裝的，然後在webpack.config.js中通過module.rules來配置。loader的配置包括
module.rules(Array)
test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）
use(Object|Array)
loader(String)：loader的名稱
options(Object):配置loader參數
loader(String|Array)
PS：loader為use.loader的簡寫，可以支持多個loader(處理順序從後往前)
include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；
query：為loaders提供額外的設置選項（可選）
###babel-loader
Babel其實是一個編譯JavaScript的平臺，它可以編譯代碼幫你達到以下目的：
balel能做什麼
ES6、ES7…轉ES5
讓你能使用基於JavaScript進行了拓展的語言，比如React的JSX；
babel-loader依賴模塊
babel-core: 核心功能
babel-preset-env：解析ES6語法
babel-preset-react: 解析JSX
注意babel-loader與babel-core的版本問題
css-loader
作用是讓webpack可以解析執行css文件
style-loader：作用是生成一個style標籤，並且將解析後的css文件插入到style中去
css-loader使你能夠使用類似@import 和 url(…)的方法實現 require()的功能, style-loader將所有的計算後的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包後的JS文件中
sass-loader：編譯sass文件
vue-loader
編譯vue代碼
vue-template-compiler：解析vue單文件模板
url-loader
一個對圖片等文件進行優化的加載器，可以解決圖片引用路徑的問題，並可以根據limit設置把小圖片一dataURI的方式保存，減少http請求
limit: 文件大小
小於等於limit，則以dataURI方式顯示
大於limit，則調用file-loader處理
name：文件名規則
默認值：文件哈希。
[path]表示輸出文件的相對路徑與當前文件相對路徑相同，打包後文件中引用文件的路徑也會加上這個相對路徑
[name].[ext]則表示輸出文件的名字和擴展名與當前相同
file-loader：解決圖片引用路徑的問題（img和background）
url-loader內置file-loader的功能
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: '../dist/img/[name].[hash:7].[ext]'
}
}
Plugins（插件）
loader 被用於轉換某些類型的模塊，而插件則可以用於執行範圍更廣的任務，可以處理loader處理不了的事情。插件的範圍包括：打包優化、資源管理和注入環境變量。
###HtmlWebpackPlugin
這個插件的作用是依據一個html文件作為模板模板，在出口目錄自動生成一個引用你打包後的JS的新文件（生成多個頁面要多次調用new HtmlWebpackPlugin()）
template:模板路徑
filename:輸出文件名（默認：index.html）
title:設置html文件的title屬性
hash:是否自動往引入的css或js中添加hash（默認：false）
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
})
]
clean-webpack-plugin
添加了hash之後，會導致改變文件內容後重新打包時，文件名不同而內容越來越多，因此這裡介紹另外一個很好用的插件clean-webpack-plugin
plugins:[
new CleanWebpackPlugin('dist')//參數：String/Array
]
extract-text-webpack-plugin
用於提取css文件的公共部分，從一個已存在的 loader 中，創建一個提取(extract) loader
參數（String|Object）
filename
plugins:[
new ExtractTextWebpackPlugin('common.css')//參數：String/Object
],
rules:[
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
use: 'css-loader',
fallback:'style-loader'
})
}
]
PS：由於本插件還未支持webpack4，可能會報錯，安裝時請使用npm install -D extract-text-webpack-plugin@next（@4.0.0-beta.0）
copy-webpack-plugin
在webpack中拷貝文件和文件夾，一般用於把資源文件（圖片等）拷貝到編譯目錄
from 定義要拷貝的源目錄
to 定義要拷貝到的目標目錄（基於output目錄）
webpack自帶插件
Hot Module Replacement
是webpack自帶很有用的一個插件，它允許你在修改組件代碼後，自動刷新實時預覽修改後的效果
在webpack配置文件中添加HMR插件；
plugins:[
new webpack.HotModuleReplacementPlugin()
]
PS: webpack-dev-server內部自動調用HotModuleReplacementPlugin，使用webpack-dev-server時不需要額外配置HMR
webpack.optimize.CommonsChunkPlugin
它用於提取多個入口文件的公加粗樣式共腳本部分，然後生成一個 common.js 來方便多頁面之間進行復用（webpack4已被移除）。
plugins:[
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor']
})
]
webpack.ProvidePlugin
import引入模塊後，無論你在代碼中是否使用該模塊，打包時都會打包進去，這樣就會產生大量的冗餘js，ProvidePlugin只有你在使用到此庫的時候，才會打包進去
plugins:[
//利用ProvidePlugin提供jquery模塊，可以在任意代碼中直接使用$,jQuery
new webpack.ProvidePlugin({
$:'jquery',
jQuery: 'jquery',
'window.jQuery':'jquery'
})
]
關鍵字: 文件名 瀏覽器 JavaScript
