webpack教程：如何從頭開始設置 webpack 5

時間 2020-11-19

標籤 css html 前端 vue node react webpack git github web 欄目 CSS 简体版

原文原文鏈接

做者：Tania Rascia
譯者：前端小智
來源：taniarascia

點贊再看，養成習慣
本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。css

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。html

github 地址：https://github.com/qq44924588...前端

webpack 對我來講曾經是一個怪物般存在同樣，由於它有太多太多的配置項，相反，使用像create-react-app腳手架能夠很輕鬆建立項目，因此有一段時間內，我會盡可能避免使用 webpack，由於它看起來既複雜又望而卻步 😊vue

若是大家不習慣從頭開始設置 webpack 來使用Babel、TypeScript、Sass、React或Vue，或者不知道爲何要使用 webpack，那麼這篇文章是你的最佳選擇。就像全部的事情同樣，一旦你深刻學習，你會發現它並非那麼可怕，只有幾個主要的概念須要學習掌握。node

若是你是從 webpack 4 升級到 webpack 5，這裏有一些注意事項:react

webpack-dev-server命令如今換成webpack-serve
file-loader、raw-loader和url-loader不是必需的，可使用內置的Asset Modules
節點 polyfill 再也不可用，例如，若是遇到stream錯誤，則能夠將stream-browserify包做爲依賴項添加，並將{stream：'stream-browserify'}添加到webpack配置中的alias屬性。

什麼是 webpack？

如今，大多數網站再也不只是單單的由原生JS+純HTML編寫的，還涉及一些瀏覽器沒法理解的語言，若是項目大，文件多，對應的體積就大。因此要壓縮文件和翻譯成全部瀏覽器都能理解的東西，這就是webpack的用武之地。webpack

webpack 能夠看作是模塊打包器：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。git

對於開發，webpack 還提供了一個開發服務器，它能夠在咱們保存時動態地更新模塊和樣式。vue create和create-response-app本質上都依賴於 webpack。github

webpac k能夠作不少事情，本文只是幫助你們熟悉一些主要概念並進行一些手動的配置。web

安裝

首先，建立一個目錄webpack-tutorial，相關命令以下：

mkdir webpack-tutorial
cd webpack-tutorial
npm init -y  // 建立默認的 package.json

安裝webpack和webpack-cli：

npm i -D webpack webpack-cli

接着，建立目錄 src，並在其裏面建立 index.js，內容以下：

console.log('Interesting!')

基本配置

在項目的根目錄中建立一個webpack.config.js。

Entry

entry是配置模塊的入口，可抽象成輸入，Webpack 執行構建的第一步將從入口開始搜尋及遞歸解析出全部入口依賴的模塊。

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',
  },
}

如今，咱們具備構建捆綁包所需的最低配置。在package.json中，咱們能夠建立一個運行webpack命令的構建腳本。

"scripts": {
  "build": "webpack"
}

如今能夠運行它了:

npm run build

如今在 dist 目錄會生成一個 main.bundle.js 文件

插件

webpack有一個插件接口，這使得它更加靈活。內部webpack代碼和第三方擴展使用插件，有一些主要的方法幾乎每一個webpack項目都會用到。

HTML 模板文件

目前，咱們有一個隨機的bundle文件，但它對咱們還不是頗有用。若是須要使用main.bundle.js，就要藉助 HTML頁面來加載這個 JS 包做爲腳本。咱們但願HTML文件自動引入這個生成 js 文件，因此咱們將使用html-webpack-plugin建立一個HTML模板。

安裝一下：

npm i -D html-webpack-plugin

在src文件夾中建立一個template.html文件，這裏，咱們自定義一個title，內容以下：

src/template.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

建立配置的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
    }),
  ],
}

如今再次運行構建，會看到dist文件夾如今包含一個index.html，裏面也自動引入了咱們打包好的 js 文件。用瀏覽器打開 index.html，會在控制檯看到 Interesting!。

接着，在index.js中咱們動態插入一些 dom 元素到頁面中，內容以下：

// 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)

從新構建，在進入 dist 目錄下面，用 http-server 運行 html 文件。

http-server

能夠在頁面上看到，咱們注入的 "Interesting!"，還會注意到捆綁文件已縮小。

注意:在安裝 HtmlWebpackPlugin後，你會看到一個 DeprecationWarning，由於插件在升級到webpack 5後尚未徹底擺脫 deprecation警告。

Clean

咱們還須要設置clean-webpack-plugin,在每次構建後清除dist文件夾中的全部內容。這對於確保不遺留任何舊數據很重要。

clean-webpack-plugin-刪除/清理構建文件夾

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 文件、靜態資源(如圖像和CSS樣式)和編譯器(如TypeScript和Babel)。webpack 5也有一些內置的資產加載器。

在咱們的項目中，有一個HTML文件，該文件能夠加載並引入一些 JS ，但實際上並無執行任何操做。那麼這個webpack配置要作的主要事情是什麼？

將 JS 編譯爲瀏覽器能夠理解的版本
導入樣式並將 SCSS 編譯爲 CSS
導入圖像和字體
（可選）設置React或Vue

Babel (JavaScript)

Babel是一個工具，可以讓使用最新的 JS 語法。

創建一個規則來檢查項目中（node_modules以外）的任何.js文件，並使用babel-loader進行轉換。 Babel 還有一些其餘的依賴項：

babel-loader-使用 Babel 和 webpack 傳輸文件。
@babel/core-將ES2015+ 轉換爲向後兼容的 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。

如今Babel已經設置好了，可是咱們的Babel插件尚未。能夠在index.js中添加一些新的語法來證實它還不能正常工做。

// 建立沒有構造函數的類屬性
class Game {
  name = 'Violin Charades'
}
const myGame = new Game()
// 建立 p 節點
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)

要解決這個問題，只需在項目的根目錄中建立一個.babelrc文件。可使用preset-env和plugin-proposal-class-properties添加更多默認值。

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

如今運行npm run build 一切準備就緒。

Images

假設咱們須要引用一張圖片並直接導入到 JS 文件中，這樣是沒法正常工做的。爲了演示，建立 src/ images 並向其中添加圖像，而後嘗試將其導入到index.js文件中。

src/index.js

import example from './images/example.png'

/* ... */

運行構建時，再次看到錯誤：

webpack有一些內置的asset modules ，可用於靜態資源。對於圖像類型，咱們將使用asset/resource,注意，這裏是一個type，而不是loader。

webpack.config.js

module.exports = {
  /* ... */
  module: {
    rules: [
      // Images
      {
        test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
        type: 'asset/resource',
      },
    ],
  },
}

構建後，能夠在dist文件夾查看。

字體和內聯

webpack 還有一個asset module ，可使用asset/inline內聯某些數據，例如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才能在腳本中執行相似import 'file.css'的操做。

如今不少人都在使用CSS-in-JS、styled-components和其餘工具來將樣式引入到他們的 JS 應用程序中。

當網站只有一個 CSS 文件，僅可以加載一個CSS文件就足夠了。但若是想使用PostCSS，爲了能在任何瀏覽器中使用全部最新的CSS特性。或者想使用Sass, 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，在根目錄中建立它，並輸入如下內容：

postcss.config.js

module.exports = {
  plugins: {
    'postcss-preset-env': {
      browsers: 'last 2 versions',
    },
  },
}

爲了測試 Sass 和 PostCSS 是否正常工做，建立 src/styles/main.scss，並輸入如下內容：

src/styles/main.scss

$font-size: 1rem;
$font-color: lch(53 105 40);

html {
  font-size: $font-size;
  color: $font-color;
}

如今，將文件導入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'],
      },
    ],
  },
}

如今，從新構建時，項目中已經應用了Sass和PostCSS。

開發

每次進行更新時都要運行npm run build，站點越大，構建所需的時間就越長，這樣就十分的煩瑣。爲此能夠爲 webpack 設置兩種配置：

生產配置，用於最小化，優化和刪除全部源映射
開發配置，該配置在服務器中運行webpack，每次更改都會更新，並具備源映射

開發模式下是在內存中運行全部內容，而不是構建一個dist文件，須要安裝 webpack-dev-server

npm i -D webpack-dev-server

出於演示目的，咱們能夠僅將開發配置添加到正在構建的當前webpack.config.js文件中並對其進行測試。可是，咱們開發通常要建立兩個配置文件：一個生產環境用的 mode: production，一個開發環境用的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，並建立devServer屬性，其中，默認端口將爲8080，自動打開瀏覽器窗口，並使用hot-module-placement，這須要webpack.HotModuleReplacementPlugin插件。這樣模塊執行更新而無需徹底從新加載頁面-所以，若是你更新某些樣式，則這些樣式將發生變化，而且不用從新加載整個 JS ，大大加快了開發速度。

如今，可使用webpack serve命令來啓動項目。

package.json

"scripts": {
  "start": "webpack serve"
}

npm start

運行此命令時，將在瀏覽器中自動彈出一個指向localhost：8080的連接。如今，您能夠更新Sass和JavaScript，並觀看其動態更新。

總結

我用 Babel，Sass，PostCSS，生產優化和開發服務器建立了可用於生產的webpack 5樣板，其中包含本文的全部內容，但會涉及更多細節。從這裏，能夠輕鬆設置React，Vue，Typescript或其餘任何您想要的東西。

項目地址：webpack 5 boilerplate

看看它，擺弄它，享受它！

原文：https://www.taniarascia.com/h...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

交流

文章每週持續更新，能夠微信搜索「大遷世界」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。