【webPack】入门详解

什么是webPack

当你构建一个现代的web应用时，通常需要将多个JavaScript文件、CSS文件和其他资源文件打包成一个或多个文件，以提高网站的性能和加载速度。Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，它可以将你的代码和依赖项转换为静态资产，例如一个或多个 JavaScript 文件和一个或多个 CSS 文件。

Webpack 是一个功能强大的静态模块打包器，可以处理多种类型的文件，并提供了丰富的配置选项和插件，可以帮助你快速构建高性能的现代web应用程序。

重要概念：

1. entry：入口文件，指定应用程序的起始点。
2. output：输出文件，指定打包后的文件名和路径。
3. module：模块配置，用于指定不同类型的文件如何处理。包括各种加载器、解析器等配置。
4. resolve：解析配置，用于指定模块如何被解析。包括别名、扩展名、模块路径等配置。
5. devServer：开发服务器配置，用于指定如何启动和配置开发服务器。包括端口号、代理、热模块替换等配置。
6. mode：模式配置，用于指定Webpack的工作模式。包括开发模式（development）和生产模式（production）。
7. 加载器（Loaders）：Webpack 使用加载器来处理各种类型的文件。加载器可以将文件转换为模块，也可以在转换过程中执行其他任务，例如代码检查、自动添加浏览器前缀等。Webpack 本身只能处理 JavaScript 模块，但是通过使用不同类型的加载器，可以处理各种类型的文件。
8. 插件（Plugins）：插件是一个可以在Webpack构建过程中扩展其功能的 JavaScript对象。Webpack 的很多功能都是通过插件实现的，例如代码压缩、代码分离、代码分析、资源管理等。开发者可以根据自己的需要编写自定义插件，或者使用现成的插件来扩展Webpack的功能。
9. 打包优化（Optimization）：Webpack 提供了多种打包优化的选项，包括代码分离、压缩、懒加载、缓存等。开发者可以通过配置这些选项来提高应用程序的性能和加载速度。
10. 开发模式和生产模式：Webpack 可以通过不同的配置选项来支持开发模式和生产模式。在开发模式下，Webpack 会生成更快的构建结果，并提供更好的开发体验；在生产模式下，Webpack 会生成更小、更快的代码，以便于部署和发布。
11. HMR（Hot Module Replacement）：Webpack 支持热模块替换，即在应用程序运行时，可以动态更新模块的代码，而不需要重新加载整个页面。这可以大大提高开发效率和体验。

代码案例：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

这个Webpack配置文件中，我们指定了一个入口文件 ./src/index.js，一个输出文件 bundle.js，并且指定了一个加载器 babel-loader，用于将JavaScript文件转换为浏览器可以理解的语法。我们还使用了一个插件 HtmlWebpackPlugin，用于生成一个HTML文件，自动引入打包后的JavaScript文件。

当Webpack遇到一个模块引入语句（比如import或require）时，它会根据配置文件中的module选项来确定如何处理这个模块。

module选项是一个对象，包含一个rules属性，该属性是一个数组，每个数组元素都是一个对象，表示一个模块匹配规则。每个规则对象必须至少包含三个属性：

1. test：一个正则表达式，用于匹配需要处理的文件。
2. use：一个加载器对象或者一个加载器名称的数组，用于指定如何处理匹配到的文件。
3. exclude：一个正则表达式，用于排除某些文件。

在上面的例子中，我们指定了两个模块匹配规则。第一个规则匹配所有的JavaScript文件，但排除了node_modules目录中的文件，使用了babel-loader来将ES6+代码转换成ES5代码。第二个规则匹配所有的CSS文件，并使用了style-loader和css-loader来处理CSS文件，这两个加载器的作用是将CSS文件转换成一个可以在浏览器中使用的

// main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: (h) => h(App),
}).$mount('#app');

5.创建HTML文件：在public目录下创建一个index.html文件，并将Vue组件嵌入到HTML文件中。

6.运行项目：在命令行中输入npm run start启动开发服务器，访问http://localhost:8080即可看到Vue组件的效果。

"scripts": {
    "start": "webpack-dev-server --mode development --

如何自制一个plugins 组件

要自制一个Webpack插件（plugins），需要了解Webpack插件的基本结构和用法。Webpack插件通常是一个JavaScript对象，它包含一个或多个钩子函数，用于在Webpack构建过程中执行自定义逻辑。

以下是一个简单的Webpack插件例子，它会在Webpack构建完成后，输出构建耗时：

class BuildTimePlugin {
  apply(compiler) {
    compiler.hooks.done.tap('BuildTimePlugin', (stats) => {
      console.log(`Build time: ${stats.endTime - stats.startTime}ms`);
    });
  }
}

module.exports = BuildTimePlugin;

在上面的例子中，我们定义了一个BuildTimePlugin插件，它包含一个apply方法，用于接收Webpack的Compiler实例，并注册一个done钩子函数。当Webpack构建完成后，done钩子函数会被触发，我们就可以在里面执行自定义的逻辑。

这个插件可以通过以下方式在Webpack配置文件中使用：

const BuildTimePlugin = require('./BuildTimePlugin');

module.exports = {
  // ...
  plugins: [
    new BuildTimePlugin(),
  ],
};

在上面的Webpack配置中，我们将自定义的BuildTimePlugin插件实例化，并将它添加到了plugins数组中，这样在Webpack构建过程中就会自动运行我们定义的插件，并输出构建耗时。