Webpack快速入門

瞭解Webpack相關

• 什麼是webpack

  • Webpack是一個模組打包器(bundler)。

  • 在Webpack看來, 前端的所有資原始檔(js/css/img/less/…)都會作為模組處理

  • 它將根據模組的依賴關係進行靜態分析，生成對應的靜態資源

• 理解Loader

  • Webpack 本身只能載入JS模組，如果要載入其他型別的檔案(模組)，就需要使用對應的loader 進行轉換/載入

  • Loader 本身也是執行在 node.js 環境中的 JavaScript 模組

  • 它本身是一個函式，接受原始檔作為引數，返回轉換的結果

  • loader 一般以 xxx-loader 的方式命名，xxx 代表了這個 loader 要做的轉換功能，比如 json-loader。

• 配置檔案(預設)

  • webpack.config.js : 是一個node模組，返回一個 json 格式的配置資訊物件

• 外掛

  • 外掛件可以完成一些loader不能完成的功能。

  • 外掛的使用一般是在 webpack 的配置資訊 plugins 選項中指定。

  • Webpack 本身內建了一些常用的外掛，還可以通過 npm 安裝第三方外掛

學習文件 :

• webpack官方入門: http://webpack.github.io/docs…

• Webpack中文指南: http://zhaoda.net/webpack-han…

你將學到:

• How to install webpack

• How to use webpack

• How to use loaders

• How to use the development server

• How to use image

初始化專案: package.json

{
  "name": "webpack_test",
  "version": "1.0.0"
} 

安裝webpack

npm install webpack@1 -g  //全域性安裝
npm install webpack@1 --save-dev  //區域性安裝

開始編譯

• 建立入口src/js/ : entry.js

  document.write("entry.js is work");

• 建立主頁面 build/: index.html

  <script type="text/javascript" src="js/build.js"></script>

• 編譯js

  webpack src/js/entry.js build/js/build.js  

• 檢視頁面效果

第二個js

• 建立第二個js: src/js/content.js

  module.exports = " <br> It works from content.js";

• 更新入口js : entry.js

  * document.write("entry.js is works.");
  * document.write(require("./content.js"));

• 編譯js:

  webpack src/js/entry.js build/js/build.js

• 檢視頁面效果

第一個載入器(loader)

• 安裝樣式的loader

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

• 建立樣式檔案: src/css/test.css

  body {
    background: red;
  }

• 更新入口js : entry.js

  + require("style-loader!css-loader!../css/test.css");
  * document.write("entry.js is works.");
  * document.write(require("./content.js"));

• 編譯js, 並檢視頁面效果

  webpack src/js/entry.js build/js/bundle.js

繫結載入器

• 更新入口js : entry.js

  - require("style-loader!css-loader!./test.css");
  + require("./test.css");

• 編譯:

  webpack src/js/entry.js build/js/bundle.js --module-bind css=style-loader!css-loader

• 檢視頁面效果

使用webpack配置檔案

• 建立webpack.config.js

  module.exports = {
    entry: "./src/js/entry.js",//入口路徑配置
    output: {//出口配置
        path: __dirname + `/build/js`,//輸出路徑
        filename: "bundle.js"//輸出檔名
    },
    module: {
      loaders: [//模組載入器配置
        { test: /.css$/, loader: "style!css"}  //所有css檔案宣告使用css-loader和style-loader載入器
      ]
    }
  };

• 編譯

  webpack
  webpack --progress   //編譯顯示進度

• 問題—每次修改模組檔案內容的重新手動打包，重新整理

• 自動編譯

  webpack --watch  //編譯並啟動監視(但需要重新整理瀏覽器)
  

• 瀏覽器自動重新整理(熱載入)—-解決手動重新整理瀏覽器問題

  npm install webpack-dev-server@1 -g
  webpack-dev-server
    訪問: http://localhost:8080/webpack-dev-server/
        ; http://localhost:8080
    !!!發現問題----訪問的是資料夾路徑而不是頁面
      devServer:{
            contentBase: `./build`,//內建伺服器動態載入頁面所在的目錄
            historyApiFallback:true,//不跳轉
            inline:true
        }
        
      contentBase : 預設webpack-dev-server為根資料夾提供內建的服務，如果其他目錄下的檔案
                    提供服務需要在此設定目錄(我們設定為build資料夾)
      historyApiFallback : 開發單頁面的時候非常有用，它依賴於H5的 history API，當
                          設定為true的時候所有的跳轉都指向index.html；
      port：可以設定埠號，不設定時候預設為 8080
      inline ： 設定為true的時候回自動重新整理(有的版本需要配合hot : true使用)
      
    webpack-dev-server
    訪問: http://localhost:8080
    
   問題：頁面沒有熱載入，自動重新整理，因為index的src引入的硬碟中的build檔案而不是webpack-dev-server伺服器記憶體中的build
  特點:
    自動編譯並重新整理介面
    不生成編譯後的檔案, 直接在記憶體中編譯處理, 並啟動伺服器執行專案

載入圖片

• 安裝依賴的loader

  npm install url-loader file-loader --save-dev
  url-loader比file-loader功能更加完善是對file-loader的上層封裝,但二者需配合使用

• 新增config中loader的配置

  { test: /.(png|jpg)$/, loader: "url-loader?limit=8192" }  //如果圖片小於limit就會進行Base64編碼

• 拷入2張圖片:

  • 小圖: img/logo.png

  • 大圖: img/big.jpg

• 定義引用圖片的樣式: test.css

  #box1{
    background-image: url(../img/logo.jpg);
    height: 200px;
    width: 200px;
  }
  #box2{
    background-image: url(../img/big.jpg);
    height: 200px;
    width: 200px;
  }

• 在頁面引用樣式或圖片: index.html

  <div id="box1"></div>
  <div id="box2"></div>

• 編譯並瀏覽

  webpack-dev-server

• 圖片打包問題

  1、圖片大於8kb的時候無法打包到js檔案中，
  2、index.html引入js的時候發現沒有打包進去的圖片路徑不對
  3、解決方法： 
      * //publicPath : `./js/`,//webpack的絕對路徑,設定服務index.html資源的路徑

配置npm script命令

"scripts": {
  "start": "webpack-dev-server",
  "build": "webpack"
}
 
npm start: 編譯執行專案
npm build: 編譯打包