Webpack教程：如何從頭開始設置 webpack 5
本文已經(jīng)過原作者 Tania Rascia 授權(quán)翻譯。
webpack 對我來說曾經(jīng)是一個怪物般存在一樣，因為它有太多太多的配置項，相反，使用像create-react-app腳手架可以很輕松創(chuàng)建項目，所以有一段時間內(nèi)，我會盡量避免使用 webpack，因為它看起來既復雜又望而卻步 ??
如果你們不習慣從頭開始設置 webpack 來使用Babel、TypeScript、Sass、React或Vue，或者不知道為什么要使用 webpack，那么這篇文章是你的最佳選擇。就像所有的事情一樣，一旦你深入學習，你會發(fā)現(xiàn)它并不是那么可怕，只有幾個主要的概念需要學習掌握。
如果你是從 webpack 4 升級到 webpack 5，這里有一些注意事項:
- webpack-dev-server命令現(xiàn)在換成webpack-serve
- file-loader、raw-loader和url-loader不是必需的，可以使用內(nèi)置的Asset Modules
- 節(jié)點 polyfill 不再可用，例如，如果遇到stream錯誤，則可以將stream-browserify包作為依賴項添加，并將{stream：'stream-browserify'}添加到webpack配置中的alias屬性。
什么是 webpack?
現(xiàn)在，大多數(shù)網(wǎng)站不再只是單單的由原生JS+純HTML編寫的，還涉及一些瀏覽器無法理解的語言，如果項目大，文件多，對應的體積就大。所以要壓縮文件和翻譯成所有瀏覽器都能理解的東西，這就是webpack的用武之地。
webpack 可以看做是模塊打包器：它做的事情是，分析你的項目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss，TypeScript等)，并將其打包為合適的格式以供瀏覽器使用。
對于開發(fā)，webpack 還提供了一個開發(fā)服務器，它可以在我們保存時動態(tài)地更新模塊和樣式。vue create和create-response-app本質(zhì)上都依賴于 webpack。
webpac k可以做很多事情，本文只是幫助大家熟悉一些主要概念并進行一些手動的配置。
安裝
首先，創(chuàng)建一個目錄webpack-tutorial，相關命令如下：
- mkdir webpack-tutorial
- cd webpack-tutorial
- npm init -y // 創(chuàng)建默認的 package.json
安裝webpack和webpack-cli：
- npm i -D webpack webpack-cli
接著，創(chuàng)建目錄 src，并在其里面創(chuàng)建 index.js，內(nèi)容如下：
- console.log('Interesting!')
基本配置
在項目的根目錄中創(chuàng)建一個webpack.config.js。
Entry
entry是配置模塊的入口，可抽象成輸入，Webpack 執(zhí)行構(gòu)建的第一步將從入口開始搜尋及遞歸解析出所有入口依賴的模塊。
entry 配置是必填的，若不填則將導致 Webpack 報錯退出。這里，我們將src/index.js做為入口點。
- const path = require('path')
- module.exports = {
- entry: {
- main: path.resolve(__dirname, './src/index.js'),
- },
- }
Output
配置 output 選項可以控制 webpack 如何向硬盤寫入編譯文件。注意，即使可以存在多個入口起點，但只指定一個輸出配置。這里指定輸出的路徑為 'dist'：
- module.exports = {
- /* ... */
- output: {
- path: path.resolve(__dirname, './dist'),
- filename: '[name].bundle.js',
- },
- }
現(xiàn)在，我們具有構(gòu)建捆綁包所需的最低配置。在package.json中，我們可以創(chuàng)建一個運行webpack命令的構(gòu)建腳本。
- "scripts": {
- "build": "webpack"
- }
現(xiàn)在可以運行它了:
- npm run build
現(xiàn)在在 dist 目錄會生成一個 main.bundle.js 文件
插件
webpack有一個插件接口，這使得它更加靈活。內(nèi)部webpack代碼和第三方擴展使用插件，有一些主要的方法幾乎每個webpack項目都會用到。
HTML 模板文件
目前，我們有一個隨機的bundle文件，但它對我們還不是很有用。如果需要使用main.bundle.js，就要借助 HTML頁面來加載這個 JS 包作為腳本。我們希望HTML文件自動引入這個生成 js 文件，所以我們將使用html-webpack-plugin創(chuàng)建一個HTML模板。
安裝一下：
- npm i -D html-webpack-plugin
在src文件夾中創(chuàng)建一個template.html文件，這里，我們自定義一個title，內(nèi)容如下：
src/template.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title><%= htmlWebpackPlugin.options.title %></title>
- </head>
- <body>
- <div id="root"></div>
- </body>
- </html>
創(chuàng)建配置的plugins屬性，然后將插件，文件名添加到輸出(index.html)，并鏈接到將基于該模板的模板文件。
- const path = require('path')
- const HtmlWebpackPlugin = require('html-webpack-plugin')
- module.exports = {
- /* ... */
- plugins: [
- new HtmlWebpackPlugin({
- title: 'webpack Boilerplate',
- template: path.resolve(__dirname, './src/template.html'), // template file
- filename: 'index.html', // output file
- }),
- ],
- }
現(xiàn)在再次運行構(gòu)建，會看到dist文件夾現(xiàn)在包含一個index.html，里面也自動引入了我們打包好的 js 文件。用瀏覽器打開 index.html，會在控制臺看到 Interesting!。
接著，在index.js中我們動態(tài)插入一些 dom 元素到頁面中，內(nèi)容如下：
- // Create heading node
- const heading = document.createElement('h1')
- heading.textContent = 'Interesting!'
- // Append heading node to the DOM
- const app = document.querySelector('#root')
- app.append(heading)
重新構(gòu)建，在進入 dist 目錄下面，用 http-server 運行 html 文件。
- http-server
可以在頁面上看到，我們注入的 "Interesting!"，還會注意到捆綁文件已縮小。
注意:在安裝HtmlWebpackPlugin后，你會看到一個DeprecationWarning，因為插件在升級到webpack 5后還沒有完全擺脫deprecation警告。
Clean
我們還需要設置clean-webpack-plugin,在每次構(gòu)建后清除dist文件夾中的所有內(nèi)容。這對于確保不遺留任何舊數(shù)據(jù)很重要。
clean-webpack-plugin-刪除/清理構(gòu)建文件夾
- const path = require('path')
- const HtmlWebpackPlugin = require('html-webpack-plugin')
- const {CleanWebpackPlugin} = require('clean-webpack-plugin')
- module.exports = {
- /* ... */
- plugins: [
- /* ... */
- new CleanWebpackPlugin(),
- ],
- }
Modules and Loaders
webpack 使用 loader 預處理一些加載的文件，如 js 文件、靜態(tài)資源(如圖像和CSS樣式)和編譯器(如TypeScript和Babel)。webpack 5也有一些內(nèi)置的資產(chǎn)加載器。
在我們的項目中，有一個HTML文件，該文件可以加載并引入一些 JS ，但實際上并沒有執(zhí)行任何操作。那么這個webpack配置要做的主要事情是什么?
- 將 JS 編譯為瀏覽器可以理解的版本
- 導入樣式并將 SCSS 編譯為 CSS
- 導入圖像和字體
- (可選)設置React或Vue
Babel (JavaScript)
Babel是一個工具，可讓使用最新的 JS 語法。
建立一個規(guī)則來檢查項目中(node_modules之外)的任何.js文件，并使用babel-loader進行轉(zhuǎn)換。Babel 還有一些其他的依賴項：
- babel-loader-使用 Babel 和 webpack 傳輸文件。
- @babel/core-將ES2015+ 轉(zhuǎn)換為向后兼容的 JavaScript
- @babel/preset-env-Babel 的智能默認設置
- @babel/plugin-proposal-class-properties-自定義 Babel 配置的示例(直接在類上使用屬性)
- npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-env @babel/plugin-proposal-class-properties
webpack.config.js
- module.exports = {
- /* ... */
- module: {
- rules: [
- // JavaScript
- {
- test: /\.js$/,
- exclude: /node_modules/,
- use: ['babel-loader'],
- },
- ],
- },
- }
如果是 TypeScript 項目，使用的是typescript-loader而不是babel-loader。
現(xiàn)在Babel已經(jīng)設置好了，但是我們的Babel插件還沒有?？梢栽趇ndex.js中添加一些新的語法來證明它還不能正常工作。
- // 創(chuàng)建沒有構(gòu)造函數(shù)的類屬性
- class Game {
- name = 'Violin Charades'
- }
- const myGame = new Game()
- // 創(chuàng)建 p 節(jié)點
- const p = document.createElement('p')
- p.textContent = `I like ${myGame.name}.`
- const heading = document.createElement('h1')
- heading.textContent = 'Interesting!'
- const app = document.querySelector('#root')
- app.append(heading, p)
要解決這個問題，只需在項目的根目錄中創(chuàng)建一個.babelrc文件?？梢允褂胮reset-env和plugin-proposal-class-properties添加更多默認值。
- {
- "presets": ["@babel/preset-env"],
- "plugins": ["@babel/plugin-proposal-class-properties"]
- }
Images
假設我們需要引用一張圖片并直接導入到 JS 文件中，這樣是無法正常工作的。為了演示，創(chuàng)建 src/ images 并向其中添加圖像，然后嘗試將其導入到index.js文件中。
src/index.js
- import example from './images/example.png'
- /* ... */
運行構(gòu)建時，再次看到錯誤：
webpack有一些內(nèi)置的asset modules ，可用于靜態(tài)資源。對于圖像類型，我們將使用asset/resource,注意，這里是一個type，而不是loader。
webpack.config.js
- module.exports = {
- /* ... */
- module: {
- rules: [
- // Images
- {
- test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
- type: 'asset/resource',
- },
- ],
- },
- }
構(gòu)建后，可以在dist文件夾查看。
字體和內(nèi)聯(lián)
webpack 還有一個asset module ，可以使用asset/inline內(nèi)聯(lián)某些數(shù)據(jù)，例如svgs和字體。
src/index.js
- import example from './images/example.svg'
- /* ... */
webpack.config.js
- module.exports = {
- /* ... */
- module: {
- rules: [
- // Fonts and SVGs
- {
- test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
- type: 'asset/inline',
- },
- ],
- },
- }
Styles
同樣的需要使用 style loader才能在腳本中執(zhí)行類似import 'file.css'的操作。
現(xiàn)在很多人都在使用CSS-in-JS、styled-components和其他工具來將樣式引入到他們的 JS 應用程序中。
當網(wǎng)站只有一個 CSS 文件，僅能夠加載一個CSS文件就足夠了。但如果想使用PostCSS，為了能在任何瀏覽器中使用所有最新的CSS特性?；蛘呦胧褂肧ass, CSS預處理器，那就需要使用其它的 loader 處理。
我想使用這三種方法——在Sass中編寫，在PostCSS中處理，以及編譯到CSS。這需要引入一些加載器和依賴項。
- sass-loader — 加載 SCSS 并編譯為CSS
- node-sass — Node Sass
- postcss-loader — 使用 PostCSS 處理 CSS
- css-loader — 解析 css import
- style-loader —— 將CSS注入到DOM中
- npm i -D sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass
就像Babel一樣，PostCSS 也需要一個配置文件 postcss.config.js，在根目錄中創(chuàng)建它，并輸入以下內(nèi)容：
postcss.config.js
- module.exports = {
- plugins: {
- 'postcss-preset-env': {
- browsers: 'last 2 versions',
- },
- },
- }
為了測試 Sass 和 PostCSS 是否正常工作，創(chuàng)建 src/styles/main.scss，并輸入以下內(nèi)容：
src/styles/main.scss
- $font-size: 1rem;
- $font-color: lch(53 105 40);
- html {
- font-size: $font-size;
- color: $font-color;
- }
現(xiàn)在，將文件導入index.js并添加四個 loader 。它們從最后編譯到第一個，因此列表中最后一個是sass-loader，因為需要編譯，然后是PostCSS，然后是CSS，最后是style-loader，它將CSS注入到DOM 中。
src/index.js
- import './styles/main.scss'
- /* ... */
webpack.config.js
- module.exports = {
- /* ... */
- module: {
- rules: [
- // CSS, PostCSS, and Sass
- {
- test: /\.(scss|css)$/,
- use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
- },
- ],
- },
- }
現(xiàn)在，重新構(gòu)建時，項目中已經(jīng)應用了Sass和PostCSS。
開發(fā)
每次進行更新時都要運行npm run build，站點越大，構(gòu)建所需的時間就越長，這樣就十分的煩瑣。為此可以為 webpack 設置兩種配置：
- 生產(chǎn)配置，用于最小化，優(yōu)化和刪除所有源映射
- 開發(fā)配置，該配置在服務器中運行webpack，每次更改都會更新，并具有源映射
開發(fā)模式下是在內(nèi)存中運行所有內(nèi)容，而不是構(gòu)建一個dist文件，需要安裝 webpack-dev-server
- npm i -D webpack-dev-server
出于演示目的，我們可以僅將開發(fā)配置添加到正在構(gòu)建的當前webpack.config.js文件中并對其進行測試。但是，我們開發(fā)一般要創(chuàng)建兩個配置文件：一個生產(chǎn)環(huán)境用的 mode: production，一個開發(fā)環(huán)境用的mode: development。
- const webpack = require('webpack')
- module.exports = {
- /* ... */
- mode: 'development',
- devServer: {
- historyApiFallback: true,
- contentBase: path.resolve(__dirname, './dist'),
- open: true,
- compress: true,
- hot: true,
- port: 8080,
- },
- plugins: [
- /* ... */
- // Only update what has changed on hot reload
- new webpack.HotModuleReplacementPlugin(),
- ],
- })
我們添加mode: development，并創(chuàng)建devServer屬性，其中，默認端口將為8080，自動打開瀏覽器窗口，并使用hot-module-placement，這需要webpack.HotModuleReplacementPlugin插件。這樣模塊執(zhí)行更新而無需完全重新加載頁面-因此，如果你更新某些樣式，則這些樣式將發(fā)生變化，并且不用重新加載整個 JS ，大大加快了開發(fā)速度。
現(xiàn)在，可以使用webpack serve命令來啟動項目。
package.json
- "scripts": {
- "start": "webpack serve"
- }
- npm start
運行此命令時，將在瀏覽器中自動彈出一個指向localhost：8080的鏈接?，F(xiàn)在，您可以更新Sass和JavaScript，并觀看其動態(tài)更新。
總結(jié)
我用 Babel，Sass，PostCSS，生產(chǎn)優(yōu)化和開發(fā)服務器創(chuàng)建了可用于生產(chǎn)的webpack 5樣板，其中包含本文的所有內(nèi)容，但會涉及更多細節(jié)。從這里，可以輕松設置React，Vue，Typescript或其他任何您想要的東西。
項目地址：webpack 5 boilerplate
看看它，擺弄它，享受它!
作者：Tania Rascia 譯者：前端小智 來源：taniarascia
原文：https://www.taniarascia.com/how-to-use-webpack/
本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉(zhuǎn)載本文請聯(lián)系公眾號。
