webpack4入门和多文件打包尝试

简介

Webpack 是一个模块打包器，它可以将许多模块打包成一个或多个文件。这可以使你的应用程序更容易加载和运行。Webpack 4 是 Webpack 的最新版本，它引入了一些新特性和改进。

安装

你可以使用 npm 来安装 Webpack 4。

npm install webpack-cli -D

配置

要使用 Webpack，你需要创建一个配置文件。这个配置文件告诉 Webpack 如何打包你的应用程序。你可以使用 webpack.config.js 来创建配置文件。

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

使用

要使用 Webpack，你可以运行以下命令。

webpack

这将使用你的配置文件来打包你的应用程序。

多文件打包

你可以使用 Webpack 来打包多个文件。为此，你需要在你的配置文件中指定多个入口文件。

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

这将生成两个文件：app.bundle.js 和 vendor.bundle.js。

异步加载

你可以使用 Webpack 来异步加载模块。为此，你需要在你的配置文件中使用 import() 语法。

import('./module').then(module => {
  // 使用模块
});

这将异步加载 module 模块。

Loader

Loader 可以用来转换模块。例如，你可以使用 babel-loader 来将 TypeScript 文件转换成 JavaScript 文件。

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

这将使用 Babel 来转换所有 TypeScript 文件。

按需引用

Webpack 可以按需引用模块。这意味着只有当模块被使用时，它才会被加载。这可以减少你的应用程序的加载时间。

import('./module').then(module => {
  // 使用模块
});

这将按需引用 module 模块。

结论

Webpack 是一个强大的工具，它可以帮助你构建和打包你的应用程序。Webpack 4 引入了许多新特性和改进，这使得它成为一个更加强大的工具。