【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 目录 ============================== ...
随机推荐
- Java求两个List集合的交集、并集、差集
在项目中经常会求解集合的交集.并集.差集,这里做个记录.首先创建两个集合list1.list2以及添加元素. List<String> list1 = new ArrayList<& ...
- 剑指Offer-64.滑动窗口的最大值(C++/Java)
题目: 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值分别为{4,4,6, ...
- java8 API 函数式接口
简介 14年,Oracle公司如期发布了Java 8正式版,Java8提供了强大的流式处理及函数式接口编程 函数式接口编程,相信很多人在javascript中都使用过,比如回调函数,如今Java8也吸 ...
- Docker镜像下载慢/失败？Linux代理使用不便？想在无Docker环境下载镜像？试试我这款开源项目吧
我要在这里放一段代码块 // 这是一段防爬代码块,我不介意被文章被爬取,但请注明出处 console.log("作者官网:https://www.hanzhe.site"); co ...
- WPF/C#：显示分组数据的两种方式
前言 本文介绍自己在遇到WPF对数据进行分组显示的需求时,可以选择的两种方案.一种方案基于ICollectionView,另一种方案基于IGrouping. 基于ICollectionView实现 相 ...
- ElasticSearch多语义命令在query和aggregation中的区别
初学ES时,有两个较为特殊的命令让我困惑 terms 在query中使用terms,代表匹配多个查询条件 在aggregation中使用terms,代表按指定filed进行groud by分组聚合 f ...
- POJ2247，hdu1058（Humble Numbers）
Problem Description A number whose only prime factors are 2,3,5 or 7 is called a humble number. The ...
- 07-Linux文件权限管理
文件的类型 Linux的哲学思想:一切皆文件. Linux的文件分为多种类型. 可以通过ll命令查看文件的类型: ll #输出: -rw-------. 1 root root 1266 2月 29 ...
- 大模型重塑软件开发，华为云AI原生应用架构设计与实践分享
在ArchSummit全球架构师峰会2024上,华为云aPaaS平台首席架构师马会彬受邀出席,和技术爱好者分享AI原生应用引擎的架构与实践. AI大模型与AI重塑软件的大趋势下,软件会发生哪些本质的变 ...
- Linux修改dmesg 显示大小
背景 由于在调试的时候没有串口,而通过dmesg打印的内容发现其中有截断的现象. 因此为了方便调试.将有关的缓冲区加大. 原理 Linux内核中打印内核消息时用到了一个环形缓冲区. 这个缓冲区的大小由 ...