webpack构建工具¶

一个现代 JavaScript 应用程序的静态模块打包工具。它的主要功能是将应用程序中的各种资源（如 JavaScript、CSS、图片等）打包成一个或多个文件，并支持动态加载、模块化开发和多种优化方式。Webpack 非常适合用于构建前端项目，尤其是大型单页应用（SPA）。

安装¶

全局安装:

npm install -g webpack webpack-cli

项目中安装:

npm install --save-dev webpack webpack-cli

webpack.config.js¶

示例:

const path = require('path');

module.exports = {
  entry: './src/index.js',  // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',   // 输出的打包文件
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',  // 使用 babel-loader 处理 JavaScript 文件
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],  // 处理 CSS 文件
      },
    ],
  },
};

常见命令¶

打包项目:

# 默认会读取 webpack.config.js 配置文件
npx webpack

开发模式打包:

# 开启热模块替换
npx webpack --mode development

生产模式打包:

# 会自动进行优化（如代码压缩等）
npx webpack --mode production

启动 Webpack Dev Server:

# 用于开发环境，自动刷新页面，支持热更新：
npx webpack serve --open