webpack文檔

1. 名詞解釋

bundle: 包

vendor ： 第三方庫

2. 整體結(jié)構(gòu)

webpack官網(wǎng)通過概念， 指南， 文檔來講解了webapck的發(fā)展和原理以及運(yùn)用，通過模塊化編程，進(jìn)行每一個模塊的依賴的注入。

2.1 概念

webpack官網(wǎng)對于概念主要是讓讀者簡單的使用和了解webpack的工作原理，分別從12個方面講述了webpack的基本使用。

1. webpack的入口起點(diǎn)(config.entry)

   1.1 單入口文件簡單寫法 entry: string

   let config = {
     entry: './src/index.js'
   }
   export default config
   

   2.2 通過對象的entry: {name: 'path'}

   let config = {
     entry: {
       main: './src/index.js';
       vendors: ['lodash', 'jquery']
     }
   }
   

   一般使用對象的形式，主要有2個用途

   • 分離第三方庫和公共模塊
   • 多頁面應(yīng)用配置

2. webpack的出口文件 (config.output)

   對于output我們需要注意2點(diǎn)，

   • path必須是絕對路徑
   • 不管配置有多少個起點(diǎn)，output只有一個

   let config = {
     output: {
       filename: 'index.js',
       path: __dirname + '/dist'
       ....
     }
   }
   

3. webpack的預(yù)處理loader(config.module)

   由于webpack把一切都當(dāng)成模塊，但是又只認(rèn)識js語法，所以在運(yùn)行之前需要把它不認(rèn)識的內(nèi)容轉(zhuǎn)換成它認(rèn)識的內(nèi)容，這個就是loader.

   entry => loader => webpack => output (中間的每一個環(huán)節(jié)可能都有plugins)

   // 通過loader把樣式轉(zhuǎn)換成字符串運(yùn)行
   let config = {
     module: {
       rules: [
         {test: /\.css$/, use: 'css-loader'},
         {test: /\.styl$/, use: ['css-loader','stylus-loader']},
       ]
     }
   }
   

4. webpack的插件(config.plugins)

   webpack的插件plugins可以處理loader處理不了的問題，它貫穿webpack的整個過程，例如： 可以全局引用jquery的情況下，就是在webpack lifecycle before之前通過plugins來全局配置。也可以在webpack運(yùn)行完后，通過插件給文件進(jìn)行壓縮。

   let config = {
     plugins: [
       new webpack.ProvidePlugin(
         {
           jquery: 'jquery',
           $: 'jquery',
           window.jquery: 'jquery'
         }
       ),
       new webpack.optimize.UglifyJsPlugin({
         compress: {warnings: false}
       })
     ]
   }
   

5. 配置

   webpack會默認(rèn)的查找根目錄下面的webpack.config.js來進(jìn)行編譯。

   也可以配置其他文件，通過命令行輸入--config

   webpack --config example.config.js
   

6. 模塊

   webapck支持nodeJs的模塊引入和ES2015等不同的模塊引入。

   import語句  // Es6
   require語句  //CommonJs
   define  // amd
   @import //引入css語句
   

   ?

   ?

   ?

7. ?