webapck基礎隨手記

標籤：需要   運行環境   bundle   目的   query   基礎   源檔案   三種方式   相對路徑   

1、webpack main.js main.bundle.js ;　將main.js打包成main.bundle.js;     Hash:本次打包的雜湊值     Version：本次打包所使用的webpack的版本。     Time：本次打包所花費的時間     Asset：打包產生的檔案；     Chunks：打包的分塊；     Chunk Names:本次打包的塊名稱。2、除js檔案的引用外，其他類型的檔案類型在require時必須指定相應的loader；     css-loader:使webpack能夠處理.css的檔案；     style-loader:將css-loader處理的css檔案插入到頁面當中。3、webpack --config webpack.dev.config.js 指定打包的設定檔。4、自動替換html檔案裡的js引用路徑：     使用外掛程式： html-webpack-plugin     npm 安裝外掛程式——在plugins中調用。     參數：template：指定html檔案的模板；               filename：指定組建檔案的名稱；支援[hash]預留位置。               inject：指定插入指令檔的位置：在‘head‘還是‘body‘中。               minify：對檔案進行壓縮。                       removeComments：true　//刪除注釋                    collapseWhitespace：true    //刪除標籤之間的空白空格               chunks：指定需要載入的chunk檔案。               excluedChunks：指定不載入某些 chunk檔案。5、使用bable處理js檔案。     直接在webapck-config.js設定檔中指定處理js檔案的loader為bable-loader；      最好指定：exclued:‘絕對路徑‘：不處理某些目錄的js檔案。                      inclued:‘ 絕對路徑 ‘：只處理某些目錄的js檔案。     參考：http://babeljs.io/docs/setup/#installation     配置bable參數的三種方式：          在webpack-config.js的loader裡，指定bable的query參數。          在項目根目錄添加.babelrc設定檔。          在項目的package.json裡指定bable的配置參數。6、 絕對路徑 ：關於nodejs裡的path:     var path = require(‘path‘);      path.resolve(__dirname,‘src‘);          // resolve：解析　 __dirname：當前運行環境的目錄7、使用postcss處理css檔案：     https://www.npmjs.com/package/postcss-loader8、處理模板檔案：9、處理圖片檔案：     CSS裡的背景圖片： 指定loader：file-loader，圖片使用源檔案的相對路徑。     模板檔案中的img標籤：不會被loader自動處理。需要用requier的方式。               例：<img src="${require(‘../images/bg.jpg‘)}">     根index.html裡的img標籤： 指定loader：file-loader，圖片使用源檔案的相對路徑。     關於file-loader的用法：https://www.npmjs.com/package/file-loader     關於url-loader：與file-loader用法一致，但可以指定limit參數。          當大於設定的limit時會直接調用file-loader處理，          當檔案小於設定的limit時，會把圖片或檔案轉為base64編碼的形式。（不再是URL）     關於image-webapck-loader：壓縮圖片。          使用方法：https://www.npmjs.com/package/image-webpack-loader10、webpack-config.js設定檔：     context：預設為執行指令碼的檔案目錄。 

webapck基礎隨手記