1.webpack的概念。

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。任何形式的資源都可以視作模塊，通過 loader 的轉(zhuǎn)換。

2.webpakc的安裝。

（1）在Node.js ?用npm 全局安裝Webpack： ?npm install webpack -g

通過webpack -h 測試。

（2）進入項目目錄。通過npm init創(chuàng)建 package.json。安裝webpack依賴 npm install webpack --save-dev。

使用命令webpack + xx（需要打包的js名稱） + xx（打包后的js名稱）。使用動態(tài)表達式require綁定js文件，加載依賴。

（3）打包css ，首先需要先安裝loader ： npm install css-loader style-loader --save-dev

1.特別注意如果引用css的時候，打包需要在路徑中添加css-loader！，在運用到頁面中需要添加style-loader！。

2.使用webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'語句就不需要在路徑中引用那些loader了，在后面添加--watch進入監(jiān)視者模式，--progress 可以看到打包過程，--display-modules 列出打包的模塊，--display-reasons 列出打包的原因。

3.webpack的配置文件。

（1）簡歷項目webpack來配置文件。首先創(chuàng)建目錄。

src里面還分別創(chuàng)建script、style文件。來放置js文件跟css文件。

dist 存放打包好的js文件。

（2）系統(tǒng)會默認搜索webpack.config.js這個配置文件， 或者使用 webpack --config +xx（配置文件名）來指定配置文件。

//模塊化輸出

module.exports = {

//打包入口

entry: './src/script/main.js',

output: {

//打包文件放在哪里

path: './dist/js',

//打包文件名

filename: 'bundle.js'

}

}

在有配置文件的狀態(tài)下，只需要運行 webpack就能編譯打包。

（3）如果需要加特別的參數(shù)來輸出，需要在package.json文件里面配置。

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

//可以在這里添加你想要輸出的命令。

"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"

},

使用 npm run webpack 編譯。

（4）配置參數(shù)的詳解

1.entry 表示入口文件的路徑。它有三種寫法針對不同的情況。

1.只寫一個單一的路徑：entry： ‘./路徑/.xxx.js’’

2.寫一個數(shù)組： entry：【‘./路徑/.xxx.js’，‘./路徑/.xxx.js’’】（這個也只打包了一個文件）

3.可以寫 一個對象key 加 value的形式：注意這種寫法需要修改 output.filename值才有效果。

entry: {

page1: './page1',

page2: ['./page2','./page3'] }

2.output.filename 這里不要寫絕對路徑且不要寫路徑，只需要寫文件名。

（1）如果entry入口文件有第三種情況的寫法，需要更改filename的文件名。

（2）name 輸出跟入口文件同樣的文件名。

（3）hash 就是本次編譯打包的hash值。（兩個hash值是一樣的）

（4）chunkhash ?是系統(tǒng)的hash值，也可以理解為版本號，只有當文件修改了再打包的文件才會更新這個值。

3.插件。（更新html，因為每次打包好的js文件名是不一定的，所以html引用的js的名字不確定，所以需要插件來解決這個問題。）

1.先案例一個插件推薦網(wǎng)站。插件推薦（隨便百度的）（1）先使用命令安裝插件 npm install html-webpack-plugin --save-dev.

（2）在配置文件中引用：var htmlWebpackPlugin = require（‘html-webpack-plugin’）。

（3）在配置文件中添加一個屬性：

plugins: [

new htmlWebpackPlugin({

//如果不加參數(shù)只是生成一個新的html文件。

//設置模版

template: 'index.html',

//更改html的名字，跟更改打包文件名相同。

filename: 'index-[hash].html',

//還可以制定生成的腳本放在那個地方

inject: 'head'

})

]

context：上下文選項用來決定根目錄（既絕對路徑）的入口文件。

（4）更復雜的功能。把plugins里添加的屬性顯示到html文件中。

在html文件中寫類似js模版語言，需要用<%= %>的格式包裹起來。如果是編寫js代碼的話就不需要中間的= 號。

搜索到一個每一個屬性詳細的配置，需要的可以過來看看html-webpack-plugin ? ? ? ? 1.既然能用代碼的形式拿到數(shù)據(jù)，知道了結(jié)構(gòu)，那么換一種方式就可以用模版語言的方式引用js文件。

在html標簽里面要用 <%= htmlWebpackPlugin.options.xx(這里寫屬性) %> 另外，需要打印屬性跟值的時候加上JSON.stringify解析成字符串。

2.在output.publicPath：這里可以寫上線的地址前綴。

3.多應用的頁面處理。

（1）在entry添加多個入口文件。

（2）新建相同個數(shù)的new htmlWebpackPlugin，設置不同的文件。

（3）為了解決生成的html載入對應的js文件，可以使用兩種方法：

1.使用chunks瀏覽器傳參的方式：chunks：【‘a(chǎn)’】。

2.使用excludeChunks排除串口的方式：excludeChunks：【‘b’，‘c’】。

（4）減少http請求，把js初始化代碼直接寫到頁面中。

1.htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)獲取的值沒有publicPath值。

標簽。excludeChunks排除串口在 模塊生成也能能起到一個篩選的作用。

2.拿到這個值之后使用webpack官方給的api? compilation.assets[包裹獲取的值].source() 這樣就獲取的不是地址，而是js內(nèi)容了。

3.使用模版語言判斷引用js。

4.特別注意inject是開啟是否自動生成<script>標簽。excludeChunks排除串口在 <script>模塊生成也能能起到一個篩選的作用。

（5）loader。
模塊生成也能能起到一個篩選的作用。標簽。excludeChunks排除串口在 模塊生成也能能起到一個篩選的作用。
模塊生成也能能起到一個篩選的作用。標簽。excludeChunks排除串口在 模塊生成也能能起到一個篩選的作用。標簽。excludeChunks排除串口在 模塊生成也能能起到一個篩選的作用。

1.loader 的三種配置方式。

??? 1.loader in require 直接 在require文件的時候在路徑中添加對應的loader。

??? 2.CLI ?在編譯的的語法中添加 --module-bind + 對應的loader。

??? 3.Configuraion 在配置文件中添加一個數(shù)組，添加對于的loader。

2.Configuraion 配置步驟。

? ? 1.先在Babel安裝好babel-loader。npm install --save-dev babel-loader babel-core

? ? 2.配置presets屬性，轉(zhuǎn)換為Latest（包含es2015、2016、2017），安裝Latest插件。

? ? ? ? //配置loader

module: {

loaders: [

{

//匹配以js結(jié)尾的文件

test: /\.js$/,

//使用babel-loader

loader: 'babel',

//為了解決加載速度的問題，可以排除不要掃描的文件夾

exclude: './node_modules',

//有時候排除了也無法解決問題，那就只能指定文件夾

include: './src/',

//如果上面的兩個方法也沒效果，使用node的方法指定絕對路徑。

//1.引用node的api ，var path = require('path');

//2.exclude: path.resolve(__dirname , 'node_modules'),include: path.resolve(__dirname , 'src'),

//用query參數(shù)指定插件解析js。

query: {

//解析js的特效 安裝latest ?npm install --save-dev babel-preset-latest

presets: ['latest'] ? ? ? ? ? ? ? ? ? ? ? ? }

}

] },

3.使用配置文件loader css。

*npm 官網(wǎng) npm（1）打包自動對css做處理，安裝postcss-loader后處理器? npm install postcss-loader --save-dev

npm install autoprefixer --save-dev 添加css瀏覽器前綴。

（2）直接添加新的對象，配置。如果有css文件中import其他css，修改成css-loader?importLoaders=1就好了。

（3）安裝less npm i less ? 安裝less-loader npm i less-loader --save-dev sass同理，如果有import文件，不需要做處理。

4.使用配置文件loader 模版文件。

（1）不管是哪種模版先要下載對應的loader：npm install html-loader --save-dev。

（2）在配置文件loaders中做對應的設置。

（3）ejs 跟tpl格式是相同的。

5.圖片的配置。

（1）安裝file-loader打包圖片，不管是css還是原HTML都會打包成功，注意如果是模版打包絕對路徑?jīng)]有問題，相對路徑需要處理

（2）安裝url-loader。

{

test: /\.(jpg|png|gif)$/i,

loader: 'url-loader',

query: {

//設置一個值，如果大于這個值已原來的格式打包，小于則打包成best64的圖片。

//best64的圖片每一張都是獨立的，所以導致js、html文件變得很大，正常的圖片的好處就是會有緩存。

limit: 40000,

//路徑/ 名字/ hash/ 后綴名

name: 'assets/[name]-[hash]-[ext]'

}

}

（3）壓縮圖片image-webpack-loader 建議跟file-loader 或者 url-loader搭配使用。

{

test: /\.(jpg|png|gif)$/i,

loaders: [

//簡寫，可以把寫成一個請求的方式。

'url-loader?limit=2000&name=assets/[name]-[hash:5].[ext]',

'image-webpack-loader'

] ? ? ? ? ? ? ? ? }

還有很多其他圖片的配置，詳情見npm官網(wǎng)。