初識 webpack (一)

ouer1994發表於2019-12-31
Web

中文文件: https://webpack.docschina.org/concepts/

基於 webpack 4

1. 為什麼需要構建工具?

  1. 轉換 ES6 語法
  2. 轉換 JSX
  3. CSS 字首補全, 前處理器
  4. 壓縮混淆
  5. 圖片壓縮
  6. ...

2. 基礎用法

webpack 簡要

  • webpack 預設使用 webpack.config.js 配置檔案. 可以使用 webpack --config xxx.js 指定配置檔案.

2.1 幾個概念

  • bundle: 打包最終生成的檔案
  • chunk: 每個 chunk 是由多個 module 組成，可以通過程式碼分割成多個 chunk
  • module: webpack 中的模組（js、css、圖片等等）

3. webpack 安裝

注意: 使用 webpack 之前需要安裝 node.js

# 不推薦 全域性安裝
npm install --save-dev webpack webpack-cli
或
npm i -D webpack webpack-cli

4. webpack 核心概念

4.1 entry(指定打包入口)

  1. 單入口: 適合單頁應用. entry 的值是 字串.
  2. 多入口: 適合多頁應用. entry 的值是 物件.
module.exports = {
  // 多頁面應用
  entry: {
    index: './src/js/index.js',
    login: './src/js/login.js'
  },
  ...
  // 單頁面應用
  entry: './src/js/index.js',
}

4.2 output(指定打包輸出)

指定 打包的輸出目錄和檔名.

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  ...
}

4.3 loaders

webpack 原生值支援 js 和 json 的解析. 通過 loaders 去處理不支援的型別.

webpack 簡要

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        // 排除 node_modules 資料夾裡的 js 檔案
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          }
        }
      },
    ]
   }
}

4.4 plugins

外掛用於 bundle 檔案的優化, 資源管理和環境變數注入. 作用於整個構建過程.

webpack 簡要

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  ...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ]
}

4.5 mode(模式)

中文文件: https://webpack.docschina.org/concepts/mod...

mode 用來指定當前的構建環境: production development 和 none. 預設值為 production

webpack 簡要

本作品系原創（除文中說明外）， 採用《CC 協議》許可，轉載必須註明作者和本文連結

相關文章