webpack的常见配置

前端李易安2024-11-06 8:18

Webpack 是一个现代 JavaScript 应用的模块打包工具，用于将项目中的多个文件和依赖打包成浏览器可以识别的文件，通常是一个或多个 JavaScript、CSS 或其他静态资源的 bundle（将多个模块或文件合并成一个或几个文件的过程，这些合并后的文件被称为 "bundles"）。

主要功能与优点：

模块化：支持 ES6 的模块系统，以及 CommonJS、AMD 等模块标准。
加载静态资源：支持加载和打包 CSS、图片、字体等静态资源。
代码拆分（Code Splitting）：按需加载，提高首屏加载速度。
插件系统：可通过各种插件扩展功能，如压缩代码、自动生成 HTML 等。
热模块替换（HMR）：开发环境下自动更新页面，无需刷新。

常见配置：

入口文件（entry）：指定项目的入口文件。
js 复制代码
```
module.exports = {
  entry: './src/index.js',
};
```

输出文件（output）：配置打包后的文件名和输出路径。

js 复制代码

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

加载器（Loaders）：处理非 JavaScript 文件如 CSS、图片等。

js 复制代码

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
  ],
},

插件（Plugins）：用于执行各种任务，如生成 HTML 文件或压缩代码。

js 复制代码

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

使用场景：

单页面应用（SPA）开发：Webpack 将多个模块和资源打包成一个高效的文件，提升性能。
前端资源优化：如代码压缩、图片优化、按需加载。
项目自动化：通过插件系统实现各种构建任务的自动化。