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