什么是 Webpack？

初始化项目 首先，建立一个新的项目目录： mkdir my-webpack-project && cd my-webpack-project npm init -y 这会建立package.json档案，作为项目的依赖管理。 安装Webpack 接着，安装Webpack 及Webpack CLI：
  • 本文作者
  • 文章发布日期 2023-08-23 11:14
  • 热度 1
  • 作者心情 不喜不悲
  • 本文共计
  • 预计阅读

初始化项目

首先，建立一个新的项目目录：

mkdir my-webpack-project && cd my-webpack-project
npm init -y

这会建立 package.json 档案，作为项目的依赖管理。

安装 Webpack

接着，安装 Webpack 及 Webpack CLI：

npm install webpack webpack-cli --save-dev

安装完成后，可执行以下指令确认版本：

npx webpack --version

配置 Webpack

建立 Webpack 设定档

在项目根目录建立 webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js',  // 輸出檔案名稱
    path: path.resolve(__dirname, 'dist') // 輸出目錄
  },
  mode: 'development' // 設定模式（可選 "production"）
};

建立项目目录结构

mkdir src dist
touch src/index.js

src/index.js：

console.log("Hello, Webpack!");

执行 Webpack 打包

npx webpack

Webpack 会将 src/index.js 转换并输出到 dist/bundle.js。

使用 Loaders 处理 CSS

Webpack 预设只能处理 JavaScript，若要支援 CSS，需安装 style-loader 和 css-loader：

npm install style-loader css-loader --save-dev

并修改 webpack.config.js：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 處理 .css 檔案
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

然后在 src/index.js 引入 CSS：

import './styles.css';

总结

Webpack 是一款功能强大的前端模组打包工具，本篇文章介绍了 Webpack 的安装、基本配置以及如何载入 CSS。透过 Webpack，可以提升项目的模组化程度并最佳化静态资源。