Webpack 快速入门指南

2023-11-10 01:33:42

Webpack 入门教程

Webpack 是一款流行的前端构建工具，可以帮助您将 JavaScript、CSS、图片等资源打包成一个或多个文件，以便在浏览器中加载和执行。Webpack 的主要优点是它可以模块化地管理代码，并支持热更新功能，便于开发和调试。

安装 Webpack

首先，您需要安装 Webpack。您可以使用 npm 或 yarn 来安装 Webpack。

npm install webpack --save-dev

或

yarn add webpack --dev

安装完成后，您可以在项目根目录下创建一个名为 webpack.config.js 的文件。这个文件用于配置 Webpack 的构建过程。

配置 Webpack

在 webpack.config.js 文件中，您可以指定Webpack的各种配置参数。例如，您可以指定项目的入口文件、输出文件、加载器、插件等。

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};