Webpack 配置简介-技术鸭(jishuya.cn)

Webpack 配置允许您配置和扩展 Webpack 的基本功能。 Webpack 配置是 JavaScript 对象之一的 Webpack 选项。大多数项目在顶层定义他们的 Webpack 配置 webpack.config.js 文件，尽管您也可以将配置作为参数传递给 Webpack 的 Node.js API 。

要了解 Webpack 配置，您需要了解 Webpack 的作用。首先是一个打包器 Webpack 。 Webpack 的基本功能是获取一个 JavaScript 文件，解析任何依赖项（ require(), import等），并输出捆绑包含所有这些依赖然后，您可以运行捆绑的文件，而无需再次加载这些依赖项。

你甚至需要一个 Webpack 配置吗？

对于基本用例，例如将 Vue 应用程序或 Lambda 函数与 Webpack ，您甚至可能不需要 Webpack 配置。默认情况下，Webpack 捆绑 src/index.js 文件并将输出写入 dist/main.js 文件。

假设您有以下文件 src/index.js，这是一个使用 Vue 的 Hello, World 应用程序。

const Vue = require(vue);

const app = new Vue({
  template: <h1>Hello, World</h1>
});

app.$mount(#content);

如果你跑 npm install vue webpack webpack-cli，并运行 ./node_modules/.bin/webpack，您将看到以下输出：

$ ./node_modules/.bin/webpack
Hash: f19bd04db784f5de4438
Version: webpack 4.42.0
Time: 1152ms
Built at: 03/02/2020 10:18:13 AM
  Asset      Size  Chunks             Chunk Names
main.js  68.9 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] (webpack)/buildin/global.js 472 bytes {0} [built]
[1] ./src/index.js 116 bytes {0} [built]
    + 4 hidden modules

WARNING in configuration
The mode option has not been set, webpack will fallback to production for this value. Set mode option to development or production to enable defaults for each environment.
You can also set it to none to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

Webpack 生成一个捆绑的 main.js然后可以在浏览器中加载的文件：

<html>
  <head>
    <script src=dist/main.js></script>
  </head>
  <body>
    <div></div>
  </body>
</html>

所以你可以零配置获得 Webpack 的核心优势。对于许多应用程序来说，Webpack 的零配置选项就足够了。但它开始崩溃的一个地方是，如果您有多个要捆绑的文件 – 假设您有一个包含多个 Lambda 函数的 GitHub 存储库。这是使用 Webpack 配置处理多个文件的方法。

多个文件

本节将使用 3 个 Webpack 选项。 2 用于指定哪个
要捆绑的文件：

entry：捆绑什么文件
output：捆绑文件的放置位置

还有一种选择， target 选项，它告诉 Webpack 你是否为浏览器捆绑 web 或节点 node。
对于 Vue 应用程序，您通常会使用 web，但对于 Lambda，您应该使用 node。

下面是一个使用这 3 个选项的 Webpack 文件，它从 src 目录并将它们输出到 dist 目录。

module.exports = {
  // You need to list out every file you want to bundle in `entry`
  entry: {
    express: `${process.cwd()}/src/express.js`,
    mongoose: `${process.cwd()}/src/mongoose.js`
  },
  output: {
    // Write to the /dist directory relative to the directory
    // where `webpack` is running
    path: `${process.cwd()}/dist`,
    // Webpack will bundle `src/foo.js` into `dist/foo.min.js`
    // because of `[name]`.
    filename: [name].min.js
  },
  target: node
};

请注意，Webpack 配置是 JavaScript 文件，而不是 JSON 或 YAML。

以下是内容 express.js 和 mongoose.js 文件：

// express.js
const pkg = require(express/package);

console.log(Express version, pkg.version);

// mongoose.js
const mongoose = require(mongoose);

console.log(Mongoose version, mongoose.version);

Webpack 将 Express 和 Mongoose 与每个功能捆绑在一起，因此您仍然可以运行 express.min.js 和 mongoose.min.js 即使你 rm -rf ./node_modules。

更复杂的配置

如果 Webpack 配置如此简单，为什么开发人员会抱怨 Webpack 很难呢？因为 Webpack 也是转译器的常见入口点——Babel、TypeScript、JSX 等。如果你不需要转译（很可能你不需要），Webpack 很容易。但是一旦你引入了转译器，事情就会变得棘手。

这是使用 Webpack 编译 TypeScript 的官方指南。本节将提供一个精简版。

的关键部分 webpack.config.js 对于编译器是 module.rules 选项。在这里你告诉 Webpack 在打包之前使用一个特殊的加载器来编译一个文件。对于 TypeScript， ts-loader npm 除了 typescript npm module 。

npm install typescript ts-loader

这 module.rulesoption 是一组规则。下面 webpack.config.js 告诉 Webpack 使用 ts-loader 模块来编译任何以 .ts 结尾的文件。

module.exports = {
  entry: ./src/index.ts,
  module: {
    // Use `ts-loader` on any file that ends in .ts
    rules: [
      {
        test: /\\.ts$/,
        use: ts-loader,
        exclude: /node_modules/,
      },
    ],
  },
  // Bundle .ts files as well as .js files.
  resolve: {
    extensions: [.ts, .js],
  },
  output: {
    filename: main.js,
    path: `${process.cwd()}/dist`,
  }
};

下面是 index.ts 文件：

const str: string = Hello, World;

console.log(str);

您还需要添加一个 tsconfig.json file ，否则 TypeScript 会出错。出于本教程的目的，以下 tsconfig.json 足够的：

{files:[src/index.ts]}

跑步 ./node_modules/.bin/webpack 应该给你以下输出：

$ ./node_modules/.bin/webpack
Hash: 63b83086be302b9d23c8
Version: webpack 4.42.0
Time: 1301ms
Built at: 03/02/2020 10:51:14 AM
  Asset       Size  Chunks             Chunk Names
main.js  957 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.ts 44 bytes {0} [built]

WARNING in configuration
The mode option has not been set, webpack will fallback to production for this value. Set mode option to development or production to enable defaults for each environment.
You can also set it to none to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

然后你终于可以运行了 node ./dist/main.js。

文章版权归作者所有，未经允许请勿转载。

THE END