共同学习Vue.js ---webpack的使用-loader

---

一、loader是什么？

loader是webpack中一个非常核心的概念;
webpack用来做什么的呢?

• 在之前的实例中,我们主要是用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖.
• 但是,在开发中我们不仅仅有基本的js代码处理,我们还需要加载css,图片,也包括一些高级的将ES6转成ES5代码,将TypeScript转成ES5代码,将scss,less转成css,将 .jsx, .vue 文件转成js文件等等.
• 对于webpack本身的能力来说,对于这些转化是不支持的
• 那么就需要给webpack扩展对应的loader就可以了

loader使用过程:

• 步骤一: 同npm安装需要使用的loader
• 步骤二: 在webpack.config.js 中的modules关键字下进行配置

大部分loader我们都可以在webpack的官网中找到,并且学习对应的用法

二、css文件处理

2.1准备工作

项目开发过程中,我们必然需要添加很多的样式,而样式我们往往写到一个单独的文件中;

• 在src目录中,创建一个css文件,其中创建一个normal.css 文件.
• 我们也可以重新组织文件的目录结构,将零散的js文件放在一个js文件夹中.

normal.css中的代码非常简单,就是将body设置为red;
准备工作如图所示:

2.2 css文件处理 – css-loader

解决方法,进入webpack官网去找对应的loader:
如图所示

配置如下：

在安装成功之后,执行npm run build运行时出现 UnhandledPromiseRejectionWarning 错误:

(node:7252) UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function
    at Object.loader (D:\VueWebpack-v0\01-webpack的使用\03-webpack的loader\node_modules\css-loader\dist\index.js:62:27)
  ...
(Use `node --trace-warnings ...` to show where the warning was created)
(node:7252) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a pr
omise which was not handled with .catch