使用webpack搭建项目开发环境（持续更新）

当搭建一个现代化的项目开发环境时，Webpack是一个强大而灵活的工具，它能够优化、打包、管理和构建项目中的各种资源。这篇文章将介绍如何使用Webpack搭建一个基础的项目开发环境，包括以下主要内容：

1. 安装Webpack和相关工具：
   指导如何安装Webpack及相关的工具，如Webpack CLI。
2. 创建基本项目结构：
   确定项目目录结构，包括源代码、静态资源、配置文件等。
3. 配置Webpack：
   创建Webpack配置文件，详细讲解常见的配置项和作用。
   创建一个简单的HTML文件。
   配置入口点、输出目录等。
4. 集成Babel：
   介绍为何需要使用Babel，并配置Webpack集成Babel以支持ES6+语法。
   安装Babel和相关的加载器，确保项目能够转译JavaScript。
5. 处理样式和资源文件：
   配置样式加载器，如CSS和LESS。
   处理图片、字体等静态资源。
6. 开发服务器：
   配置Webpack DevServer，实现热模块替换（HMR）和自动刷新。
   使开发过程更加高效。
7. 生产环境优化：
   了解如何通过Webpack进行生产环境优化。
   压缩、拆分代码、处理环境变量等。
8. 代码分离和懒加载：
   讲解Webpack中的代码分离和懒加载机制。
   优化页面加载性能。

一. 安装Webpack和相关工具

首先生成一个package文件

npm init -y

安装webpack依赖

npm install webpack webpack-cli --save-dev

二. 创建基本项目结构

创建一个src文件，新增一个index.js文件。在根目录创建一个webpack.config.js，这个文件是webpack的配置文件

三. 配置Webpack

webpack的配置文件，初始化如下：

module.exports = {
//这是打包入口
  entry: {
    main: {
      import: "./src/index.js",
    },
  },
 }

开始打包：

npx webpack

此时就会默认在根目录生成一个dist文件夹，main.js就是我们打包出来的内容。如果需要对输出的文件名或者路径进行自定义，可以在webpack配置文件写入:

output: {
	// 打包出来的文件名，[name]表示入口定义的文件名
    filename: "[name].js",
   	// 定义打包的路径
    path: __dirname + "/dist",
    // 打包时是否清空之前打包的内容
    clean: true,
  },

在package.json配置以下运行命令：

"scripts": {
    "build": "npx webpack",
  },

之后可以使用npm run build执行打包命令
执行后可以发现生成一个dist文件夹，如下：

打包生成一个模板html文件，默认引入打包后的js文件。需要使用到html-webpack-plugin

npm install html-webpack-plugin --save-dev

在webpack配置如下：

const HtmlWebpackPlugin = require("html-webpack-plugin");

plugins: [
    new HtmlWebpackPlugin(),
],

四. 配置Babel

配置 Babel 的主要目的是使你的项目能够支持使用 ECMAScript 2015+（ES6+）及以上版本的 JavaScript 语法，以及其他一些 JavaScript 的新特性。以下是一些使用 Babel 的主要原因：

1. 兼容性： 某些浏览器可能不支持最新版本的 JavaScript 语法，特别是 ES6+ 提供的一些新特性。通过使用 Babel，你可以将这些新特性转译为旧版本的 JavaScript，以确保你的代码在各种浏览器中运行。
2. 使用最新语法： ES6+ 引入了许多新的语法和功能，如箭头函数、模板字符串、解构赋值等。使用 Babel，你可以在项目中使用这些新语法，提高代码的可读性和开发效率。
3. 支持新特性： JavaScript 社区不断发展，引入了新的语法和特性。Babel 可以帮助你在项目中使用这些新特性，而不必等待浏览器直接支持。
4. 模块系统： Babel 支持将 ES6 模块语法转译为其他模块系统的语法，如 CommonJS、AMD 等，以确保模块能够在不同的环境中正常工作。
5. 实验性功能： 有时候，JavaScript 的新特性可能还处于实验性阶段，尚未成为官方标准。使用 Babel，你可以在项目中尝试这些实验性功能。

需要安装以下依赖：

npm install babel-loader @babel/core @babel/preset-env --save-dev

在webpack内配置：

module: {
    rules: [
      {
        test: /\.m?js$/,
        // 排除node_modules里面的内容
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              // 预设,它根据目标环境自动确定需要转译的语法和特性。
              presets: ["@babel/preset-env"]
            },
          },
        ],
      },
    ],
  },

可以使用 @babel/plugin-transform-runtime 插件，以避免在每个文件中重复引入 Babel 运行时（runtime）。

module: {
    rules: [
      {
        test: /\.m?js$/,
        // 排除node_modules里面的内容
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              // 预设,它根据目标环境自动确定需要转译的语法和特性。
              presets: ["@babel/preset-env"],
              plugins: ["@babel/plugin-transform-runtime"]
            },
          },
        ],
      },
    ],
  },

babel-loader 的 cacheDirectory 选项用于启用 Babel 缓存，以提高构建性能。当该选项被设置为 true 或提供一个指定目录的字符串时，Babel 会缓存转译过的模块，从而避免重复的转译操作，加快构建速度。
具体来说，cacheDirectory 的作用包括：减少重新编译时间： 在每次构建时，Babel 会将已经转译过的模块缓存到指定的目录中。在下一次构建时，如果模块的源代码没有发生变化，Babel 将直接使用缓存中的转译结果，而不必重新进行转译，从而减少了重新编译的时间。提高构建性能： 对于大型项目或包含大量源文件的项目，使用 Babel 缓存可以显著提高构建性能。避免重复的转译操作，可以降低整体构建时间，特别是在开发过程中频繁进行构建时。

module: {
    rules: [
      {
        test: /\.m?js$/,
        // 排除node_modules里面的内容
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              // 预设,它根据目标环境自动确定需要转译的语法和特性。
              presets: ["@babel/preset-env"],
              plugins: ["@babel/plugin-transform-runtime"],
              cacheDirectory: true,
            },
          },
        ],
      },
    ],
  },

重新执行打包命令。
我在入口文件内使用了模板字符串语法，打包出来的结果如下

五. 处理样式和资源文件

处理样式

使用style-loader和css-loader处理样式文件

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

在webpack配置文件如下:

module: {
    rules: [
      {
        test: /\.m?js$/,
        // 排除node_modules里面的内容
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              // 预设,它根据目标环境自动确定需要转译的语法和特性。
              presets: ["@babel/preset-env"],
              plugins: ["@babel/plugin-transform-runtime"],
              cacheDirectory: true,
            },
          },
        ],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

在src文件下下创建style文件夹放置样式文件，先创建一个common.css文件，如下：


执行打包命令，会发现样式已经出现。在html文件中引入main.js会发现样式已经成功加载。

如果需要使用如less，或者sass之类的CSS 预处理语言，以less为例，如下：

npm install less-loader less --save-dev  

在webpack配置如下：

{
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"],
},

如果需要将打包后的css单独分离出来，需要使用mini-css-extract-plugin插件的帮助：

npm install mini-css-extract-plugin --save-dev

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: {
    main: {
      import: "./src/index.js",
    },
  },
  output: {
    filename: "[name].js",
    path: __dirname + "/dist",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              cacheDirectory: true,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "style/[contenthash].css",
    }),
  ],
};

进行打包，dist文件下下出现了style的样式文件夹

处理图片资源

需要使用file-loader进行处理

npm install file-loader --save-dev

webpack配置

module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        // 如果不适用这个配置，1张图片打包出来会有2张，而且默认引入的那张是不可用用
        type: "javascript/auto",
        use: [
          {
            loader: "file-loader",
            options: {
            // 不使用这个配置的话，引入的图片路径会出错
              esModule: false,
              name: "image/[name].[hash:8].[ext]",
            },
          },
        ],
      },
      {
        test: /\.less$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              cacheDirectory: true,
            },
          },
        ],
      },
    ],
  },

六.开发服务器

npm install webpack-dev-server --save-dev

在webpack配置如下：

devServer: {
	// 是否启动浏览器
    open: true,
    // 端口号，http://localhost:9000/
    port: 9000,
    // 热更新，文件发生变动时实时更新
    hot: true,
  },

在package.json配置如下

"scripts": {
    "build": "npx webpack",
    "dev": "webpack serve --mode development --open"
  },

运行服务，打开浏览器。