[Webpack並不難]使用教程（一）--- entry，devtool，output，resolve

Webpack是什麼,我就不過多介紹了，你們都有耳聞，不過仍是配張圖讓你們體會下。

個人webpack版本是 3.10.0

• 安裝Webpack能夠全局安裝和局部安裝。局部安裝的話就最好在安裝的當前目錄下運行，你硬要在在外部用webpack？那你在命令行要輸入安裝webpack位置的路徑了。

npm install --save webpack // 這是局部安裝
./node_modules/.bin/webpack --help // 局部安裝的使用要帶路徑

哇，要寫路徑，好麻煩哦，沒事，那就全局安裝吧。

npm install -g webpack

如今用webpack通常都寫好配置文件的了，webpack.config.js，那麼接下來就說這個配置文件主要怎樣寫。

module.exports = {
  devtool: '#eval-source-map', // 這個是打包的方式
  entry: './main.js',          // 入口文件。支持數組形式，將加載數組中的全部模塊，但以最後一個模塊做爲輸出，對象形式也同樣。
  output: {                    
    path: './js',              // 打包後的文件存放位置
    publicPath: '/dist/',      // 這個下面詳說
    filename: 'build.js'       // 打包後的文件名
  },
  resolve: {                   // 查找module的話從這裏開始查找，下面詳說。
    root: 'D:/webpack-test/src',
    extensions: ['.js', '.json', '.scss'],
    alias: {
        // 下面有例子。
    }
  }
};

devtool：打包方式。（官網的文檔）

devtool選項	打包速度	重建速度	是否支持生產模式
source-map	-	-	支持
eval-source-map	-	+	不支持
cheap-module-source-map	0	-	支持
cheap-module-eval-source-map	0	++	不支持
cheap-source-map	+	0	支持
cheap-eval-source-map	+	++	不支持
eval	+++	+++	不支持

從上到下,打包速度愈來愈快，開發環境通常用eval-source-map，生產環境自行斟酌咯。畢竟打包越快，打包質量也就越差。還有，不知你們發現沒，帶eval都不支持生產模式哦。

publicPath （官網的文檔）

它被用來更新內嵌到css、html文件裏的url值。

上面 publicPath: '/dist/' ,例如：

background-image:url('./test.png) // 路徑變爲'/dist/.test.png'
path: '/js' // 上面打包後的文件位置，那麼路徑變爲'/dist/js/build.js'

pubilcPath很重要。在生產模式下如「test.png」文件可能會定位到CDN上而且你的Node.js服務器多是運行在HeroKu（一個支持多種編程語言的雲平臺）上邊的。一張圖片，手動修改下咯，那若是你網站有上百張呢，那publicPath：'你服務器的ip地址'，這樣省事不少吧。

resolve （官網的文檔）

1. root：包含您的模塊的目錄（絕對路徑）。
2. extensions： 加載模塊時可忽略的擴展名。

3. alias：模塊別名定義。舉些例子：

   'Abc': '/js/x/y/z/abc.js'  
   // require('Abc'); 至關於 require('/js/x/y/z/abc.js')
   // 若是 require('Abc/index.js'), 這樣不行的。
   
   'Abc': './js/x/y/z/abc.js' 
   // 若是該值是一個相對路徑，它將相對於包含require的文件。
   // 例如：在test.js中require('Abc'), 那麼test.js和abc.js要在同目錄下的。  
     
   'Abc': '/js/store'
   // require('Abc') 就至關於 require('/js/store/index.js')
   // require('Abc/other.js') 就至關於 require('/js/store/other.js')
     
   'Abc$': '/js/store'
   // require('Abc') 就至關於 require('/js/store/index.js')
   // 後面帶有 $ ,意味着要徹底匹配 'Abc'
   // 若是 require('Abc/other.js')，由於沒徹底匹配Abc，那麼加載的是 node_modules下Abc文件夾裏的other.js！！！

---

使用教程（二）--- module.loaders