034_webpack中的加载器

Webpack5：模块打包与兼容优化实战指南
最新推荐文章于 2025-09-16 07:00:00 发布
原创 最新推荐文章于 2025-09-16 07:00:00 发布 · 580 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #前端 #node.js

本文详细介绍了如何使用Webpack 5打包处理不同类型的文件（如CSS、LESS、SASS、JS），解决IE11/10兼容问题，并配置Babel处理ES6语法。还涉及CSS预处理器、图片打包、Vue组件及前端开发工具的配置。

1. 通过loader打包非js模块

1.1. 在实际开发中, webpack默认只能打包处理以.js后缀名结尾的模块, 其它非.js后缀名结尾的模块, webpack默认处理不了, 需要调用loader加载器才可以正常打包, 否则会报错。

1.2. loader加载器可以协助webpack打包处理特定的文件模块, 比如:

  • less-loader可以打包处理.less相关的文件
  • sass-loader可以打包处理.scss相关的文件
  • url-loader可以打包处理css中与url路径相关的文件

1.3. loader的调用过程

2. 打包处理css文件

2.1. 在终端运行: npm install style-loader css-loader -D命令, 安装处理css文件的loader。

 

2.2. 在webpack.config.js的module——>rules数组中, 添加loader规则如下: 

2.3. 其中, test表示匹配的文件类型, use表示对应要调用的loader。

2.4. use数组中指定的loader顺序是固定的, 多个loader的调用顺序是从后往前调用。

2.5. 在src目录下新建css目录, 在该目录下创建index.css

 2.6. 在index.js中导入index.css

2.7. 重新打包运行项目 

3. 打包处理less文件

3.1. 在终端运行: npm install less-loader less -D命令, 安装处理less文件的loader。

 

3.2. 在webpack.config.js的module——>rules数组中, 添加loader规则如下: 

3.3. 在src目录下新建css目录, 在该目录下创建index.less 

3.4. 在index.js中导入index.less 

3.5. 重新打包运行项目 

4. 打包处理scss文件

4.1. 在终端运行: npm install sass-loader node-sass -D命令, 安装处理scss文件的loader。

4.2. 在webpack.config.js的module——>rules数组中, 添加loader规则如下: 

4.3. 在src目录下新建css目录, 在该目录下创建index.scss 

4.4. 在index.js中导入index.scss 

4.5. 重新打包运行项目 

5. webpack5打包出的js在IE11, IE10中报错

5.1. 使用webpack5默认打包出来的js文件在IE11, IE10中报错SCRIPT1002: 语法错误main.js (9,14)。原因和babel设置无关, webpack5中默认打包出来的js文件会用ES6语法中的箭头函数, 故在IE11和IE10中引用后会报错。

 

5.2. 在webpack.config.js中配置output.environment, 告诉webpack在生成的运行时代码中可以使用哪个版本的ES特性。 

5.3. 在webpack.config.js中配置target, 告知webpack为目标(target)指定一个环境。 

5.4. 配置以上任意一个选项后, IE11, IE10不再报错。生成的main.js中的箭头函数变成如下: 

6. 配置postcss自动添加css的兼容前缀(浏览器内核标识)

6.1. 在终端运行: npm install postcss-loader autoprefixer -D命令, 安装loader。

 

6.2. 在webpack.config.js的module——>rules数组中, 添加loader规则如下: 

6.3. 在项目根目录中, 创建postcss配置文件postcss.config.js并初始化基本配置如下: 

6.4. 在index.html中添加输入框, 使用placeholder属性 

6.5. 使用伪元素选择器给输入框提示文字添加颜色, 该选择器浏览器不兼容, 需要添加浏览器内核标识 

6.6. 重新打包, 运行项目, chrome浏览器 

6.7. IE11浏览器 

7. 打包处理js文件中的高级语法

7.1. 安装babel转换器相关的包: npm install babel-loader @babel/core @babel/runtime -D

7.2. 安装babel语法插件相关的包: npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D 

7.3. 在项目根目录中, 创建babel配置文件babel.config.js并初始化基本配置如下: 

7.4. 在webpack.config.js的module——>rules数组中, 添加loader规则, exclude为排除项, 表示babel-loader不需要处理node_modules中的js文件。 

7.5. 在index.js中使用类 

7.6. 重新打包, 运行项目, IE11浏览器 

8. 打包样式表中的图片

8.1. 使用webpack5的Asset Modules，可以轻松的将图片打入我们的系统中，配置webpack.config.js。

 8.2. 在index.html中添加div, id为bg

8.3. 在src目录下添加images目录, 存放两张图片 

8.4. 在index.css中使用背景图片 

8.5. 在index.html中直接使用图片 

8.6. 打包运行 

9. Vue单文件组件

9.1. Vue单文件组件的组成结构

9.1.1. template组件的模板区域

9.1.2. script业务逻辑区域

9.1.3. style样式区域

9.1.3. 在src目录下创建components目录, 然后在该目录下创建app.vue

9.2. webpack中配置vue组件的加载器

9.2.1. 在终端运行: npm install vue-loader vue-template-compiler -D命令, 添加相关loader

9.2.2. 在webpack.config.js配置文件中, 添加vue-loader和插件  

9.3. 在webpack项目中使用vue

9.3.1. 在终端运行: npm install vue -S命令安装vue

9.3.2. 在index.html中添加vue控制的页面区域 

9.3.3. 创建vue实例, 指定渲染区域进行渲染 

 

9.4. 打包运行 

如何在混淆代码中定位 Webpack 加载器：完整逆向指南
qq_43580271的博客
03-30 1462
动态分析：通过浏览器控制台和调试工具实时监控静态分析：使用 AST 工具解析代码结构Hook 技术：拦截关键函数调用版本适配：针对不同 Webpack 版本调整策略记住，逆向工程需要耐心和反复尝试。建议在合法合规的前提下进行此类分析，并尊重目标网站的服务条款。
markdown-loader：用于webpack的markdown加载器
02-03
降价加载器 用于webpack的markdown-loader，使用 。 安装 npm install markdown-loader 用法 由于mark的输出是HTML，因此最好与一起使用。 Webpack 2+ { module : { rules : [ { test : / \. md $ / , use : [ { loader : "html-loader" } ,
一文学会Webpack实用功能|加载器篇
xuzhijia1991的博客
01-05 4263
Webpack 资源模块加载 通过探索我们知道可以把css文件作为打包的入口，不过webpack的打包入口一般还是JavaScript, 因为他的打包入口从某种程度来说可以算是我们应用的运行入口。 而就目前而言，前端应用当中的业务是由JavaScript去驱动的，我们只是尝试一下，正确的做法还是把js文件作为打包的入口。然后在js代码当中通过import的方式去引入css文件。 这样的话css-loader仍然可以正常工作，我们再来尝试一下。我们在js中import我们的css文件 import creat
无框架组件化：Webpack组件加载器解析
最新发布
Linux技术宅
09-16 1210
是一个 Webpack 的 Loader，旨在**无需框架（如 Vue/React）**即可实现 CSS、JS、HTML 的组件化开发。通过 Webpack 的模块化机制，将组件的样式、逻辑和模板分离为独立文件，最终打包为浏览器可运行的代码。中添加规则，匹配组件文件（如。
webpack-loader（加载器）
CaseyWei
09-05 456
加载器是用于资源文件的转换。 加载器就是以资源文件作为入参并返回新的资源的函数（在Node.js中运行）。 例子 例如，您可以使用加载器告诉webpack加载CSS文件或TypeScript文件，并将之转换为JavaScript。 首先，安装相应的加载器： npm install --save-dev css-loader npm install --save-dev ts-loader ...
webpack中的加载器（loader）
weixin_45630345的博客
08-07 1574
一、了解webpack加载器 1.webpack加载器（loader）的作用         在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！ less-loader 可以打包处理.less相关的文件 sass-loader 可以打包处理.sass相关的文件 url-loader 可以打包处
study_webpack:study_webpack
05-14
3. **加载器（Loaders）**：Webpack 默认只能处理 JavaScript 模块，但通过加载器，我们可以处理其他类型的文件，如 CSS、图片、字体等。例如，`style-loader` 和 `css-loader` 可以让 CSS 被引入到 JavaScript 中。...
前端开发_webpack转换器_vite兼容_项目自动化迁移_1744166990.zip
04-09
它通过分析Webpack的配置文件，自动匹配Vite的配置项，对依赖项进行智能判断，并尝试将旧的加载器和插件转换为Vite支持的等效方案。此外，它还可能提供代码转换功能，将Webpack特定的代码模式转换为Vite兼容的代码。...
webpack_temp.zip
04-15
在描述中提到的文章链接是一个关于如何使用 Webpack 配置多页面应用的教程。在这个过程中，我们可以学习到以下关键知识点： 1. **Webpack 基础概念**： - **Entry**：入口是构建过程的起点，对应于多页面应用中的...
react_reflux_webpack_starter
07-16
Webpack通过配置文件（webpack.config.js）来定制打包过程，支持加载器（Loader）和插件（Plugin）扩展其功能。在这个项目中，Webpack将处理所有依赖的安装和应用的启动，确保开发环境的顺畅运行。 四、项目初始化...
my_webpack:webpack实践项目
03-30
在 "my_webpack" 项目中，通过实际操作和调整这个配置文件，你可以学习到如何配置各种加载器和插件，以及如何组织项目结构以适应 Webpack 的构建过程。这将有助于提升你在实际开发中的前端构建技能。此外，Webpack 4...
webpack--加载器(loader)
cjx177187的博客
08-26 1809
babel-loader就是用babel工具将ES6转成ES5的一种加载器. 在webpack打包时遇到js文件，就交给babel处理。加载器配置：webpack在打包时，会根据js文件中的引用文件中的引入语法，去加载其他文件；//css生成到css文件中,项目中手动以形式引入使用。//css生成到css文件中,项目中以形式引入使用。//css生成到css文件中,项目中以形式引入使用。//css生成到css文件中,项目中以形式引入使用。...
webpack中的加载器
FormAda的博客
10-13 310
1.通过loader打包非js模块 2.加载器的基本使用 （1）打包处理css文件 use数组中指定的loader的顺序是固定的 多个loader的调用顺序是从后往前调用 （2）打包处理less文件 （3）打包处理sass文件 （4）配置postCSS自动添加CSS的兼容前缀 可以兼容其他浏览器 （5）打包样式表中的图片和字体文件 ...
webpack 加载器
weixin_41984072的博客
10-16 377
1.下载加载器 npminstallstyle-loader css-loader -D //处理css下载的相关文件 npm install less-loader less -D //处理less下载的相关文件 npm install sass-loader node-sass -D //...
webpack loader加载器
程序员青戈
02-28 880
webpack loader
webpack（三、加载器）
weixin_41510467的博客
11-05 531
在实际开发中，webpack只能打包处理以.js为后缀的模块（并且是其中一部分比较简单的JavaScript代码），其他非.js后缀的模块webpack默认处理不了，而需要调用loader加载器才能正常打包，否则会报错！loader加载器可以协助webpack打包处理特定的文件模块了，例如：less-loader可以打包处理.less相关的文件sass-loader可以打包处理.scss相关的文件...
Webpack基础之加载器
tian361zyc的博客
05-26 791
加载器(Loaders)
ElementUI实现可编辑表格(1)
2401_84149996的博客
05-05 480
【代码】ElementUI实现可编辑表格(1)
webpack加载器
weixin_51817440的博客
01-27 230
开发过程中，webpack只能打包.js后缀结尾的模块，若需要处理非.js后缀的模块需要调用loader加载器才可以正常打包。在webpack.config.js的module->rules。在webpack.config.js的module->rules。在webpack.config.js的module->rules。在webpack.config.js的module->rules。在webpack.config.js的module->rules。ps:use数组中指定的loader顺序是固定的。
window.__webpack_public_path__
08-20
### Webpack 中 `__webpack_public_path__` 的作用 `__webpack_public_path__` 是 Webpack 提供的一个全局变量，用于在运行时动态指定资源的公共路径（public path）。通常，Webpack 在构建时会根据配置文件中的 `output.publicPath` 设置静态资源的加载路径。然而，在某些动态部署环境中，构建时无法确定最终的资源路径，此时可以通过设置 `__webpack_public_path__` 来动态调整资源加载路径[^3]。 此变量在微前端架构中尤其重要，例如在 Qiankun 这样的框架中，子应用可能需要根据主应用注入的路径来加载资源。通过在运行时设置 `__webpack_public_path__`，可以确保子应用能够正确地加载其所需的静态资源[^1]。 ### 使用方法 1. **在入口文件中设置** 为了确保 `__webpack_public_path__` 在所有模块加载之前生效，需要在入口文件的顶部设置该变量。例如： ```javascript __webpack_public_path__ = window.static_url; // eslint-disable-line ``` 在微前端环境中，通常会根据主应用提供的变量动态设置该值： ```javascript if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } ``` 这样可以确保子应用在被 Qiankun 加载时能够正确识别资源路径。 2. **与 Webpack 配置配合使用** 在 Webpack 配置中，`output.publicPath` 通常会被设置为空字符串或相对路径，以便在运行时由 `__webpack_public_path__` 动态控制： ```javascript output: { path: path.resolve(__dirname, 'dist'), publicPath: '' } ``` 这种配置方式允许在部署时通过 JavaScript 动态指定资源路径，而不是在构建时硬编码路径。 3. **与资源加载器配合使用** 某些资源加载器（如 `url-loader` 或 `file-loader`）会依赖 `publicPath` 来确定资源的最终 URL。确保这些加载器的配置与 `__webpack_public_path__` 的使用方式保持一致，以避免资源加载失败的问题[^4]。 ### 常见问题与注意事项 - **变量未定义错误**：如果在运行时遇到 `__webpack_public_path__` 未定义的错误，可能是由于未正确引入配置文件或未在入口文件顶部设置该变量。确保在入口文件中尽早设置该变量，并避免在模块中使用它之前进行异步操作[^2]。 - **兼容性问题**：在某些构建工具版本或模块打包策略中，`__webpack_public_path__` 的行为可能略有不同。建议参考所使用的 Webpack 版本和相关框架（如 Qiankun）的文档，确保兼容性。 - **ES Module 环境下的使用**：在 ES Module 项目中，`__webpack_public_path__` 仍可在入口文件中使用，但需注意模块加载顺序和作用域问题。 ### 示例代码 以下是一个完整的入口文件示例，展示了如何在 Qiankun 微前端环境中动态设置 `__webpack_public_path__`： ```javascript // index.js if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } else { __webpack_public_path__ = window.static_url || '/'; } // main.js import './index'; import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; new Vue({ router, store, render: h => h(App) }).$mount('#app'); ``` ### 相关问题 1. 如何在 Qiankun 微前端中正确配置子应用的 `publicPath`？ 2. Webpack 中 `output.publicPath` 和 `__webpack_public_path__` 有什么区别？ 3. 为什么在使用 `__webpack_public_path__` 时需要在入口文件顶部引入？ 4. 如何解决 `__webpack_public_path__` 未定义的错误？ 5. 在 Vue/React 项目中如何动态设置资源加载路径？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值