webpack的常见配置

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

主要功能与优点：

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

常见配置：

1. 入口文件（entry）：指定项目的入口文件。

   module.exports = {
     entry: './src/index.js',
   };
   

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

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

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

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

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

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

使用场景：

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