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的更多相关文章

  1. 【译文】使用webpack提高网页性能优化

    这篇文章原文来自https://developers.google.com/web/fundamentals/performance/webpack/. 说是译文其实更像是笔者做的笔记,如有错误之处请 ...

  2. 【vue】MongoDB+Nodejs+express+Vue后台管理项目Demo

    ¶项目分析 一个完整的网站服务架构,包括:   1.web frame ---这里应用express框架   2.web server ---这里应用nodejs   3.Database ---这里 ...

  3. 【vue】创建一个vue前端项目，编译，发布

    npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用户生成Vue工 ...

  4. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  5. 【vue】移动端demo资料

    http://imzjh.com/inew/#/(移动端demo) https://github.com/liangxiaojuan/eleme(饿了么git地址) https://github.co ...

  6. 【vue】本地开发mock数据支持

    项目离不开数据渲染的支持,为本地开发配置 数据  支持. (一)方式一:安装JSON Server搭建mock数据的服务器 json Server 是一个创建 伪RESTful服务器的工具. 配置流程 ...

  7. 【vue】npm run mock & npm run dev 无法同时运行的解决

    [关于系统,没注明的都是windows系统,若以后用的是mac系统则会另外备注] 当项目数据是通过mock搭建而成(参照:[vue]本地开发mock数据支持)时,运行mock服务器和项目的命令 就参照 ...

  8. 【VUE】自定义组件

    [VUE]自定义组件 转载: ============================================ ======================================== ...

  9. 【VUE】使用问题记录

    [VUE]使用问题记录 ===================================================================== 1.Vue.nextTick 修改数 ...

  10. 【VUE】数组

    [VUE]常用函数 转载:https://www.cnblogs.com/yangchongxing/p/10637087.html 目录 ============================== ...

随机推荐

  1. Windows下cmd命令行ssh连接Linux服务器

    1.window+R键进入运行 2.输入cmd,运行命令行工具 3.使用,命令ssh连接服务器 ssh -t 用户名@ip地址 -p 22 例如: 输入密码,显示连接成功

  2. INFINI Labs 产品更新 | 发布 Easysearch Java 客户端，Console 支持 SQL 查询等功能

    近年来,日志管理平台越来越流行.使用日志管理平台可以实时地.统一地.方便地管理和查看日志,挖掘日志数据价值,驱动运维.运营,提升服务管理效率. 方案架构 Beats 是轻量级采集器,包括 Filebe ...

  3. 使用 openssl 从cer公钥证书中导出公钥pem

    使用 openssl 从cer公钥证书中导出公钥pem ---------- "der 公钥证书"转 "base64 公钥证书"openssl x509 -in ...

  4. (二)requests-爬取国家药监局生产许可证数据

    首先访问这个页面 url = 'http://125.35.6.84:81/xk/' 我们的目标是抓取这里的每一个企业的详情页数据,但是可以发现这里只有企业的简介信息,所以这就意味着我们要发送两次ge ...

  5. 《Android开发卷——HTTP网络通信,HTTP网络连接》

    为了访问互联网,需要设置应用程序获取"androd.permission.INTERNET"权限的许可. 一.使用Apache接口(org.apache.http)并实现网络连接的 ...

  6. undefined，null 和 undeclared 有什么区别？

    a.null表示"没有对象",即该处不应该有值,转为数值时为0.典型用法是:作为函数的参数,表示该函数的参数不是对象.作       为对象原型链的终点. b.undefined表 ...

  7. JavaScript通过递归实现深拷贝

    思路 首先是用Object.prototype.toString.call(obj)来得到传入的值的类型,如果是几个基本类型,则直接返回值就可以了 如果是引用类型,则通过深拷贝函数递归进行再次拷贝. ...

  8. 正式开启全站HTTPS加密之旅

    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` 正式开启全站HTTPS加密之旅 日期:2017-7-14 ...

  9. python + pytest多进程、多线程执行用例生成报告总结

    背景: 使用多进程.多线程执行测试用例,生成测试报告:不使用多进程.多线程,以下两种方式都可生成报告 两种生成报告的形式 1. pytestreport(pytest_session_finish时生 ...

  10. nginx 反向代理（proxy）与负载均衡（upstream）应用实践

    集群介绍 集群就是指一组(若干个)相互独立的计算机,利用高速通信网络组成的一个较大的计算机服务系统,每个集群节点(即集群中的每台计算机)都是运行各自服务的独立服务器.这些服务器之间可以彼此通信,协同向 ...