webpack簡介

• What is webpack?

  什么是webpack？

• Installing webpack

  安裝webpack

  • Global install

    全局安裝

  • Local install

    本地安裝

  Installing webpack

  安裝webpack

• Webpack configuration

  Webpack配置

• The entry point

  入口點

• The output

  輸出

• Loaders

  裝載機

• Plugins

  外掛程式

• The webpack mode

  Webpack模式

• Running webpack

  運行webpack

• Watching changes

  觀察變化

• Handling images

  處理圖像

• Process your SASS code and transform it to CSS

  處理您的SASS代碼并將其轉換為CSS

• Generate Source Maps

  生成源地圖

什么是webpack？ (What is webpack?)

Webpack is a tool that lets you compile JavaScript modules, also known as module bundler.

Webpack是一種工具，可用于編譯JavaScript模塊，也稱為模塊捆綁程序 。

Given a large number of files, it generates a single file (or a few files) that run your app.

給定大量文件，它將生成一個(或幾個文件)運行您的應用程序的文件。

It can perform many operations:

它可以執行許多操作：

• helps you bundle your resources.
  幫助您捆綁資源。
• watches for changes and re-runs the tasks.
  監視更改并重新運行任務。

• can run Babel transpilation to ES5, allowing you to use the latest JavaScript features without worrying about browser support.

  可以將Babel轉換運行到ES5，從而使您可以使用最新的JavaScript功能，而不必擔心瀏覽器支持。

• can transpile CoffeeScript to JavaScript
  可以將CoffeeScript轉換為JavaScript
• can convert inline images to data URIs.
  可以將嵌入式圖像轉換為數據URI。
• allows you to use require() for CSS files.
  允許您將require()用于CSS文件。
• can run a development webserver.
  可以運行開發Web服務器。
• can handle hot module replacement.
  可以處理熱模塊更換。
• can split the output files into multiple files, to avoid having a huge js file to load in the first page hit.
  可以將輸出文件拆分為多個文件，以避免在首頁命中時加載巨大的js文件。

• can perform tree shaking.

  可以搖樹 。

Webpack is not limited to be use on the frontend, it’s also useful in backend Node.js development as well.

Webpack不僅限于在前端使用，它在后端Node.js開發中也很有用。

Predecessors of webpack, and still widely used tools, include:

Webpack的前身以及仍被廣泛使用的工具包括：

• Grunt
  咕unt聲
• Broccoli
  西蘭花
• Gulp
  古爾普

There are lots of similarities in what those and Webpack can do, but the main difference is that those are known as task runners, while webpack was born as a module bundler.

這些和Webpack的功能有很多相似之處，但是主要區別在于它們被稱為任務運行程序 ，而webpack則是模塊捆綁器。

It’s a more focused tool: you specify an entry point to your app (it could even be an HTML file with script tags) and webpack analyzes the files and bundles all you need to run the app in a single JavaScript output file (or in more files if you use code splitting).

它是一種更具針對性的工具：您可以為應用程序指定一個入口點(它甚至可以是帶有腳本標簽HTML文件)，然后Webpack會分析這些文件并將所有需要運行的應用程序捆綁在一個JavaScript輸出文件中(或更多)文件(如果您使用代碼拆分)。

安裝webpack (Installing webpack)

Webpack can be installed globally or locally for each project.

Webpack可以在每個項目的全局或本地安裝。

全局安裝 (Global install)

Here’s how to install it globally with Yarn:

這是使用Yarn全局安裝的方法：

yarn global add webpack webpack-cli

with npm:

與npm ：

npm i -g webpack webpack-cli

once this is done, you should be able to run

完成此操作后，您應該可以運行

webpack-cli

本地安裝 (Local install)

Webpack can be installed locally as well. It’s the recommended setup, because webpack can be updated per-project, and you have less resistance to using the latest features just for a small project rather than updating all the projects you have that use webpack.

Webpack也可以在本地安裝。 這是推薦的設置，因為webpack可以按項目進行更新，并且您對僅針對小型項目使用最新功能的阻力較小，而不是更新所有擁有使用webpack的項目的阻力。

With Yarn:

帶紗 ：

yarn add webpack webpack-cli -D

with npm:

與npm ：

npm i webpack webpack-cli --save-dev

Once this is done, add this to your package.json file:

完成后，將其添加到package.json文件：

{
  //...
  "scripts": {
    "build": "webpack"
  }
}

once this is done, you can run webpack by typing

完成此操作后，您可以通過鍵入以下內容運行webpack

yarn build

in the project root.

在項目根目錄中。

Webpack配置 (Webpack configuration)

By default, webpack (starting from version 4) does not require any config if you respect these conventions:

默認情況下，如果遵守以下約定，則webpack(從版本4開始)不需要任何配置：

• the entry point of your app is ./src/index.js

  您的應用程序的入口點是./src/index.js

• the output is put in ./dist/main.js.

  輸出放在./dist/main.js 。

• Webpack works in production mode
  Webpack在生產模式下工作

You can customize every little bit of webpack of course, when you need. The webpack configuration is stored in the webpack.config.js file, in the project root folder.

當然，您可以在需要時自定義Webpack的每一個細節。 Webpack配置存儲在項目根文件夾中的webpack.config.js文件中。

入口點 (The entry point)

By default the entry point is ./src/index.js This simple example uses the ./index.js file as a starting point:

默認情況下，入口點是./src/index.js這個簡單的示例使用./index.js文件作為起點：

module.exports = {
  /*...*/
  entry: './index.js'
  /*...*/
}

輸出 (The output)

By default the output is generated in ./dist/main.js. This example puts the output bundle into app.js:

默認情況下，輸出是在./dist/main.js生成的。 此示例將輸出包放入app.js ：

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

裝載機 (Loaders)

Using webpack allows you to use import or require statements in your JavaScript code to not just include other JavaScript, but any kind of file, for example CSS.

使用webpack允許您在JavaScript代碼中使用import或require語句，不僅包括其他JavaScript，還包括任何類型的文件，例如CSS。

Webpack aims to handle all our dependencies, not just JavaScript, and loaders are one way to do that.

Webpack旨在處理我們所有的依賴關系，而不僅僅是JavaScript，而加載程序是做到這一點的一種方法。

For example, in your code you can use:

例如，在您的代碼中，您可以使用：

import 'style.css'

by using this loader configuration:

通過使用此加載程序配置：

module.exports = {
  /*...*/
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
    ]
  }
  /*...*/
}

The regular expression targets any CSS file.

正則表達式以任何CSS文件為目標。

A loader can have options:

裝載機可以有以下選擇：

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
  /*...*/
}

You can require multiple loaders for each rule:

您可以為每個規則要求多個加載程序：

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.css$/,
        use:
          [
            'style-loader',
            'css-loader',
          ]
      }
    ]
  }
  /*...*/
}

In this example, css-loader interprets the import 'style.css' directive in the CSS. style-loader is then responsible for injecting that CSS in the DOM, using a <style> tag.

在此示例中， css-loader解釋css-loader import 'style.css'指令。 然后， style-loader負責使用<style>標簽將CSS注入DOM中。

The order matters, and it’s reversed (the last is executed first).

順序很重要，并且順序相反(最后執行的是第一個)。

What kind of loaders are there? Many! You can find the full list here.

那里有什么裝載機？ 許多！ 您可以在此處找到完整列表 。

A commonly used loader is Babel, which is used to transpile modern JavaScript to ES5 code:

常用的加載器是Babel ，用于將現代JavaScript轉換為ES5代碼：

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
  /*...*/
}

This example makes Babel preprocess all our React/JSX files:

這個例子使Babel預處理我們所有的React / JSX文件：

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ]
  }
  /*...*/
}

See the babel-loader options here.

在此處查看babel-loader選項 。

外掛程式 (Plugins)

Plugins are like loaders, but on steroids. They can do things that loaders can’t do, and they are the main building block of webpack.

插件就像加載程序一樣，但是在類固醇上。 他們可以完成加載程序無法完成的工作，它們是webpack的主要組成部分。

Take this example:

舉個例子：

module.exports = {
  /*...*/
  plugins: [
    new HTMLWebpackPlugin()
  ]
  /*...*/
}

The HTMLWebpackPlugin plugin has the job of automatically creating an HTML file, adding the output JS bundle path, so the JavaScript is ready to be served.

HTMLWebpackPlugin插件具有自動創建HTML文件，添加輸出JS包路徑的功能，因此可以使用JavaScript。

There are lots of plugins available.

有很多可用的插件 。

One useful plugin, CleanWebpackPlugin, can be used to clear the dist/ folder before creating any output, so you don’t leave files around when you change the name of the output file:

一個有用的插件CleanWebpackPlugin可以用于在創建任何輸出之前清除dist/文件夾，因此在更改輸出文件的名稱時，您不會留下文件：

module.exports = {
  /*...*/
  plugins: [
    new CleanWebpackPlugin(['dist']),
  ]
  /*...*/
}

Webpack模式 (The webpack mode)

This mode (introduced in webpack 4) sets the environment on which webpack works. It can be set to development or production (defaults to production, so you only set it when moving to development)

此模式(在webpack 4中引入)設置了webpack工作的環境。 可以將其設置為development或production (默認為生產，因此僅在進行開發時進行設置)

module.exports = {
  entry: './index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  }
}

Development mode:

開發方式：

• builds very fast
  建立非常快
• is less optimized than production
  沒有比生產優化
• does not remove comments
  不刪除評論
• provides more detailed error messages and suggestions
  提供更詳細的錯誤消息和建議
• provides a better debugging experience
  提供更好的調試體驗

Production mode is slower to build, since it needs to generate a more optimized bundle. The resulting JavaScript file is smaller in size, as it removes many things that are not needed in production.

生產模式的構建速度較慢，因為它需要生成更優化的捆綁包。 生成JavaScript文件較小，因為它刪除了生產中不需要的許多東西。

I made a sample app that just prints a console.log statement.

我制作了一個示例應用程序，僅打印console.log語句。

Here’s the production bundle:

這是產品包：

Here’s the development bundle:

這是開發包：

運行webpack (Running webpack)

Webpack can be run from the command line manually if installed globally, but generally you write a script inside the package.json file, which is then run using npm or yarn.

如果Webpack是全局安裝的，則可以從命令行手動運行，但是通常是在package.json文件中編寫一個腳本，然后使用npm或yarn運行它。

For example this package.json scripts definition we used before:

例如，我們之前使用的以下package.json腳本定義：

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

allows us to run webpack by running

允許我們通過運行來運行webpack

npm run build

or

要么

yarn run build

or

要么

yarn build

觀察變化 (Watching changes)

Webpack can automatically rebuild the bundle when a change in your app happens, and keep listening for the next change.

當您的應用程序發生更改時，Webpack可以自動重建捆綁軟件，并繼續監聽下一個更改。

Just add this script:

只需添加以下腳本：

"scripts": {
  "watch": "webpack --watch"
}

and run

并運行

npm run watch

or

要么

yarn run watch

or

要么

yarn watch

One nice feature of the watch mode is that the bundle is only changed if the build has no errors. If there are errors, watch will keep listening for changes, and try to rebuild the bundle, but the current, working bundle is not affected by those problematic builds.

監視模式的一個不錯的功能是，僅當構建沒有錯誤時才更改捆綁軟件。 如果有錯誤， watch將繼續偵聽更改，并嘗試重建捆綁軟件，但是當前有效的捆綁軟件不受那些有問題的構建的影響。

處理圖像 (Handling images)

Webpack allows us to use images in a very convenient way, using the file-loader loader.

Webpack允許我們使用file-loader器file-loader器以非常方便的方式使用圖像。

This simple configuration:

這個簡單的配置：

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
  /*...*/
}

Allows you to import images in your JavaScript:

允許您在JavaScript中導入圖像：

import Icon from './icon.png'

const img = new Image()
img.src = Icon
element.appendChild(img)

(img is an HTMLImageElement. Check the Image docs)

( img是HTMLImageElement。請檢查Image文檔 )

file-loader can handle other asset types as well, like fonts, CSV files, xml, and more.

file-loader還可以處理其他資產類型，例如字體，CSV文件，xml等。

Another nice tool to work with images is the url-loader loader.

另一個處理圖像的好工具是url-loader loader。

This example loads any PNG file smaller than 8KB as a data URL.

本示例將小于8KB的任何PNG文件加載為數據URL 。

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
  /*...*/
}

處理您的SASS代碼并將其轉換為CSS (Process your SASS code and transform it to CSS)

Using sass-loader, css-loader and style-loader:

使用sass-loader ， css-loader和style-loader ：

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
  /*...*/
}

生成源地圖 (Generate Source Maps)

Since webpack bundles the code, Source Maps are mandatory to get a reference to the original file that raised an error, for example.

由于webpack捆綁了代碼，因此必須使用“源映射”來獲取對引發錯誤的原始文件的引用。

You tell webpack to generate source maps using the devtool property of the configuration:

您告訴webpack使用配置的devtool屬性生成源映射：

module.exports = {
  /*...*/
  devtool: 'inline-source-map',
  /*...*/
}

devtool has many possible values, the most used probably are:

devtool有許多可能的值 ，最常用的是：

• none: adds no source maps

  none ：不添加源地圖

• source-map: ideal for production, provides a separate source map that can be minimized, and adds a reference into the bundle, so development tools know that the source map is available. Of course you should configure the server to avoid shipping this, and just use it for debugging purposes

  source-map ：非常適合生產，提供可以最小化的單獨的源映射，并在捆綁包中添加引用，因此開發工具知道該源映射可用。 當然，您應該配置服務器以避免運送它，而僅將其用于調試目的

• inline-source-map: ideal for development, inlines the source map as a Data URL

  inline-source-map ：非常適合開發，將源映射作為數據URL內聯

翻譯自: https://flaviocopes.com/webpack/

webpack簡介