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/tutorials/getting-started/
  • Webpack中文指南: http://zhaoda.net/webpack-handbook/index.html
• 你將學到:
  • 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

  • 圖片打包問題
    一、圖片大於8kb的時候沒法打包到js文件中， 二、index.html引入js的時候發現沒有打包進去的圖片路徑不對 三、解決方法： * //publicPath : './js/',//webpack的絕對路徑,設置服務index.html資源的路徑

• 配置npm script命令

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  }
  
  npm start: 編譯運行項目
  npm build: 編譯打包