学习webpack，从这里开始！

一、webpack 是什么？

webpack 是一个模块打包工具，不仅可以减少网络流量，还能减少服务器请求，减轻服务器压力。

二、怎么使用？

下面是一个简单打包 css 文件的步骤。

1、新建项目

• 初始化 webpack 项目，包括配置文件

    # 1、初始化一个新的 webpack 项目
    mkdir learn-webpack
    cd learn-webpack
    npx webpack-cli init
  
    # 2、按照下面选择进行
    ? Which of the following JS solutions do you want to use? none
    ? Do you want to use webpack-dev-server? No
    ? Do you want to simplify the creation of HTML files for your bundle? Yes
    ? Do you want to add PWA support? No
    ? Which of the following CSS solutions do you want to use? none
    ? Do you like to install prettier to format generated configuration? No
    ? Pick a package manager: npm

2、增加 css

• 新建 src/style.css 文件，复制下面代码到文件。

  h2 {
      color: red;
  }

• 修改 src/index.js 文件，如下：

  import './style.css';
  
  console.log("Hello webpack!")

• 修改 webpack.config.js 文件，增加下面 css 相关配置：

  module: {
          rules: [
              {
                  test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                  type: 'asset',
              },
              {
                  test: /\.css$/i,
                  use: ['style-loader', 'css-loader'],
              },
  
              // Add your rules for custom modules here
              // Learn more about loaders from https://webpack.js.org/loaders/
          ],
  },

• 安装 css 的 load 插件

  npm install style-loader css-loader

3、运行项目

• 命令

  # 执行转换
  npm run build

完成后，项目根目录会产生 dist 文件夹，浏览器可打开 index.html 文件查看效果，src 中的css 文件已经被打包了。

三、重要概念

1、webpack-cli

命令行界面（CLI）， 用于配置构建并与之交互。

# 安装
npm install webpack-cli

# 运行 webpack
npx webpack build

# 新建 webpack 项目
npx webpack init

• 命令说明

2、配置文件

npx webpack init 可以快速新建 webpack 项目，包括配置文件。

• 更多配置内容，看这里！

3、loader

webpack 默认只能解析 JavaScript 和 JSON 文件，loader 让 webpack 能够处理其他类型文件。

• babel-loader ：可以让 webpack 把 ES2015+语法、JSX 写的代码 转换成 JavaScript 代码；
• less-loader ：可以让 webpack 把 less 语法写的代码 转换成 css 代码；
• 更多 loader 看这里！

4、plugin

可以让 webpack 更容易使用，譬如上面新建的 webpack 项目中，就用到了 html-webpack-plugin 插件，该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入所有 webpack 生成的 bundle。

• 更多 plugin 看这里！

四、案例场景

1、怎么打包 less 文件？

步骤跟上面打包css 相同，只需配置文件和安装loader！详细步骤，看这里！

五、参考文档

• 学习webpack，从这里开始！