webpack篇，結合理論與實際，加以透徹分析！

Webpack篇

開始着手項目打包的一些東西，還不是特別懂，一邊學習，一邊作筆記好啦。

1.webpack的概念。
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。任何形式的資源均可以視做模塊，經過 loader 的轉換。
2.webpakc的安裝。
（1）在Node.js  用npm 全局安裝Webpack：  npm install webpack -g
         經過webpack -h 測試。

（2）進入項目目錄。經過npm init建立 package.json。安裝webpack依賴 npm install webpack --save-dev。
         使用命令webpack + xx（須要打包的js名稱） + xx（打包後的js名稱）。使用動態表達式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進入監視者模式，--progress 能夠看到打包過程，--display-modules 列出打包的模塊，--display-reasons 列出打包的緣由。

3.webpack的配置文件。
（1）簡歷項目webpack來配置文件。首先建立目錄。

src裏面還分別建立script、style文件。來放置js文件跟css文件。
dist 存放打包好的js文件。
（2）系統會默認搜索webpack.config.js這個配置文件， 或者使用 webpack --config +xx（配置文件名）來指定配置文件。

//模塊化輸出

module.exports = {

//打包入口

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

 output: {

  //打包文件放在哪裏

  path: './dist/js',

  //打包文件名

  filename: 'bundle.js'

 }

}

在有配置文件的狀態下，只須要運行 webpack就能編譯打包。
（3）若是須要加特別的參數來輸出，須要在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）配置參數的詳解
1.entry 表示入口文件的路徑。它有三種寫法針對不一樣的狀況。
         1.只寫一個單一的路徑：entry： ‘./路徑/.xxx.js’’
         2.寫一個數組： 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  是系統的hash值，也能夠理解爲版本號，只有當文件修改了再打包的文件纔會更新這個值。

3.插件。（更新html，由於每次打包好的js文件名是不必定的，因此html引用的js的名字不肯定，因此須要插件來解決這個問題。）
1.先案例一個插件推薦網站。插件推薦（隨便百度的）（1）先使用命令安裝插件 npm install html-webpack-plugin --save-dev.
（2）在配置文件中引用：var htmlWebpackPlugin = require（‘html-webpack-plugin’）。
（3）在配置文件中添加一個屬性：

plugins: [

  new htmlWebpackPlugin({

  //若是不加參數只是生成一個新的html文件。

  //設置模版

  template: 'index.html',

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

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

  //還能夠制定生成的腳本放在那個地方

  inject: 'head'

  })

 ]

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

（4）更復雜的功能。把plugins裏添加的屬性顯示到html文件中。
         在html文件中寫相似js模版語言，須要用<%= %>的格式包裹起來。若是是編寫js代碼的話就不須要中間的= 號。
         搜索到一個每個屬性詳細的配置，須要的能夠過來看看html-webpack-plugin         1.既然能用代碼的形式拿到數據，知道告終構，那麼換一種方式就能夠用模版語言的方式引用js文件。
            在html標籤裏面要用 <%= htmlWebpackPlugin.options.xx(這裏寫屬性) %> 另外，須要打印屬性跟值的時候加上JSON.stringify解析成字符串。
         2.在output.publicPath：這裏能夠寫上線的地址前綴。
         3.多應用的頁面處理。
           （1）在entry添加多個入口文件。
           （2）新建相同個數的new htmlWebpackPlugin，設置不一樣的文件。
           （3）爲了解決生成的html載入對應的js文件，可使用兩種方法：
                     1.使用chunks瀏覽器傳參的方式：chunks：【‘a’】。
                     2.使用excludeChunks排除串口的方式：excludeChunks：【‘b’，‘c’】。
           （4）減小http請求，把js初始化代碼直接寫到頁面中。
                   1.htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)獲取的值沒有publicPath值。
                   2.拿到這個值以後使用webpack官方給的api  compilation.assets[包裹獲取的值].source() 這樣就獲取的不是地址，而是js內容了。
                   3.使用模版語言判斷引用js。
                   4.特別注意inject是開啓是否自動生成<script>標籤。excludeChunks排除串口在 <script>模塊生成也能能起到一個篩選的做用。

（5）loader。
1.loader 的三種配置方式。
        1.loader in require 直接 在require文件的時候在路徑中添加對應的loader。
        2.CLI  在編譯的的語法中添加 --module-bind + 對應的loader。
        3.Configuraion 在配置文件中添加一個數組，添加對於的loader。
2.Configuraion 配置步驟。
1.先在Babel安裝好babel-loader。npm install --save-dev babel-loader babel-core
2.配置presets屬性，轉換爲Latest（包含es2015、2016、2017），安裝Latest插件。

//配置loader

 module: {

  loaders: [

  {

  //匹配以js結尾的文件

  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參數指定插件解析js。

  query: {

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

  presets: ['latest']

  }

  }

  ]

 },

3.使用配置文件loader css。
*npm 官網 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都會打包成功，注意若是是模版打包絕對路徑沒有問題，相對路徑須要處理<img src="${ require('../../assets/head.jpg') }">
（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官網。