【Vue】07 Webpack Part3 Loader
Loader是Webpack的核心概念：
除了JS文件以外我们还有CSS，图片，包括一些ES6规范的代码
或者是TypeScript各种前端类型的文件
但是最终必须统一转换成JS文件，Webpack本身无法转换这些文件
所以需要Loader来实现
在之前的项目中的SRC目录创建一个CSS目录并且编写style.css
css代码：
p {
font-size : 30px;
color : red;
}
main.js的引入：
require("./css/style.css");
打开终端进行打包处理：
提示需要loader处理这样的文件类型
所以需要css-loader，在本项目安装css-loader
cnpm install css-loader --save-dev
这里发现警告，css-loader要求webpack版本至少4.0.0或者是5.0.0版本，但是安装的是3.6.0版本
然后还需要在webpack.config.js中配置module节点
const path = require('path');
module.exports = {
entry : "./src/main.js", // 入口 可以是字符串，数组，对象
output : { // 出口，通常是一个对象 至少包含路径和文件名
path : path.resolve(__dirname, 'dist'),
filename : "bundle.js"
},
module : {
rules : [
{ test : /\.css$/, use : ['css-loader'] }
]
}
}
然后执行打包：
首页导入打包好的js文件查看渲染效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./dist/bundle.js"></script>
<title>Title</title>
</head>
<body>
<h1>Hello Webpack!!!</h1> </body>
</html>
但是样式没有生效：
所以我们要style-loader去解析才能给浏览器渲染出来
cnpm install style-loader --save-dev
然后一样去配置：
const path = require('path');
module.exports = {
entry : "./src/main.js", // 入口 可以是字符串，数组，对象
output : { // 出口，通常是一个对象 至少包含路径和文件名
path : path.resolve(__dirname, 'dist'),
filename : "bundle.js"
},
module : {
rules : [
{ test : /\.css$/, use : ['style-loader', 'css-loader'] }
]
}
}
再次打包查看：
【标题标签不渲染的啊。。。拿段落渲染可以】
更正：
webpack打包出现错误
(node:16792) UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function
at Object.loader (D:\Vue-Learn\07\node_modules\css-loader\dist\index.js:62:27)
at LOADER_EXECUTION (D:\Vue-Learn\07\node_modules\loader-runner\lib\LoaderRunner.js:119:14)
at runSyncOrAsync (D:\Vue-Learn\07\node_modules\loader-runner\lib\LoaderRunner.js:120:4)
at iterateNormalLoaders (D:\Vue-Learn\07\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
at Array.<anonymous> (D:\Vue-Learn\07\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (D:\Vue-Learn\07\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:40:15)
at D:\Vue-Learn\07\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:77:9
at D:\Vue-Learn\07\node_modules\graceful-fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
(node:16792) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). T
o terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:16792) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
是因为css-loader版本过高导致：，更换到2.0.2版本解决
npm install css-loader@2.0.2 --save-dev
【Vue】07 Webpack Part3 Loader的更多相关文章
- 【译文】使用webpack提高网页性能优化
这篇文章原文来自https://developers.google.com/web/fundamentals/performance/webpack/. 说是译文其实更像是笔者做的笔记,如有错误之处请 ...
- 【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo
¶项目分析 一个完整的网站服务架构,包括: 1.web frame ---这里应用express框架 2.web server ---这里应用nodejs 3.Database ---这里 ...
- 【vue】创建一个vue前端项目，编译，发布
npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- 【vue】移动端demo资料
http://imzjh.com/inew/#/(移动端demo) https://github.com/liangxiaojuan/eleme(饿了么git地址) https://github.co ...
- 【vue】本地开发mock数据支持
项目离不开数据渲染的支持,为本地开发配置 数据 支持. (一)方式一:安装JSON Server搭建mock数据的服务器 json Server 是一个创建 伪RESTful服务器的工具. 配置流程 ...
- 【vue】npm run mock & npm run dev 无法同时运行的解决
[关于系统,没注明的都是windows系统,若以后用的是mac系统则会另外备注] 当项目数据是通过mock搭建而成(参照:[vue]本地开发mock数据支持)时,运行mock服务器和项目的命令 就参照 ...
- 【VUE】自定义组件
[VUE]自定义组件 转载: ============================================ ======================================== ...
- 【VUE】使用问题记录
[VUE]使用问题记录 ===================================================================== 1.Vue.nextTick 修改数 ...
- 【VUE】数组
[VUE]常用函数 转载:https://www.cnblogs.com/yangchongxing/p/10637087.html 目录 ============================== ...
随机推荐
- 分布式定理--CAP定理
cap定理指的是,在一个分布式系统中,只能满足cap中的两项. C consistency 一致性 A availability 可用性 P partition tolerance 分区可容错性 -- ...
- 使用 Promise.withResolvers() 来简化你将函数 Promise 化的实现~~
引言 在JavaScript编程中,Promise 是一种处理异步操作的常用机制.Promise 对象代表了一个尚未完成但预期将来会完成的操作的结果.在本文中,我们将探讨如何通过使用 ES2024 的 ...
- Do not access Object.prototype method 'hasOwnProperty' from target object
hasOwnProperty 判断对象是否为空 在使用 hasOwnProperty 判断对象是否为空时遇到了一下问题,总结一下 // Do not access Object.prototype m ...
- 准入控制器(Admission Controller):ResourceQuota，ImagePolicyWebhook
目录 一.系统环境 二.前言 三.准入控制器简介 四.为什么需要准入控制器 五.启用/禁用ResourceQuota资源配额 5.1 查看默认启用/禁用的准入控制器插件 5.2 ResourceQuo ...
- RSA密码系统的特定密钥泄露攻击与Coppersmith方法的应用
PrimiHub一款由密码学专家团队打造的开源隐私计算平台,专注于分享数据安全.密码学.联邦学习.同态加密等隐私计算领域的技术和内容. RSA密码系统作为当前最广泛使用的公钥加密算法之一,其安全性依赖 ...
- 高通UEFI中的I2C的方式读取TP的id
高通UEFI中的I2C的方式读取TP的id 原文:https://blog.csdn.net/mengluoxixiang/article/details/100103347 老规矩,先说要实现的功能 ...
- QT学习：00 介绍
--- title: framework-cpp-qt-00-介绍 date: 2020-04-08 15:41:54 categories: tags: - c/c++ - qt --- 章节描述: ...
- 【论文阅读】RAL2022: Make it Dense: Self-Supervised Geometric Scan Completion of Sparse 3D LiDAR Scans in Large Outdoor Environments
0. 参考与前言 论文链接:https://ieeexplore.ieee.org/document/9812507 代码链接:https://github.com/PRBonn/make_it_de ...
- mapreduce的shuffle机制
1.1 概述: mapreduce中,map阶段处理的数据如何传递给reduce阶段,是mapreduce框架中最关键的一个流程,这个流程就叫shuffle:(从map的输出到reduce的输入) s ...
- 深度长文解析SpringWebFlux响应式框架15个核心组件源码
Spring WebFlux 介绍 Spring WebFlux 是 Spring Framework 5.0 版本引入的一个响应式 Web 框架,它与 Spring MVC 并存,提供了一种全新的编 ...