一文讀懂、入門Webpack

Q1：Webpack主要用來做什麼？

A1：Webpack是一個打包模塊化 JavaScript 的工具，在 Webpack 裏一切文件皆模塊，通過 Loader 轉換文件，通過 Plugin 注入鉤子，最後輸出由多個模塊組合成的文件。Webpack 專注於構建模塊化項目。

Q2：爲什麼選擇Webpack？

A2：Web 開發的發展趨勢如下：

在 Npm Script 和 Grunt 時代，Web 開發要做的事情變多，流程複雜，自動化思想被引入，用於簡化流程；
在 Gulp 時代開始出現一些新語言用於提高開發效率，流式處理思想的出現是爲了簡化文件轉換的流程，例如將 ES6 轉換成 ES5。
在 Webpack 時代由於單頁應用的流行，一個網頁的功能和實現代碼變得龐大，Web 開發向模塊化改進。

大多數團隊在開發新項目時會採用緊跟時代的技術，這些技術幾乎都會採用“模塊化+新語言+新框架”，Webpack 可以爲這些新項目提供一站式的解決方案；
Webpack 有良好的生態鏈和維護團隊，能提供良好的開發體驗和保證質量；
Webpack 被全世界的大量 Web 開發者使用和驗證，能找到各個層面所需的教程和經驗分享。

Q3：如何安裝和使用？

A3：首先確保Node5.0及以上的環境。

本項目安裝：

# npm i -D 是 npm install --save-dev 的簡寫，是指安裝模塊並保存到 package.json 的 devDependencies
# 安裝最新穩定版
npm i -D webpack

# 安裝指定版本
npm i -D webpack@<version>

# 安裝最新體驗版本
npm i -D webpack@beta

全局安裝：

npm i -g webpack

推薦安裝Webpack到項目而不是全局，原因是可防止不同項目依賴不同版本的 Webpack 而導致衝突。

Q4：核心概念有哪些？

A4：

Entry：入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。
Module：模塊，在 Webpack 裏一切皆模塊，一個模塊對應着一個文件。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。
Chunk：代碼塊，一個 Chunk 由多個模塊組合而成，用於代碼合併與分割。
Loader：模塊轉換器，用於把模塊原內容按照需求轉換成新內容。
Plugin：擴展插件，在 Webpack 構建流程中的特定時機注入擴展邏輯來改變構建結果或做你想要的事情。
Output：輸出結果，在 Webpack 經過一系列處理並得出最終想要的代碼後輸出結果。

Q5：常見配置有哪些？

A5：Entry、Output、Module、Resolve、Plugins、DevServer。整體配置實例如下：

const path = require('path');

module.exports = {
  // entry 表示 入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。
  // 類型可以是 string | object | array   
  entry: './app/entry', // 只有1個入口，入口只有1個文件
  entry: ['./app/entry1', './app/entry2'], // 只有1個入口，入口有2個文件
  entry: { // 有2個入口
    a: './app/entry-a',
    b: ['./app/entry-b1', './app/entry-b2']
  },

  // 如何輸出結果：在 Webpack 經過一系列處理後，如何輸出最終想要的代碼。
  output: {
    // 輸出文件存放的目錄，必須是 string 類型的絕對路徑。
    path: path.resolve(__dirname, 'dist'),

    // 輸出文件的名稱
    filename: 'bundle.js', // 完整的名稱
    filename: '[name].js', // 當配置了多個 entry 時，通過名稱模版爲不同的 entry 生成不同的文件名稱
    filename: '[chunkhash].js', // 根據文件內容 hash 值生成文件名稱，用於瀏覽器長時間緩存文件

    // 發佈到線上的所有資源的 URL 前綴，string 類型
    publicPath: '/assets/', // 放到指定目錄下
    publicPath: '', // 放到根目錄下
    publicPath: 'https://cdn.example.com/', // 放到 CDN 上去

    // 導出庫的名稱，string 類型
    // 不填它時，默認輸出格式是匿名的立即執行函數
    library: 'MyLibrary',

    // 導出庫的類型，枚舉類型，默認是 var
    // 可以是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ，
    libraryTarget: 'umd', 

    // 是否包含有用的文件路徑信息到生成的代碼裏去，boolean 類型
    pathinfo: true, 

    // 附加 Chunk 的文件名稱
    chunkFilename: '[id].js',
    chunkFilename: '[chunkhash].js',

    // JSONP 異步加載資源時的回調函數名稱，需要和服務端搭配使用
    jsonpFunction: 'myWebpackJsonp',

    // 生成的 Source Map 文件名稱
    sourceMapFilename: '[file].map',

    // 瀏覽器開發者工具裏顯示的源碼模塊名稱
    devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',

    // 異步加載跨域的資源時使用的方式
    crossOriginLoading: 'use-credentials',
    crossOriginLoading: 'anonymous',
    crossOriginLoading: false,
  },

  // 配置模塊相關
  module: {
    rules: [ // 配置 Loader
      {  
        test: /\.jsx?$/, // 正則匹配命中要使用 Loader 的文件
        include: [ // 只會命中這裏面的文件
          path.resolve(__dirname, 'app')
        ],
        exclude: [ // 忽略這裏面的文件
          path.resolve(__dirname, 'app/demo-files')
        ],
        use: [ // 使用那些 Loader，有先後次序，從後往前執行
          'style-loader', // 直接使用 Loader 的名稱
          {
            loader: 'css-loader',      
            options: { // 給 html-loader 傳一些參數
            }
          }
        ]
      },
    ],
    noParse: [ // 不用解析和處理的模塊
      /special-library\.js$/  // 用正則匹配
    ],
  },

  // 配置插件
  plugins: [
  ],

  // 配置尋找模塊的規則
  resolve: { 
    modules: [ // 尋找模塊的根目錄，array 類型，默認以 node_modules 爲根目錄
      'node_modules',
      path.resolve(__dirname, 'app')
    ],
    extensions: ['.js', '.json', '.jsx', '.css'], // 模塊的後綴名
    alias: { // 模塊別名配置，用於映射模塊
       // 把 'module' 映射 'new-module'，同樣的 'module/path/file' 也會被映射成 'new-module/path/file'
      'module': 'new-module',
      // 使用結尾符號 $ 後，把 'only-module' 映射成 'new-module'，
      // 但是不像上面的，'module/path/file' 不會被映射成 'new-module/path/file'
      'only-module$': 'new-module', 
    },
    alias: [ // alias 還支持使用數組來更詳細的配置
      {
        name: 'module', // 老的模塊
        alias: 'new-module', // 新的模塊
        // 是否是隻映射模塊，如果是 true 只有 'module' 會被映射，如果是 false 'module/inner/path' 也會被映射
        onlyModule: true, 
      }
    ],
    symlinks: true, // 是否跟隨文件軟鏈接去搜尋模塊的路徑
    descriptionFiles: ['package.json'], // 模塊的描述文件
    mainFields: ['main'], // 模塊的描述文件裏的描述入口的文件的字段名稱
    enforceExtension: false, // 是否強制導入語句必須要寫明文件後綴
  },

  // 輸出文件性能檢查配置
  performance: { 
    hints: 'warning', // 有性能問題時輸出警告
    hints: 'error', // 有性能問題時輸出錯誤
    hints: false, // 關閉性能檢查
    maxAssetSize: 200000, // 最大文件大小 (單位 bytes)
    maxEntrypointSize: 400000, // 最大入口文件大小 (單位 bytes)
    assetFilter: function(assetFilename) { // 過濾要檢查的文件
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },

  devtool: 'source-map', // 配置 source-map 類型

  context: __dirname, // Webpack 使用的根目錄，string 類型必須是絕對路徑

  // 配置輸出代碼的運行環境
  target: 'web', // 瀏覽器，默認
  target: 'webworker', // WebWorker
  target: 'node', // Node.js，使用 `require` 語句加載 Chunk 代碼
  target: 'async-node', // Node.js，異步加載 Chunk 代碼
  target: 'node-webkit', // nw.js
  target: 'electron-main', // electron, 主線程
  target: 'electron-renderer', // electron, 渲染線程

  externals: { // 使用來自 JavaScript 運行環境提供的全局變量
    jquery: 'jQuery'
  },

  stats: { // 控制檯輸出日誌控制
    assets: true,
    colors: true,
    errors: true,
    errorDetails: true,
    hash: true,
  },

  devServer: { // DevServer 相關的配置
    proxy: { // 代理到後端服務接口
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // 配置 DevServer HTTP 服務器的文件根目錄
    compress: true, // 是否開啓 gzip 壓縮
    historyApiFallback: true, // 是否開發 HTML5 History API 網頁
    hot: true, // 是否開啓模塊熱替換功能
    https: false, // 是否開啓 HTTPS 模式
    },

    profile: true, // 是否捕捉 Webpack 構建的性能信息，用於分析什麼原因導致構建性能不佳

    cache: false, // 是否啓用緩存提升構建速度

    watch: true, // 是否開始
    watchOptions: { // 監聽模式選項
    // 不監聽的文件或文件夾，支持正則匹配。默認爲空
    ignored: /node_modules/,
    // 監聽到變化發生後會等300ms再去執行動作，防止文件更新太快導致重新編譯頻率太高
    // 默認爲300ms 
    aggregateTimeout: 300,
    // 判斷文件是否發生變化是不停的去詢問系統指定文件有沒有變化，默認每隔1000毫秒詢問一次
    poll: 1000
  },
}

上述實例添加至項目根目錄，文件命名webpack.config.js

一文讀懂、入門Webpack

35K*14 薪，入職了！這公司只要不裁員，我能一直呆下去！

一文讀懂、入門Webpack

JavaScript對象中的訪問器屬性

微信小程序中動態設置TabBar並解決閃動問題

如何實現微信小程序之間跳轉

微信小程序模板消息定點推送開發流程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結