1.webpack的安装和使用方式
- 安装 Node.js 和 npm
首先，确保你的计算机上安装了 Node.js 和 npm（Node 包管理器），因为 Webpack 是通过 npm 进行安装和管理的。
-
创建项目目录并初始化 npm
npm init -y
-
安装 Webpack
npm install webpack webpack-cli --save-dev
-
创建 webpack 配置文件
在项目根目录下创建一个名为 webpack.config.js 的文件，这是 Webpack 的配置文件，用来指示 Webpack 如何打包项目中的文件。
-
运行打包命令
npx webpack
2.webpack的热更新原理
- 模块热替换（Hot Module Replacement）：
Webpack 的热更新基于模块热替换技术。它允许在应用程序运行过程中替换、添加或删除模块，而无需完全刷新页面。这种替换是在运行时进行的，可以使应用程序保持在当前状态下重新加载所需的部分。
- HMR Runtime（热更新运行时）：
Webpack 会在构建过程中生成一个称为 HMR Runtime 的代码块。这段代码在运行时与应用程序一起加载，并通过 WebSocket 与开发服务器保持连接。HMR Runtime 负责管理模块热替换的逻辑。
- 监视文件变化：
在开发模式下，Webpack 会监视项目中各个文件的变化。当开发者保存文件时，Webpack 检测到文件发生变化，并触发重新编译过程。
- 构建更新的模块：
在重新编译过程中，Webpack 会确定哪些模块发生了变化，并构建更新的模块。这些更新的模块并不会替换现有的模块，而是生成一个更新的版本。
- HMR 接口：
HMR Runtime 与开发服务器建立了 WebSocket 连接，并通过 HMR 接口通信。当构建完成并生成了更新的模块时，Webpack 会将更新的模块信息通过 HMR 接口发送给 HMR Runtime。
- 热更新处理：
HMR Runtime 接收到更新的模块信息后，会根据更新的模块执行相应的操作。这可能涉及替换现有的模块、添加新模块或删除不再需要的模块。这样，应用程序的状态就得到了实时更新，而不需要完全刷新页面。
总的来说，Webpack 的热更新利用了模块热替换技术和 HMR Runtime，通过监视文件变化、构建更新的模块，并通过 WebSocket 与开发服务器进行通信，实现了代码的实时更新和页面局部刷新，提高了开发效率和体验。
3.webpack的常用loader
babel-loader：用于将ES6+的JavaScript代码转换为ES5代码，以便在旧版本浏览器中运行。 css-loader：用于解析CSS文件，并处理其中的import和url()等语法。 style-loader：将解析后的CSS代码以<style>标签的形式插入到HTML文件中。 file-loader：用于处理文件资源（如图片、字体等），并将其复制到输出目录中。 url-loader：类似于file-loader，但可以根据文件大小将文件转换为DataURL，以减少HTTP请求。 sass-loader：用于将Sass/SCSS代码转换为CSS代码。 less-loader：用于将Less代码转换为CSS代码。 postcss-loader：用于对CSS代码进行后处理，如自动添加浏览器前缀等。 vue-loader：用于解析和转换Vue单文件组件。 ts-loader：用于将TypeScript代码转换为JavaScript代码。
4.webpack的常用plugin以及作用
HtmlWebpackPlugin： 自动生成 HTML 文件，并将打包后的 JavaScript 或 CSS 文件自动引入到 HTML 文件中。可配置参数包括模板文件、输出文件名、压缩选项等。 MiniCssExtractPlugin： 将 CSS 提取为单独的文件，并进行压缩和优化。通常与 CSS 相关的 loader 结合使用，如 style-loader、css-loader 等。 CleanWebpackPlugin： 在每次构建之前清理输出目录（如 dist 目录），避免旧文件的累积。通常用于生产环境构建。 DefinePlugin： 允许在编译时创建全局常量，可用于注入环境变量，例如配置开发环境和生产环境下的不同行为。 CopyWebpackPlugin： 将文件或目录复制到构建输出目录，常用于复制静态资源文件，如图片、字体等。 OptimizeCssAssetsPlugin： 用于优化和压缩 CSS 文件。通常与 MiniCssExtractPlugin 结合使用，用于生产环境构建。 WebpackBundleAnalyzer： 分析打包文件的大小和依赖关系，可视化构建结果，帮助优化代码和资源。 ProvidePlugin： 自动加载模块，而不必到处 import 或 require。可以将全局变量注入到每个模块中，如将 jQuery 注入到每个模块中，使其无需手动引入。 CompressionWebpackPlugin： 在构建过程中对资源文件进行 gzip 压缩，以减小文件体积，提高加载速度。 HotModuleReplacementPlugin： 启用模块热替换（HMR）功能，实现代码修改后的实时更新，提高开发效率。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new CleanWebpackPlugin(),
],
};
5.webpack的配置
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 自动引入资源插件 npm install --save-dev html-webpack-plugin
const MiniCssExtracPlugin = require("mini-css-extrac-plugin"); // css抽离
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); //css压缩 npm install css-minimizer-webpack-plugin --save-dev
const TerserPlugin = require("terser-webpack-plugin"); // js压缩 npm install --save-dev terser-webpack-plugin
//加载toml、yarm、json5数据资源 npm install toml yarm json5 -D
const toml = require("toml");
const yarm = require("yarm");
const json5 = require("json5");
module.exports = (env) => {
return {
// 手动分离公共文件，通过配置成对象的方式实现多入口代码分割
// entry: {
// index:{
// import:"./src/index.js",
// dependOn: "shared" // 抽离公共文件
// },
// shared: "lodash" // 公共的js文件
// },
// 多入口
// entry: {
// pageOne: './src/pageOne/index.js',
// pageTwo: './src/pageTwo/index.js',
// pageThree: './src/pageThree/index.js',
// },
// 单入口
entry: {
index: "./src/index.js",
},
output: {
filename: "scripts/[name].[contenthash].js", // 将所有的js放入同一个文件夹，并且根据文件名自动命名
path: path.resolve(__dirname, "./dist"),
clean: true, // 清除上一次的垃圾文件
assetModuleFilename: "images/[contenthash][ext]", // 在images目录下，根据文件内容自动生成hash文件名
publicPath: "https://*****.com/", // 公共路径（cdn域名或者本地localhost）
},
mode: env.prodection ? "prodection" : "development", // 生产环境或者开发环境 package.json 启动命令：npx webpack --env prodection
devtool: "cheap-module-source-map", // 真实报错文件指向,生产环境一般不开启sourcemap
// 插件（非必要的，缺少也不影响项目打包）
plugins: [
new HtmlWebpackPlugin({
template: "./index.html", // 模板
filename: "app.html",
inject: "body", // script 存在的位置
hash: true, // 解决缓存
minify: {
removeAttributeQuotes: true, // 压缩，去掉引号
},
}),
new MiniCssExtracPlugin({
filename: "style/[contenthash].css",
}),
],
devServer: {
static: "./dist", // 监听根目录文件变化，自动刷新页面插件 npm install --save-dev webpack-dev-server
//反向代理
proxy: {
"/ajax": {
target: "https:**********",
ws: true,
changeOrigin: true,
},
},
},
// 模块（必要的，缺少影响项目打包）
module: {
rules: [
//资源模块类型我们称之为Asset Modules Type，总共有四种，来代替loader，分别是：
// asset/resource：发送一个单独的文件并导出URL，替代file-loader
// asset/inline：导出一个资源的data URI(base64)，替代url-loader
// asset/source：导出资源的源代码，之前通过使用raw-loader实现
// asset：介于asset/resource和asset/inline之间， 之前通过url-loader+limit属性实现。
{
test: /\.(png|gif|jp?g|svg|webp|ico)$/, // 正则图片文件
type: "asset",
generator: {
filename: "images/[contenthash][ext]", // 优先级高于 assetModuleFilename
},
},
{
// 支持less
// npm install style-loader css-loader less-loader less --save-dev
// 抽离 npm install mini-css-extrac-plugin --save-dev webpack5环境下构建的插件
test: /\.(le|c)ss$/, // .less and .css
use: [MiniCssExtracPlugin.loader,/* "style-loader", */ "css-loader","less-loader"],
},
{
test: /\.(woff|woff2|eot|ttf|oft)$/, // 正则字体文件
type: "asset/resource",
},
//加载csv、xml数据资源 npm install csv-loader xml-loader -D
{
test: /\.(csv|tsv)$/,
use: "csv-loader",
},
{
test: /\.xml$/,
use: "xml-loader",
},
//加载toml、yarm、json5数据资源
{
test: /\.toml$/,
type: "json",
parser: {
parse: toml.parse,
},
},
{
test: /\.yarm$/,
type: "json",
parser: {
parse: yarm.parse,
},
},
{
test: /\.json5$/,
type: "json",
parser: {
parse: json5.parse,
},
},
// loader工具 支持数组方式链式调用，数组靠后的元素先执行
{
// 压缩图片
//图片小于一定大小使用base64 否则使用file-loader产生真实图片 npm install url-loader --save-dev
test: /\.(png|gif|jp?g|svg|webp|ico)$/, // 正则
use: [
{
loader: "url-loader",
options: {
limit: 5000, //小于限定使用base64
name: "home/images/[name].[hash:8].[ext]",
publicPath: `../../`,
esModule: false,
},
},
],
},
// 使用babel-loader npm install -D babel-loader @babel/core @babel/preset-env
// regeneratorRuntime是webpack打包生成的全局辅助函数，由babel生成，用于兼容 async/await 的语法
// npm install --save @babel/runtime
// npm install --save-dev @babel/plugin-transform-runtime
{
test: /\.js$/,
exclude: /node_modules/, // *业务代码里面可能会引入node_modules外部js，这些js不需要babel-loader编译，因此需要排除掉
use: {
loader: "babel-loader", // *引入babel-loader
options: {
presets: ["@babel/preset-env"], // *引入预设
plugins: [
[
"@babel/plugin-transform-runtime", // *配置插件信息
],
],
},
},
},
],
},
optimization: {
minimizer: [new CssMinimizerPlugin(),new TerserPlugin()], //代码压缩 mode改为 production
splitChunks: {
// 缓存
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all", // 自动重复代码抽离
},
},
},
},
};
};
标签：npm,文件,面试题,前端,loader,webpack,模块,css From： https://www.cnblogs.com/qinlinkun/p/18136107