Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当运行webpack时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

以下是一些基本的Webpack配置步骤:

安装Webpack

首先,你需要安装Webpack。可以通过以下命令进行全局安装:

npm install --global webpack-cli

或者,在你的项目目录中安装:

npm install --save-dev webpack webpack-cli

创建一个基本的配置文件

在项目根目录下创建一个名为 webpack.config.js 的文件,并添加以下内容:

const path = require('path');

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

使用Webpack

在项目根目录下运行以下命令来打包你的应用程序:

npx webpack

这将生成一个名为 bundle.js 的文件,位于 dist 目录下。

资源加载

Webpack 可以通过配置来加载各种资源,如图片、CSS 文件等。以下是如何配置Webpack来加载CSS文件:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

链接扩展阅读

想要了解更多关于Webpack的配置,可以阅读Webpack官方文档

[center] Webpack [center]