前端学习笔记100篇之002：Webpack简明教程（持续完善中）

1. 安装和初始化

• 安装Webpack：首先需要安装Node.js和npm（Node包管理器），然后通过运行以下命令全局安装Webpack：

  npm install -g webpack webpack-cli
  

  这会将Webpack和webpack-cli安装到全局环境中[⁴]。
• 创建项目文件夹：在本地创建一个新的项目文件夹，并在其中执行npm init命令来创建一个package.json文件，用于保存项目的配置信息和依赖项。

  mkdir Webpack_demo && cd Webpack_demo
  npm init -y
  

2. 创建和配置入口文件

• 编写入口文件：在项目根目录下创建一个名为src的文件夹，然后在此文件夹中创建一个JavaScript文件作为Webpack的入口文件（例如index.js）：

  import './style.css';
  console.log('Hello, Webpack!');
  

• 创建样式文件：在src文件夹中创建一个CSS文件（例如style.css），编写一些基本的样式规则：

  body {
      background-color: #f0f0f0;
      font-family: 'Arial', sans-serif;
  }
  

3. 编写和配置Webpack配置文件

• 创建webpack.config.js：在项目根目录下创建一个webpack.config.js文件，这是Webpack的配置文件，用于定义打包的规则和输出格式：

  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'],
              },
          ],
      },
  };
  

• 安装加载器：为了处理CSS文件和其他资源，需要安装相应的加载器：

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

4. 打包和运行项目

• 打包项目：在package.json文件中添加一个脚本命令来启动Webpack打包过程：

  "scripts": {
      "build": "webpack"
  }
  

  然后运行npm run build命令进行项目打包，Webpack会根据配置文件把入口文件及其依赖打包成一个或多个输出文件。
• 查看结果：在dist文件夹中会生成一个名为bundle.js的文件，此文件包含了所有打包后的代码。同时，可以在HTML文件中引用此bundle.js文件，然后在浏览器中查看执行结果。