Webpack 是一个现代 JavaScript 应用的模块打包工具,用于将项目中的多个文件和依赖打包成浏览器可以识别的文件,通常是一个或多个 JavaScript、CSS 或其他静态资源的 bundle(将多个模块或文件合并成一个或几个文件的过程,这些合并后的文件被称为 "bundles")。
主要功能与优点:
- 模块化:支持 ES6 的模块系统,以及 CommonJS、AMD 等模块标准。
- 加载静态资源:支持加载和打包 CSS、图片、字体等静态资源。
- 代码拆分(Code Splitting):按需加载,提高首屏加载速度。
- 插件系统:可通过各种插件扩展功能,如压缩代码、自动生成 HTML 等。
- 热模块替换(HMR):开发环境下自动更新页面,无需刷新。
常见配置:
-
入口文件(entry):指定项目的入口文件。
jsmodule.exports = { entry: './src/index.js', };
-
输出文件(output):配置打包后的文件名和输出路径。
jsmodule.exports = { output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, };
-
加载器(Loaders):处理非 JavaScript 文件如 CSS、图片等。
jsmodule: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, ], },
-
插件(Plugins):用于执行各种任务,如生成 HTML 文件或压缩代码。
jsconst HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', }), ], };
使用场景:
- 单页面应用(SPA)开发:Webpack 将多个模块和资源打包成一个高效的文件,提升性能。
- 前端资源优化:如代码压缩、图片优化、按需加载。
- 项目自动化:通过插件系统实现各种构建任务的自动化。