為什么需要構(gòu)建工具？

瀏覽器的支持情況尚不統(tǒng)一

使用構(gòu)建工具可以幫助我們

1.轉(zhuǎn)換ES6語法
2.轉(zhuǎn)換JSX
3.css前綴補全/預(yù)處理器
4.壓縮混淆
5.代碼、圖片、文字等資源壓縮

走進webpack

搭建環(huán)境

1.安裝 npm
2.安裝 webpack 與 webpack-cli

npm install webpack webpack-cli --save-dev

3.創(chuàng)建空目錄
4.創(chuàng)建package.json

npm init -y

開始第一個webpack項目

webpack 默認配置文件：webpack.config.js

可以通過 webpack --config 指定配置?件

webpack 構(gòu)建啟動命令

// package.json
{
  "scripts": {
    "build": "webpack" 
  },
}

scripts 腳本中定義了 "build": "webpack" ，啟動命令為 build

npm run build

看個栗子

// webpack.config.js
module.exports = {
    entry: './src/index.js',  //  ??
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    }, // 出口
    mode: 'production',   // 環(huán)境
    module: {
        rules: [{   //  loader
            test: /\.txt$/,
            use: 'raw-loader'
        }]
    },
    plugins: [       //  插件
        new HtmlwebpackPlugin({
            template: './src/index.html'
        })
    ]
};

entry,output,mode,loader,plugins 是 webpack 核心概念

入口【entry】

入口起點(entry point)指示 webpack 應(yīng)該使用哪個模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。
每個依賴項隨即被處理，最后輸出到稱之為 bundles 的文件中，我們將在下一章節(jié)詳細討論這個過程。
可以通過在 webpack 配置中配置 entry 屬性，來指定一個入口起點（或多個入口起點）。默認值為 ./src。

單入口

module.exports = {
  entry: './path/to/my/entry/file.js'
};

多入口

module.exports = {
  entry: {
        a: './src/a.js',
        b: './src/b.js'
    },
};

根據(jù)應(yīng)用程序的特定需求，可以以多種方式配置 entry 屬性，單入口為字符串，多入口為對象

出口【output】

output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles，以及如何命名這些文件，默認值為 ./dist?；旧?，整個應(yīng)用程序結(jié)構(gòu)，都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個 output 字段，來配置這些處理過程：

單入口

const path = require('path')
module.exports = {
  output: {
    filename: 'bundle.js’,
    path: path.join(__dirname, 'dist'),
  }
};

多入口

const path = require('path')
module.exports = {
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist'),
  }
};

多入口通過占位符確保文件名稱的唯一

在上面的示例中，我們通過 output.filename 和 output.path 屬性，來告訴 webpack bundle 的名稱，以及我們想要 bundle 生成(emit)到哪里?？赡苣阆胍私庠诖a最上面導(dǎo)入的 path 模塊是什么，它是一個 Node.js 核心模塊，用于操作文件路徑

output 屬性還有更多可配置的特性，如果你想要了解更多關(guān)于 output 屬性的概念，你可以通過閱讀webpack來了解更多。

loader

loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進行處理。
本質(zhì)上，webpack loader 將所有類型的文件，轉(zhuǎn)換為應(yīng)用程序的依賴圖（和最終的 bundle）可以直接引用的模塊

注意，loader 能夠 import 導(dǎo)入任何類型的模塊（例如 .css 文件），這是 webpack 特有的功能，其他打包程序或任務(wù)執(zhí)行器的可能并不支持。我們認為這種語言擴展是有很必要的，因為這可以使開發(fā)人員創(chuàng)建出更準確的依賴關(guān)系圖。

在 webpack 的配置中 loader 有兩個參數(shù)：
1.test 屬性，用于標識出應(yīng)該被對應(yīng)的 loader 進行轉(zhuǎn)換的某個或某些文件。
2.use 屬性，表示進行轉(zhuǎn)換時，應(yīng)該使用哪個 loader

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

“嘿，webpack 編譯器，當(dāng)你碰到「在 require()/import 語句中被解析為 '.txt' 的路徑」時，在你對它打包之前，先使用 raw-loader 轉(zhuǎn)換一下?！?/p>

插件【plugins】

想要使用一個插件，你只需要 require() 它，然后把它添加到 plugins 數(shù)組中。多數(shù)插件可以通過選項(option)自定義。你也可以在一個配置文件中因為不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創(chuàng)建它的一個實例

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用于訪問內(nèi)置插件

const config = {
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

webpack 提供許多開箱可用的插件！查閱我們的插件列表獲取更多信息。

模式

通過選擇 development 或 production 之中的一個，來設(shè)置 mode 參數(shù)，你可以啟用相應(yīng)模式下的 webpack 內(nèi)置的優(yōu)化

module.exports = {
  mode: 'production'
};

模式的使用可以參照 我的另一篇文章 vue-cli 3 webpack多環(huán)境打包

以上就是本章的全部內(nèi)容