一步一步教你webpack打包

webpack是一個現代Javascript應用程序的模塊打包器（module
bundler）它會分析目錄結構，找到js模塊（包括瀏覽器不能直接識別的代碼，typescript
sass等），打包成合適的格式供瀏覽器訪問。下面將從核心、安裝、使用等方面來說述。

1、核心

1. 一切皆模塊： 正如js文件能夠是一個「模塊（module）」同樣，其餘的（如css、image或html）文件也可視做模 塊。所以，你能夠require('myJSfile.js')亦能夠require('myCSSfile.css')。這意味着咱們能夠將事物（業務）分割成更小的易於管理的片斷，從而達到重複利用等的目的。
2. 按需加載： 傳統的模塊打包工具（module bundlers）最終將全部的模塊編譯生成一個龐大的bundle.js文件。可是在真實的app裏邊，「bundle.js」文件可能有10M到15M之大可能會致使應用一直處於加載中狀態。所以Webpack使用許多特性來分割代碼而後生成多個「bundle」文件，並且異步加載部分代碼以實現按需加載。

二.安裝

• 1.安裝node.js（在node官網下載便可）。
• 2.安裝webpack: npm run webpack -g（tips:能夠用webpack -h來驗證是否安裝成功）。

三.使用

• 1.建立工做目錄；
• 2.npm init（建立package.json文件） tips:npm init了以後默認會建立一個項目依賴的package.json文件
• 3.npm install webpack --save-dev tips:npm install了以後會安裝一些項目依賴的包在node_modules文件夾內。
• 4.建立一個靜態頁（index.html）及入口文件（app.js）
• 5.執行命令：webpack app.js bundle.js
  
  【tips】能夠看到執行該命令以後，生成了一個bundle.js文件。以後再跟你們解釋文件內部關聯

三.添加模塊

• 1.被引用的文件：

  module.exports='';

• 2.引用文件：

  var module = require("./module.js")
  import module from ("./module.js")

• 3.新建hello.js world.js；

  
  

• 4.在app.js中引用這兩個js；

  

• 5.瀏覽器預覽效果：

  

四.擴展

• 每次，咱們都須要指定兩個文件來打包很不方便，而且每次文件有修改須要手動在從新打包也比較崩潰
  將webpack寫入package.json來擴展命令直接用npm webpack便可運行命令

  --watch 自動更新
    --progress 顯示打包進度
    --display-modules 列出打包模塊
    --display-reasons 列出打包緣由
    --p 壓縮混淆腳本

• 添加完上面的配置以後，文件一有修改即可以自動更新，而且展現進度等。 固然，這裏須要指定打包的入口和輸出，具體的指定規則往下看～

五.核心概念

1.入口(entry) :使用哪一個模塊來構建內部依賴圖的開始
2.輸出(output) :在哪裏輸出它所建立的bundles及命名規則
3.loader :能夠促使webpack額外地處理非javascript文件
4.插件(plugins) :執行範圍更廣的任務，如：打包優化和壓縮等

咱們能夠新建webpack.config.js來制定以上概念。接下來一項一項來解釋。

• 1entry（以下圖所示，分爲單入口、多入口、混合入口）

  

• 2輸出
  
  【tips】這裏須要注意的用__dirname須要引用node自帶的path
  
  【tips】filename中的[name]會對應入口中的path參數，沒有默認是main。文件會被打包到pach+filename下。
  由於在配置文件裏面已經指定了入口文件及輸出，所以，咱們不須要再在命令中指定入口和出口了，能夠利用四中的npm run。 webpack來實驗下：
  
  運行後能夠看到生成了main.package.js文件，一共打包了三個文件。
  【tips】特別值得注意的是，在被打包文件最開始的位置有[0],[1],[2]的標示，這是文件的id分配，這是webpack打包的核心。咱們接下來看下main.package.js文件，這裏打包完的文件能夠經過id值來引用對應的js文件。
  
  【添加css】接下來咱們給頁面添加一點樣式
  

  npm run webpack以後能夠發現如下報錯：
  【tips】這個是由於webpack只能處理js文件，若是須要處理css 圖片等文件須要安裝對應的loader

• 3 loader（將程序資源文件進行轉換，是nodejs的函數 ）
  第一步：安裝loader:

  npm install style-loader css-loader —save-dev npm install less-loader —save-dev

  第二步：使用loader:

  1.引用模塊時添加 `require("!style-loader!css-loader!./style.css")` 
   2.命令行 `webpack entry.js bundle.js --module-bind ‘css=style-loader!css-loader’`
   3.配置文件 `module:{ loaders:[ { test:/\.css$/, loaders:['style-loader','css-loader']   //loader:   'style-loader!css-loader' } ] }`

  這裏推薦在配置文件修改配置，就不用在文件或者命令行中指定比較方便
  
  

  經常使用loader

  npm install babel-loader bable-core —save-dev 
    npm install babel-preset —save-dev 
    npm install html-loader —save-dev 
    npm install file-loader —save-dev

  步驟總結：

  a.安裝對應loader (npm install xxx —save-dev)  
  b.修改配置文件（module）

  常見loader配置：

  

• 4經常使用插件

  webpack.BannerPlugin - banner註釋 
       htmlWebpackPlugin - 關聯文件 
       CommonsChunkPlugin - 按需加載 
       ExtractTextWebpackPlugin - 分離css
  
  這裏須要特別提到的是關聯文件的插件，在平常項目中咱們通常會有模板。

  在模板文件中，咱們不須要關注css，不須要關注js，只須要寫好對應的html模板。

  4.1咱們在配置文件中寫好plugins，
  4.2執行打包以後，就能夠在輸出文件中看到對應的js等等
  4.3這裏須要特別注意的是這個js的文件能夠經過配置文件publicPath來配置。你們能夠翻到最前面查看該屬性。 固然了，也能夠利用banner註釋插件來添加註釋：

六.按需加載

• 利用require.ensure來實現按需加載。
  
• 在打包的時候能夠看到打包了兩個文件
  
• 頁面載入是是不會加載0.package.js的，只有按鈕點擊時纔會實時去加載該js