学做美食视频网站,哈尔滨城市规划建设网,seo外链发布技巧,手机网站开发流程.Webpack基础学习-Day01
1.1 webpack 是什么
webpack 是一种前端资源构建工具#xff0c;一个静态模块打包器(module bundler)。
在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
它将根据模块的依赖关系进行静态分析#xff0c;打包生成…Webpack基础学习-Day01
1.1 webpack 是什么
webpack 是一种前端资源构建工具一个静态模块打包器(module bundler)。
在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
它将根据模块的依赖关系进行静态分析打包生成对应的静态资源(bundle)。
1.2 webpack 核心概念
1.2.1 Entry
入口(Entry)指示 webpack 以哪个文件为入口起点开始打包分析构建内部依赖图。
在 Webpack 中entry 属性指定了 Webpack 用来构建其内部依赖图的起点或入口点。换句话说entry 告诉 Webpack 从哪里开始打包代码。
entry 属性的用法
entry 属性的值可以是以下几种类型
字符串单个入口文件。数组多个入口文件这些文件的内容会被打包到一个 bundle 中。对象多个入口点每个入口点会生成一个独立的 bundle。
1. 字符串类型的 entry
这是最简单的用法指定一个单一的入口文件
module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},
};在这种情况下Webpack 从 ./src/index.js 开始构建依赖图并将所有模块打包到 bundle.js 文件中。
2. 数组类型的 entry
如果你有多个文件需要作为入口但希望将它们打包到一个 bundle 中可以使用数组
module.exports {entry: [./src/index.js, ./src/anotherModule.js],output: {filename: bundle.js,path: path.resolve(__dirname, dist),},
};这种情况下index.js 和 anotherModule.js 会被打包到同一个 bundle.js 文件中。
3. 对象类型的 entry
对象类型的 entry 允许你定义多个独立的入口点每个入口点会生成一个独立的 bundle
module.exports {entry: {app: ./src/app.js,admin: ./src/admin.js,},output: {filename: [name].bundle.js,path: path.resolve(__dirname, dist),},
};在这种情况下会生成两个独立的 bundle 文件app.bundle.js 和 admin.bundle.js。[name] 是一个占位符会被 entry 对象的键替换。
高级用法
动态入口
可以通过函数返回一个对象来动态生成入口点
module.exports {entry: () {const entries {main: ./src/main.js,};if (process.env.NODE_ENV development) {entries.dev ./src/dev.js;}return entries;},output: {filename: [name].bundle.js,path: path.resolve(__dirname, dist),},
};这种方式允许根据环境或其他条件动态配置入口点。
使用多个入口和 SplitChunks 插件
通过配合 SplitChunksPlugin可以将共享代码提取到一个独立的 chunk 中
module.exports {entry: {app: ./src/app.js,admin: ./src/admin.js,},output: {filename: [name].bundle.js,path: path.resolve(__dirname, dist),},optimization: {splitChunks: {chunks: all,},},
};这种配置会将 app.js 和 admin.js 中的共享模块提取到一个公共的 bundle 中从而减少重复代码。
配置示例
以下是一个更完整的 Webpack 配置示例展示了不同类型的 entry 配置和一些常见的插件配置
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const { CleanWebpackPlugin } require(clean-webpack-plugin);module.exports {entry: {app: ./src/app.js,admin: ./src/admin.js,},output: {filename: [name].[contenthash].bundle.js,path: path.resolve(__dirname, dist),publicPath: /,},mode: production,module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: babel-loader,},{test: /\.css$/,use: [style-loader, css-loader],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource,},],},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({template: ./src/template.html,chunks: [app], // 仅包含 app chunk}),new HtmlWebpackPlugin({template: ./src/admin-template.html,filename: admin.html,chunks: [admin], // 仅包含 admin chunk}),],optimization: {splitChunks: {chunks: all,},},
};总结
entry 属性是 Webpack 配置中的一个重要部分它定义了 Webpack 构建的入口点。通过灵活使用字符串、数组和对象类型的 entry你可以实现不同的构建策略和优化代码拆分。结合 Webpack 的其他特性如插件和优化选项可以构建高效、可维护的前端项目。
1.2.2 Output
输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去以及如何命名。
output 属性是 Webpack 配置中的一个关键部分它定义了打包后输出文件的相关设置。通过配置 output你可以指定打包文件的名称、路径、公共路径等。
基本配置
1. filename
filename 用于指定输出文件的名称。可以使用占位符来生成动态文件名。
module.exports {entry: ./src/index.js,output: {filename: bundle.js, // 输出文件名path: path.resolve(__dirname, dist), // 输出路径},
};常用的占位符包括
[name]: 入口点名称[id]: chunk ID[hash]: 编译时的唯一 hash[chunkhash]: chunk 的 hash[contenthash]: 文件内容的 hash
module.exports {entry: {app: ./src/app.js,admin: ./src/admin.js,},output: {filename: [name].[contenthash].js, // 动态生成文件名path: path.resolve(__dirname, dist),},
};2. path
path 用于指定输出目录的绝对路径。通常使用 Node.js 的 path 模块来生成绝对路径。
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist), // 使用绝对路径},
};3. publicPath
publicPath 用于指定输出解析文件的公共 URL 地址。通常用于配置 CDN 地址或开发服务器地址。
module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),publicPath: /, // 公共路径通常用于配置 CDN 地址},
};高级配置
1. chunkFilename
chunkFilename 用于指定按需加载的 chunk 文件的名称模板。类似于 filename可以使用占位符。
module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),chunkFilename: [name].[contenthash].js, // 按需加载的 chunk 文件名},
};2. assetModuleFilename
assetModuleFilename 用于指定通过资源模块如图像、字体等处理的文件的输出文件名模板。
module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),assetModuleFilename: assets/[name].[hash][ext], // 资源模块文件名},
};3. library 和 libraryTarget
library 和 libraryTarget 用于将你的 bundle 输出为一个库。
library 指定库的名称。libraryTarget 指定导出库的方式如 var, umd, commonjs2 等。
module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),library: MyLibrary, // 库名称libraryTarget: umd, // 输出库的方式},
};常见示例
示例 1简单的单入口点配置
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},
};示例 2多入口点配置
const path require(path);module.exports {entry: {app: ./src/app.js,admin: ./src/admin.js,},output: {filename: [name].[contenthash].js,path: path.resolve(__dirname, dist),},
};示例 3配置公共路径
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),publicPath: https://cdn.example.com/assets/, // 使用 CDN 地址},
};示例 4配置资源模块输出
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),assetModuleFilename: images/[name].[hash][ext], // 资源模块文件名},module: {rules: [{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource,},],},
};详细解释
filename指定输出文件的名称可以使用占位符动态生成文件名。path指定输出目录的绝对路径通常使用 Node.js 的 path.resolve 方法。publicPath指定公共路径通常用于配置 CDN 地址或开发服务器地址。chunkFilename指定按需加载的 chunk 文件的名称模板。assetModuleFilename指定资源模块处理的文件输出名称模板。library 和 libraryTarget用于将你的 bundle 输出为一个库指定库的名称和导出方式。
通过配置 output 属性可以灵活地控制 Webpack 打包输出文件的名称、路径和其他相关设置以满足各种需求。
1.2.3 Loader
Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解
JavaScript)
在 Webpack 中Loader 是一种用于转换模块的机制。在 Webpack 中一切文件都是模块而 Loader 则用于告诉 Webpack 如何处理那些非 JavaScript 文件例如CSS、图片、字体、TypeScript 等。通过使用 Loader你可以在 import 或 require 模块时预处理文件并将它们转换为 JavaScript 模块。
使用 Loader 的步骤
安装 Loader通过 npm 安装所需的 Loader。配置 Webpack在 Webpack 配置文件中定义 Loader 规则。
常用 Loader 示例
1. 处理 CSS 文件的 Loader
安装 style-loader 和 css-loader
npm install style-loader css-loader --save-dev配置 Webpack
// webpack.config.js
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader],},],},
};这个配置会使用 css-loader 将 CSS 文件解析成 JavaScript 可以理解的模块然后使用 style-loader 将 CSS 注入到 DOM 中。
2. 处理图像文件的 Loader
安装 file-loader 或 url-loader
npm install file-loader url-loader --save-dev配置 Webpack
// webpack.config.js
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},module: {rules: [{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource, // 使用内置资源模块},],},
};asset/resource 会将图像文件单独输出到指定目录并返回图像的 URL。
3. 处理字体文件的 Loader
字体文件可以使用与图像文件类似的 file-loader 或 url-loader这里使用 Webpack 5 内置的资源模块
// webpack.config.js
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},module: {rules: [{test: /\.(woff|woff2|eot|ttf|otf)$/i,type: asset/resource, // 使用内置资源模块},],},
};4. 处理 Sass 文件的 Loader
安装 sass-loader、sassDart Sass、style-loader 和 css-loader
npm install sass-loader sass style-loader css-loader --save-dev配置 Webpack
// webpack.config.js
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},module: {rules: [{test: /\.scss$/i,use: [style-loader, css-loader, sass-loader],},],},
};这个配置会使用 sass-loader 将 Sass 文件编译成 CSS然后使用 css-loader 和 style-loader 处理 CSS。
5. 处理 Babel 的 JavaScript 文件
安装 babel-loader 和 Babel 的相关包
npm install babel-loader babel/core babel/preset-env --save-dev配置 Webpack 和 Babel
// webpack.config.js
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: babel-loader,options: {presets: [babel/preset-env],},},},],},
};6. 处理 TypeScript 文件
安装 ts-loader 和 TypeScript
npm install ts-loader typescript --save-dev配置 Webpack 和 TypeScript
// webpack.config.js
const path require(path);module.exports {entry: ./src/index.ts,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},resolve: {extensions: [.ts, .js],},module: {rules: [{test: /\.ts$/,use: ts-loader,exclude: /node_modules/,},],},
};Loader 配置详解
每个 Loader 规则通常包含以下几个属性
test: 一个正则表达式匹配文件路径。use: 定义使用的 loader可以是字符串或对象或 loader 和选项的数组。exclude: 排除某些文件路径。include: 仅处理某些文件路径。
例如下面是一个更复杂的 Loader 配置示例
module.exports {module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: babel-loader,options: {presets: [babel/preset-env],},},},{test: /\.css$/i,use: [style-loader, css-loader],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource,},{test: /\.scss$/i,use: [style-loader, css-loader, sass-loader],},{test: /\.ts$/,exclude: /node_modules/,use: ts-loader,},{test: /\.(woff|woff2|eot|ttf|otf)$/i,type: asset/resource,},],},
};总结
Loader 是 Webpack 用来转换模块的工具可以将非 JavaScript 文件转换为 JavaScript 模块。安装 Loader通过 npm 安装所需的 Loader。配置 Webpack在 Webpack 配置文件中定义 Loader 规则使用 test、use、exclude、include 等属性来配置 Loader。常见的 Loadercss-loader、style-loader、file-loader、url-loader、sass-loader、babel-loader、ts-loader 等。
通过合理使用 Loader可以让 Webpack 处理各种类型的文件从而实现更复杂和灵活的构建过程。
1.2.4 Plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括从打包优化和压缩
在 Webpack 中插件Plugins用于执行更广泛的任务比如打包优化、资源管理和环境变量注入等。插件的功能比 Loader 更强大和灵活Loader 主要用于转换单个文件而插件可以直接操作整个构建过程。
使用插件的基本步骤
安装插件通过 npm 安装所需的插件。引入插件在 Webpack 配置文件中引入插件。配置插件在 Webpack 配置文件的 plugins 数组中配置插件。
常用插件及其示例
1. HtmlWebpackPlugin
HtmlWebpackPlugin 用于简化 HTML 文件的创建以便为 Webpack 打包后的文件提供服务。它可以自动生成一个 HTML 文件并将打包后的文件自动插入其中。
安装插件
npm install html-webpack-plugin --save-dev配置 Webpack
// webpack.config.js
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},plugins: [new HtmlWebpackPlugin({template: ./src/template.html, // 使用的 HTML 模板文件filename: index.html, // 生成的 HTML 文件名}),],
};2. CleanWebpackPlugin
CleanWebpackPlugin 在每次构建前清理输出目录确保输出目录只包含生产文件。
安装插件
npm install clean-webpack-plugin --save-dev配置 Webpack
// webpack.config.js
const path require(path);
const { CleanWebpackPlugin } require(clean-webpack-plugin);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},plugins: [new CleanWebpackPlugin(), // 默认会清理 output.path 目录],
};3. MiniCssExtractPlugin
MiniCssExtractPlugin 用于将 CSS 提取到单独的文件中。它支持按需加载 CSS 和 SourceMaps。
安装插件
npm install mini-css-extract-plugin --save-dev配置 Webpack
// webpack.config.js
const path require(path);
const MiniCssExtractPlugin require(mini-css-extract-plugin);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, css-loader],},],},plugins: [new MiniCssExtractPlugin({filename: [name].css, // 输出的 CSS 文件名}),],
};4. DefinePlugin
DefinePlugin 允许你在编译时创建配置的全局常量。它非常有用可以根据不同的环境定义不同的变量值。
安装插件
DefinePlugin 是 Webpack 内置的插件不需要安装。
配置 Webpack
// webpack.config.js
const path require(path);
const webpack require(webpack);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},plugins: [new webpack.DefinePlugin({process.env.NODE_ENV: JSON.stringify(production),}),],
};5. HotModuleReplacementPlugin
HotModuleReplacementPlugin 启用模块热替换允许在运行时更新各种模块而无需进行完全刷新。
安装插件
HotModuleReplacementPlugin 是 Webpack 内置的插件不需要安装。
配置 Webpack
// webpack.config.js
const path require(path);
const webpack require(webpack);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},devServer: {contentBase: path.resolve(__dirname, dist),hot: true, // 启用热模块替换},plugins: [new webpack.HotModuleReplacementPlugin(),],
};6. CopyWebpackPlugin
CopyWebpackPlugin 用于将单个文件或整个目录复制到构建目录中。
安装插件
npm install copy-webpack-plugin --save-dev配置 Webpack
// webpack.config.js
const path require(path);
const CopyWebpackPlugin require(copy-webpack-plugin);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},plugins: [new CopyWebpackPlugin({patterns: [{ from: src/assets, to: assets }, // 将 src/assets 目录复制到 dist/assets],}),],
};配置示例
以下是一个更完整的 Webpack 配置示例展示了不同插件的组合使用
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const { CleanWebpackPlugin } require(clean-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin);
const webpack require(webpack);
const CopyWebpackPlugin require(copy-webpack-plugin);module.exports {entry: ./src/index.js,output: {filename: [name].[contenthash].js,path: path.resolve(__dirname, dist),publicPath: /,},mode: production,module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, css-loader],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource,},],},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({template: ./src/template.html,filename: index.html,}),new MiniCssExtractPlugin({filename: [name].[contenthash].css,}),new webpack.DefinePlugin({process.env.NODE_ENV: JSON.stringify(production),}),new CopyWebpackPlugin({patterns: [{ from: src/assets, to: assets },],}),],
};总结
插件 是 Webpack 中非常强大和灵活的工具用于执行打包优化、资源管理和环境变量注入等任务。安装插件通过 npm 安装所需的插件。引入插件在 Webpack 配置文件中引入插件。配置插件在 Webpack 配置文件的 plugins 数组中配置插件。
通过合理使用插件可以极大地增强 Webpack 的功能满足各种复杂的构建需求。
1.2.5 Mode
模式(Mode)指示 webpack 使用相应模式的配置。
在 Webpack 中mode 是一个重要的配置项它可以设置 Webpack 在不同的模式下运行。mode 参数有三个可选值
development开发模式设置为该模式会启用有用的开发工具和优化构建速度。production生产模式设置为该模式会启用各种优化如代码压缩、作用域提升和去除未使用代码。none不使用任何默认优化或开发工具提供最大程度的配置灵活性。
mode 配置
你可以在 Webpack 配置文件中设置 mode或者在命令行参数中传递。
在配置文件中设置 mode
// webpack.config.js
module.exports {mode: development, // development or production or noneentry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},
};在命令行参数中设置 mode
webpack --mode development
webpack --mode production
webpack --mode none各模式下的默认配置
development
开发模式下启用的一些默认配置
process.env.NODE_ENV 被设置为 development启用 NamedChunksPlugin 和 NamedModulesPlugindevtool 被设置为 eval生成原始源代码 (没有对 module 进行优化)输出未被压缩的构建
示例
// webpack.config.js
module.exports {mode: development,entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},devtool: eval, // 快速生成 source maps
};production
生产模式下启用的一些默认配置
process.env.NODE_ENV 被设置为 production启用模块连接优化 (module concatenation) 和压缩输出devtool 被设置为 source-map生成映射到原始源代码的 source maps启用各种优化例如 tree shaking、代码压缩TerserPlugin
示例
// webpack.config.js
module.exports {mode: production,entry: ./src/index.js,output: {filename: bundle.[contenthash].js,path: path.resolve(__dirname, dist),},devtool: source-map, // 生成 source maps 以便调试
};none
不使用任何默认优化或开发工具可以最大程度地自定义配置。
示例
// webpack.config.js
module.exports {mode: none,entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},
};mode 对构建结果的影响
mode 的值会影响到构建结果的大小、性能和调试体验。例如 开发模式 (development) 启用 source maps帮助开发者调试代码输出未被压缩的代码构建速度快利于快速迭代启用详细的错误信息和警告帮助发现问题 生产模式 (production) 进行代码压缩和优化减少输出文件的大小启用 tree shaking去除未使用的代码生成高质量的 source maps帮助生产环境下的调试
示例
以下是一个完整的 Webpack 配置示例展示了如何根据不同的模式进行配置
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const { CleanWebpackPlugin } require(clean-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin);
const webpack require(webpack);module.exports (env, argv) {const isProduction argv.mode production;return {entry: ./src/index.js,output: {filename: isProduction ? bundle.[contenthash].js : bundle.js,path: path.resolve(__dirname, dist),publicPath: /,},mode: argv.mode || development,devtool: isProduction ? source-map : eval,module: {rules: [{test: /\.css$/i,use: [isProduction ? MiniCssExtractPlugin.loader : style-loader,css-loader],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource,},],},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({template: ./src/template.html,filename: index.html,}),new MiniCssExtractPlugin({filename: [name].[contenthash].css,}),new webpack.DefinePlugin({process.env.NODE_ENV: JSON.stringify(argv.mode),}),],devServer: {contentBase: path.resolve(__dirname, dist),hot: !isProduction,},};
};这个配置示例展示了如何根据不同的模式来调整构建输出、开发工具和插件配置。通过设置 mode你可以方便地在开发模式和生产模式之间切换从而提高开发效率和构建质量。
1.2.6 devServer
devServer 是 Webpack 提供的一个开发服务器选项主要用于提升开发体验。它可以提供一个本地服务器自动重新加载浏览器支持热模块替换Hot Module Replacement, HMR方便开发者在开发过程中实时查看代码更改效果。
使用 devServer
要使用 devServer你需要安装 webpack-dev-server
npm install --save-dev webpack-dev-server配置 devServer
devServer 配置项需要添加到 Webpack 配置文件中。下面是一些常用的配置选项
基本配置
// webpack.config.js
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},mode: development,devServer: {contentBase: path.resolve(__dirname, dist),compress: true, // 启用 gzip 压缩port: 9000, // 服务器端口号},plugins: [new HtmlWebpackPlugin({template: ./src/index.html,}),],
};热模块替换HMR
热模块替换允许在不刷新整个页面的情况下更新应用程序中的模块。这对于保持应用程序状态非常有用。
// webpack.config.js
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const webpack require(webpack);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},mode: development,devServer: {contentBase: path.resolve(__dirname, dist),hot: true, // 启用 HMR},plugins: [new HtmlWebpackPlugin({template: ./src/index.html,}),new webpack.HotModuleReplacementPlugin(), // 启用 HMR 插件],
};在你的 JavaScript 文件中你需要添加一些代码来处理模块更新
if (module.hot) {module.hot.accept(./module.js, function () {console.log(Accepting the updated module!);// 使用新的模块进行重新渲染等操作});
}配置示例
以下是一个更完整的 Webpack 配置示例包括了各种 devServer 配置项
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const webpack require(webpack);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},mode: development,devServer: {static: {directory: path.join(__dirname, dist), // 提供内容的目录},compress: true, // 启用 gzip 压缩port: 9000, // 服务器端口号open: true, // 自动打开浏览器hot: true, // 启用 HMRhistoryApiFallback: true, // 适用于单页面应用程序proxy: { // 代理 API 请求/api: http://localhost:3000,},},module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader],},],},plugins: [new HtmlWebpackPlugin({template: ./src/index.html,}),new webpack.HotModuleReplacementPlugin(), // 启用 HMR 插件],
};常用的 devServer 配置选项
static.directory指定静态文件所在的目录。compress是否启用 gzip 压缩。port指定开发服务器运行的端口。open是否在服务器启动后自动打开浏览器。hot是否启用热模块替换HMR。historyApiFallback是否启用 HTML5 历史记录 API 回退功能适用于单页面应用。proxy设置代理将特定请求代理到另一个服务器。
总结
devServer 是 Webpack 中一个非常强大的工具它可以极大地提升开发体验。通过使用 devServer开发者可以快速启动一个本地服务器实时查看代码修改效果甚至在不刷新页面的情况下更新模块。通过合理配置 devServer可以更高效地进行前端开发。# Webpack基础学习-Day01
1.1 webpack 是什么
webpack 是一种前端资源构建工具一个静态模块打包器(module bundler)。
在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
它将根据模块的依赖关系进行静态分析打包生成对应的静态资源(bundle)。
1.2 webpack 核心概念
1.2.1 Entry
入口(Entry)指示 webpack 以哪个文件为入口起点开始打包分析构建内部依赖图。
在 Webpack 中entry 属性指定了 Webpack 用来构建其内部依赖图的起点或入口点。换句话说entry 告诉 Webpack 从哪里开始打包代码。
entry 属性的用法
entry 属性的值可以是以下几种类型
字符串单个入口文件。数组多个入口文件这些文件的内容会被打包到一个 bundle 中。对象多个入口点每个入口点会生成一个独立的 bundle。
1. 字符串类型的 entry
这是最简单的用法指定一个单一的入口文件
module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},
};在这种情况下Webpack 从 ./src/index.js 开始构建依赖图并将所有模块打包到 bundle.js 文件中。
2. 数组类型的 entry
如果你有多个文件需要作为入口但希望将它们打包到一个 bundle 中可以使用数组
module.exports {entry: [./src/index.js, ./src/anotherModule.js],output: {filename: bundle.js,path: path.resolve(__dirname, dist),},
};这种情况下index.js 和 anotherModule.js 会被打包到同一个 bundle.js 文件中。
3. 对象类型的 entry
对象类型的 entry 允许你定义多个独立的入口点每个入口点会生成一个独立的 bundle
module.exports {entry: {app: ./src/app.js,admin: ./src/admin.js,},output: {filename: [name].bundle.js,path: path.resolve(__dirname, dist),},
};在这种情况下会生成两个独立的 bundle 文件app.bundle.js 和 admin.bundle.js。[name] 是一个占位符会被 entry 对象的键替换。
高级用法
动态入口
可以通过函数返回一个对象来动态生成入口点
module.exports {entry: () {const entries {main: ./src/main.js,};if (process.env.NODE_ENV development) {entries.dev ./src/dev.js;}return entries;},output: {filename: [name].bundle.js,path: path.resolve(__dirname, dist),},
};这种方式允许根据环境或其他条件动态配置入口点。
使用多个入口和 SplitChunks 插件
通过配合 SplitChunksPlugin可以将共享代码提取到一个独立的 chunk 中
module.exports {entry: {app: ./src/app.js,admin: ./src/admin.js,},output: {filename: [name].bundle.js,path: path.resolve(__dirname, dist),},optimization: {splitChunks: {chunks: all,},},
};这种配置会将 app.js 和 admin.js 中的共享模块提取到一个公共的 bundle 中从而减少重复代码。
配置示例
以下是一个更完整的 Webpack 配置示例展示了不同类型的 entry 配置和一些常见的插件配置
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const { CleanWebpackPlugin } require(clean-webpack-plugin);module.exports {entry: {app: ./src/app.js,admin: ./src/admin.js,},output: {filename: [name].[contenthash].bundle.js,path: path.resolve(__dirname, dist),publicPath: /,},mode: production,module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: babel-loader,},{test: /\.css$/,use: [style-loader, css-loader],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource,},],},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({template: ./src/template.html,chunks: [app], // 仅包含 app chunk}),new HtmlWebpackPlugin({template: ./src/admin-template.html,filename: admin.html,chunks: [admin], // 仅包含 admin chunk}),],optimization: {splitChunks: {chunks: all,},},
};总结
entry 属性是 Webpack 配置中的一个重要部分它定义了 Webpack 构建的入口点。通过灵活使用字符串、数组和对象类型的 entry你可以实现不同的构建策略和优化代码拆分。结合 Webpack 的其他特性如插件和优化选项可以构建高效、可维护的前端项目。
1.2.2 Output
输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去以及如何命名。
output 属性是 Webpack 配置中的一个关键部分它定义了打包后输出文件的相关设置。通过配置 output你可以指定打包文件的名称、路径、公共路径等。
基本配置
1. filename
filename 用于指定输出文件的名称。可以使用占位符来生成动态文件名。
module.exports {entry: ./src/index.js,output: {filename: bundle.js, // 输出文件名path: path.resolve(__dirname, dist), // 输出路径},
};常用的占位符包括
[name]: 入口点名称[id]: chunk ID[hash]: 编译时的唯一 hash[chunkhash]: chunk 的 hash[contenthash]: 文件内容的 hash
module.exports {entry: {app: ./src/app.js,admin: ./src/admin.js,},output: {filename: [name].[contenthash].js, // 动态生成文件名path: path.resolve(__dirname, dist),},
};2. path
path 用于指定输出目录的绝对路径。通常使用 Node.js 的 path 模块来生成绝对路径。
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist), // 使用绝对路径},
};3. publicPath
publicPath 用于指定输出解析文件的公共 URL 地址。通常用于配置 CDN 地址或开发服务器地址。
module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),publicPath: /, // 公共路径通常用于配置 CDN 地址},
};高级配置
1. chunkFilename
chunkFilename 用于指定按需加载的 chunk 文件的名称模板。类似于 filename可以使用占位符。
module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),chunkFilename: [name].[contenthash].js, // 按需加载的 chunk 文件名},
};2. assetModuleFilename
assetModuleFilename 用于指定通过资源模块如图像、字体等处理的文件的输出文件名模板。
module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),assetModuleFilename: assets/[name].[hash][ext], // 资源模块文件名},
};3. library 和 libraryTarget
library 和 libraryTarget 用于将你的 bundle 输出为一个库。
library 指定库的名称。libraryTarget 指定导出库的方式如 var, umd, commonjs2 等。
module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),library: MyLibrary, // 库名称libraryTarget: umd, // 输出库的方式},
};常见示例
示例 1简单的单入口点配置
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},
};示例 2多入口点配置
const path require(path);module.exports {entry: {app: ./src/app.js,admin: ./src/admin.js,},output: {filename: [name].[contenthash].js,path: path.resolve(__dirname, dist),},
};示例 3配置公共路径
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),publicPath: https://cdn.example.com/assets/, // 使用 CDN 地址},
};示例 4配置资源模块输出
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),assetModuleFilename: images/[name].[hash][ext], // 资源模块文件名},module: {rules: [{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource,},],},
};详细解释
filename指定输出文件的名称可以使用占位符动态生成文件名。path指定输出目录的绝对路径通常使用 Node.js 的 path.resolve 方法。publicPath指定公共路径通常用于配置 CDN 地址或开发服务器地址。chunkFilename指定按需加载的 chunk 文件的名称模板。assetModuleFilename指定资源模块处理的文件输出名称模板。library 和 libraryTarget用于将你的 bundle 输出为一个库指定库的名称和导出方式。
通过配置 output 属性可以灵活地控制 Webpack 打包输出文件的名称、路径和其他相关设置以满足各种需求。
1.2.3 Loader
Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解
JavaScript)
在 Webpack 中Loader 是一种用于转换模块的机制。在 Webpack 中一切文件都是模块而 Loader 则用于告诉 Webpack 如何处理那些非 JavaScript 文件例如CSS、图片、字体、TypeScript 等。通过使用 Loader你可以在 import 或 require 模块时预处理文件并将它们转换为 JavaScript 模块。
使用 Loader 的步骤
安装 Loader通过 npm 安装所需的 Loader。配置 Webpack在 Webpack 配置文件中定义 Loader 规则。
常用 Loader 示例
1. 处理 CSS 文件的 Loader
安装 style-loader 和 css-loader
npm install style-loader css-loader --save-dev配置 Webpack
// webpack.config.js
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader],},],},
};这个配置会使用 css-loader 将 CSS 文件解析成 JavaScript 可以理解的模块然后使用 style-loader 将 CSS 注入到 DOM 中。
2. 处理图像文件的 Loader
安装 file-loader 或 url-loader
npm install file-loader url-loader --save-dev配置 Webpack
// webpack.config.js
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},module: {rules: [{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource, // 使用内置资源模块},],},
};asset/resource 会将图像文件单独输出到指定目录并返回图像的 URL。
3. 处理字体文件的 Loader
字体文件可以使用与图像文件类似的 file-loader 或 url-loader这里使用 Webpack 5 内置的资源模块
// webpack.config.js
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},module: {rules: [{test: /\.(woff|woff2|eot|ttf|otf)$/i,type: asset/resource, // 使用内置资源模块},],},
};4. 处理 Sass 文件的 Loader
安装 sass-loader、sassDart Sass、style-loader 和 css-loader
npm install sass-loader sass style-loader css-loader --save-dev配置 Webpack
// webpack.config.js
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},module: {rules: [{test: /\.scss$/i,use: [style-loader, css-loader, sass-loader],},],},
};这个配置会使用 sass-loader 将 Sass 文件编译成 CSS然后使用 css-loader 和 style-loader 处理 CSS。
5. 处理 Babel 的 JavaScript 文件
安装 babel-loader 和 Babel 的相关包
npm install babel-loader babel/core babel/preset-env --save-dev配置 Webpack 和 Babel
// webpack.config.js
const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: babel-loader,options: {presets: [babel/preset-env],},},},],},
};6. 处理 TypeScript 文件
安装 ts-loader 和 TypeScript
npm install ts-loader typescript --save-dev配置 Webpack 和 TypeScript
// webpack.config.js
const path require(path);module.exports {entry: ./src/index.ts,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},resolve: {extensions: [.ts, .js],},module: {rules: [{test: /\.ts$/,use: ts-loader,exclude: /node_modules/,},],},
};Loader 配置详解
每个 Loader 规则通常包含以下几个属性
test: 一个正则表达式匹配文件路径。use: 定义使用的 loader可以是字符串或对象或 loader 和选项的数组。exclude: 排除某些文件路径。include: 仅处理某些文件路径。
例如下面是一个更复杂的 Loader 配置示例
module.exports {module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: babel-loader,options: {presets: [babel/preset-env],},},},{test: /\.css$/i,use: [style-loader, css-loader],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource,},{test: /\.scss$/i,use: [style-loader, css-loader, sass-loader],},{test: /\.ts$/,exclude: /node_modules/,use: ts-loader,},{test: /\.(woff|woff2|eot|ttf|otf)$/i,type: asset/resource,},],},
};总结
Loader 是 Webpack 用来转换模块的工具可以将非 JavaScript 文件转换为 JavaScript 模块。安装 Loader通过 npm 安装所需的 Loader。配置 Webpack在 Webpack 配置文件中定义 Loader 规则使用 test、use、exclude、include 等属性来配置 Loader。常见的 Loadercss-loader、style-loader、file-loader、url-loader、sass-loader、babel-loader、ts-loader 等。
通过合理使用 Loader可以让 Webpack 处理各种类型的文件从而实现更复杂和灵活的构建过程。
1.2.4 Plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括从打包优化和压缩
在 Webpack 中插件Plugins用于执行更广泛的任务比如打包优化、资源管理和环境变量注入等。插件的功能比 Loader 更强大和灵活Loader 主要用于转换单个文件而插件可以直接操作整个构建过程。
使用插件的基本步骤
安装插件通过 npm 安装所需的插件。引入插件在 Webpack 配置文件中引入插件。配置插件在 Webpack 配置文件的 plugins 数组中配置插件。
常用插件及其示例
1. HtmlWebpackPlugin
HtmlWebpackPlugin 用于简化 HTML 文件的创建以便为 Webpack 打包后的文件提供服务。它可以自动生成一个 HTML 文件并将打包后的文件自动插入其中。
安装插件
npm install html-webpack-plugin --save-dev配置 Webpack
// webpack.config.js
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},plugins: [new HtmlWebpackPlugin({template: ./src/template.html, // 使用的 HTML 模板文件filename: index.html, // 生成的 HTML 文件名}),],
};2. CleanWebpackPlugin
CleanWebpackPlugin 在每次构建前清理输出目录确保输出目录只包含生产文件。
安装插件
npm install clean-webpack-plugin --save-dev配置 Webpack
// webpack.config.js
const path require(path);
const { CleanWebpackPlugin } require(clean-webpack-plugin);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},plugins: [new CleanWebpackPlugin(), // 默认会清理 output.path 目录],
};3. MiniCssExtractPlugin
MiniCssExtractPlugin 用于将 CSS 提取到单独的文件中。它支持按需加载 CSS 和 SourceMaps。
安装插件
npm install mini-css-extract-plugin --save-dev配置 Webpack
// webpack.config.js
const path require(path);
const MiniCssExtractPlugin require(mini-css-extract-plugin);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, css-loader],},],},plugins: [new MiniCssExtractPlugin({filename: [name].css, // 输出的 CSS 文件名}),],
};4. DefinePlugin
DefinePlugin 允许你在编译时创建配置的全局常量。它非常有用可以根据不同的环境定义不同的变量值。
安装插件
DefinePlugin 是 Webpack 内置的插件不需要安装。
配置 Webpack
// webpack.config.js
const path require(path);
const webpack require(webpack);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},plugins: [new webpack.DefinePlugin({process.env.NODE_ENV: JSON.stringify(production),}),],
};5. HotModuleReplacementPlugin
HotModuleReplacementPlugin 启用模块热替换允许在运行时更新各种模块而无需进行完全刷新。
安装插件
HotModuleReplacementPlugin 是 Webpack 内置的插件不需要安装。
配置 Webpack
// webpack.config.js
const path require(path);
const webpack require(webpack);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},devServer: {contentBase: path.resolve(__dirname, dist),hot: true, // 启用热模块替换},plugins: [new webpack.HotModuleReplacementPlugin(),],
};6. CopyWebpackPlugin
CopyWebpackPlugin 用于将单个文件或整个目录复制到构建目录中。
安装插件
npm install copy-webpack-plugin --save-dev配置 Webpack
// webpack.config.js
const path require(path);
const CopyWebpackPlugin require(copy-webpack-plugin);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},plugins: [new CopyWebpackPlugin({patterns: [{ from: src/assets, to: assets }, // 将 src/assets 目录复制到 dist/assets],}),],
};配置示例
以下是一个更完整的 Webpack 配置示例展示了不同插件的组合使用
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const { CleanWebpackPlugin } require(clean-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin);
const webpack require(webpack);
const CopyWebpackPlugin require(copy-webpack-plugin);module.exports {entry: ./src/index.js,output: {filename: [name].[contenthash].js,path: path.resolve(__dirname, dist),publicPath: /,},mode: production,module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, css-loader],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource,},],},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({template: ./src/template.html,filename: index.html,}),new MiniCssExtractPlugin({filename: [name].[contenthash].css,}),new webpack.DefinePlugin({process.env.NODE_ENV: JSON.stringify(production),}),new CopyWebpackPlugin({patterns: [{ from: src/assets, to: assets },],}),],
};总结
插件 是 Webpack 中非常强大和灵活的工具用于执行打包优化、资源管理和环境变量注入等任务。安装插件通过 npm 安装所需的插件。引入插件在 Webpack 配置文件中引入插件。配置插件在 Webpack 配置文件的 plugins 数组中配置插件。
通过合理使用插件可以极大地增强 Webpack 的功能满足各种复杂的构建需求。
1.2.5 Mode
模式(Mode)指示 webpack 使用相应模式的配置。
在 Webpack 中mode 是一个重要的配置项它可以设置 Webpack 在不同的模式下运行。mode 参数有三个可选值
development开发模式设置为该模式会启用有用的开发工具和优化构建速度。production生产模式设置为该模式会启用各种优化如代码压缩、作用域提升和去除未使用代码。none不使用任何默认优化或开发工具提供最大程度的配置灵活性。
mode 配置
你可以在 Webpack 配置文件中设置 mode或者在命令行参数中传递。
在配置文件中设置 mode
// webpack.config.js
module.exports {mode: development, // development or production or noneentry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},
};在命令行参数中设置 mode
webpack --mode development
webpack --mode production
webpack --mode none各模式下的默认配置
development
开发模式下启用的一些默认配置
process.env.NODE_ENV 被设置为 development启用 NamedChunksPlugin 和 NamedModulesPlugindevtool 被设置为 eval生成原始源代码 (没有对 module 进行优化)输出未被压缩的构建
示例
// webpack.config.js
module.exports {mode: development,entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},devtool: eval, // 快速生成 source maps
};production
生产模式下启用的一些默认配置
process.env.NODE_ENV 被设置为 production启用模块连接优化 (module concatenation) 和压缩输出devtool 被设置为 source-map生成映射到原始源代码的 source maps启用各种优化例如 tree shaking、代码压缩TerserPlugin
示例
// webpack.config.js
module.exports {mode: production,entry: ./src/index.js,output: {filename: bundle.[contenthash].js,path: path.resolve(__dirname, dist),},devtool: source-map, // 生成 source maps 以便调试
};none
不使用任何默认优化或开发工具可以最大程度地自定义配置。
示例
// webpack.config.js
module.exports {mode: none,entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},
};mode 对构建结果的影响
mode 的值会影响到构建结果的大小、性能和调试体验。例如 开发模式 (development) 启用 source maps帮助开发者调试代码输出未被压缩的代码构建速度快利于快速迭代启用详细的错误信息和警告帮助发现问题 生产模式 (production) 进行代码压缩和优化减少输出文件的大小启用 tree shaking去除未使用的代码生成高质量的 source maps帮助生产环境下的调试
示例
以下是一个完整的 Webpack 配置示例展示了如何根据不同的模式进行配置
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const { CleanWebpackPlugin } require(clean-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin);
const webpack require(webpack);module.exports (env, argv) {const isProduction argv.mode production;return {entry: ./src/index.js,output: {filename: isProduction ? bundle.[contenthash].js : bundle.js,path: path.resolve(__dirname, dist),publicPath: /,},mode: argv.mode || development,devtool: isProduction ? source-map : eval,module: {rules: [{test: /\.css$/i,use: [isProduction ? MiniCssExtractPlugin.loader : style-loader,css-loader],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource,},],},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({template: ./src/template.html,filename: index.html,}),new MiniCssExtractPlugin({filename: [name].[contenthash].css,}),new webpack.DefinePlugin({process.env.NODE_ENV: JSON.stringify(argv.mode),}),],devServer: {contentBase: path.resolve(__dirname, dist),hot: !isProduction,},};
};这个配置示例展示了如何根据不同的模式来调整构建输出、开发工具和插件配置。通过设置 mode你可以方便地在开发模式和生产模式之间切换从而提高开发效率和构建质量。
1.2.6 devServer
devServer 是 Webpack 提供的一个开发服务器选项主要用于提升开发体验。它可以提供一个本地服务器自动重新加载浏览器支持热模块替换Hot Module Replacement, HMR方便开发者在开发过程中实时查看代码更改效果。
使用 devServer
要使用 devServer你需要安装 webpack-dev-server
npm install --save-dev webpack-dev-server配置 devServer
devServer 配置项需要添加到 Webpack 配置文件中。下面是一些常用的配置选项
基本配置
// webpack.config.js
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},mode: development,devServer: {contentBase: path.resolve(__dirname, dist),compress: true, // 启用 gzip 压缩port: 9000, // 服务器端口号},plugins: [new HtmlWebpackPlugin({template: ./src/index.html,}),],
};热模块替换HMR
热模块替换允许在不刷新整个页面的情况下更新应用程序中的模块。这对于保持应用程序状态非常有用。
// webpack.config.js
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const webpack require(webpack);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},mode: development,devServer: {contentBase: path.resolve(__dirname, dist),hot: true, // 启用 HMR},plugins: [new HtmlWebpackPlugin({template: ./src/index.html,}),new webpack.HotModuleReplacementPlugin(), // 启用 HMR 插件],
};在你的 JavaScript 文件中你需要添加一些代码来处理模块更新
if (module.hot) {module.hot.accept(./module.js, function () {console.log(Accepting the updated module!);// 使用新的模块进行重新渲染等操作});
}配置示例
以下是一个更完整的 Webpack 配置示例包括了各种 devServer 配置项
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);
const webpack require(webpack);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},mode: development,devServer: {static: {directory: path.join(__dirname, dist), // 提供内容的目录},compress: true, // 启用 gzip 压缩port: 9000, // 服务器端口号open: true, // 自动打开浏览器hot: true, // 启用 HMRhistoryApiFallback: true, // 适用于单页面应用程序proxy: { // 代理 API 请求/api: http://localhost:3000,},},module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader],},],},plugins: [new HtmlWebpackPlugin({template: ./src/index.html,}),new webpack.HotModuleReplacementPlugin(), // 启用 HMR 插件],
};常用的 devServer 配置选项
static.directory指定静态文件所在的目录。compress是否启用 gzip 压缩。port指定开发服务器运行的端口。open是否在服务器启动后自动打开浏览器。hot是否启用热模块替换HMR。historyApiFallback是否启用 HTML5 历史记录 API 回退功能适用于单页面应用。proxy设置代理将特定请求代理到另一个服务器。
总结
devServer 是 Webpack 中一个非常强大的工具它可以极大地提升开发体验。通过使用 devServer开发者可以快速启动一个本地服务器实时查看代码修改效果甚至在不刷新页面的情况下更新模块。通过合理配置 devServer可以更高效地进行前端开发。
