为什么要用预处理器呢？因为一个项目中js文件没办法做到任何事，而webpack又是打包js文件的,
    所以呢,当需要打包其他文件的时候就需要使用预处理器loader了
    webpack讲究一切皆模块，即一切都是可以导入导出
    而预处理器（loader）则是一个打包工程中其他类型的资源的工具，可以使得这些文件得以像模块一样导入和导出，
    这些文件如html，css，vue，模板，图片，字体等
    loader的翻译：装载
    image.png
    2021-3-20.
    实例运用 — css-loader
    首先当然是创建一个基本的webpack项目，项目中的基本文件如下，
    还不会的打包的可以去我上一个帖子看看《webpack打包第一个应用》
    image.png
    然后webpack.config.js中的配置是这样，
    image.png
    然后创建style.css文件，一个很简单的样式，背景变成红色
    image.png
    当然index.js也要导入css
    image.png
    接下来打开终端，输入 npm i css-loader style-loader —save-dev
    安装忘截图了，当然你可以打开package.json文件看看是否有这些东西
    image.png
    安装之后，再到webpack.config,js中配置一些东西，如下，
    这里要注意一点webpack打包时事按照数组从后往前的顺序将资源交给loader处理的，因此最后生效的要放最前
    image.png
    之后，在终端输入npx webpack，就可以了
    image.png
    打开页面就看到了满满的中国红
    image.png
    这样就算是打包css成功了，之后就可以在项目中使用js导入css文件并生效了，
    由此可见，打包其他文件也都是大同小异的操作，无非是增加webpack.config,js文件的module下rules元素
    也可以看看书，书上介绍了更多的一些细节和配置
    这里介绍下几种其他的loader，以后有空会逐一演示一遍，现在先简单地说下作用

    2021-3-21.
    babel-loader: 转码器，将ES6代码编译成ES5
    首先，当然是下载babel并配置rules了
    npm install babel-loader@7 babel-core babel-preset-env —save-dev，
    在进度条刷刷过后，你的package.json文件里多了这三个
    image.png
    然后，再打开webpack.config.js文件，配置如下，
    image.png
    再在node_modules文件夹下创建一个.babelrc.文件，配置如下
    image.png
    然后在index.js中加点ES6代码，就像下面的箭头函数
    image.png
    然后npx webpack，就打包成功了
    image.png
    image.png
    当然这里还有两个问题

    1. babel和babel-loader版本不匹配的话，就会有

    Module build failed (from ./node_modules/babel-loader/lib/index.js)的错误提示
    只能降低版本了,就 npm install babel-loader@7 babel-core babel-preset-env —save-dev，
    将babel-loader版本降到7.1.5

    1. image.png

    如果index.js文件中导入了css的话，打包就会报错
    现在还没什么头绪，后续解决了会用红字写在后面的
    webpack.config.js 配置文件里错了,应该是这样的,
    exclude中当输入字符串时应该是绝对路径
    image.png

    2021-3-25.
    vue/vue-loader/vue-template-compiler: 处理.vue文件
    .Vue文件处理的话从最开始弄起,新建一个项目,然后里面的文件是这些
    image.png
    同时安装好webpack 和webpack-cli
    image.png
    首先安装vue,注意这里后面没有—save-dev,因为vue并不只是开发时依赖
    image.png
    然后安装vue-loader@14.2.4,vue-template-compiler,建议完全跟我的版本一致,不然可能会出现各种头秃的错误
    image.png
    然后还有babel-core,babel-loader@7.1.5,css-loader,style-loader
    image.png
    接下来就是配置webpack.config.js文件了
    image.png
    现在已经配置完成了,
    然后是index.js和index.html和App.vue的代码了
    // index.html
    image.png
    // index.js
    image.png
    // App.vue
    image.png
    现在的目录是这样的
    image.png
    然后终端输入npx webpack 就可以成功跑起来了
    image.png
    效果图如下
    image.png
    ok,到这里,就可以开始组件的模块化开发了(也相当于自己配置完了vue-cli的主要工作)

    2021-03-26.
    html-loader: js中加载html,将html文件转化为字符串并进行格式化
    首先当然是安装环节了
    image.png
    然后webpack.config.js的文件中是这样的
    image.png
    header.html里面
    image.png
    index.js里面
    image.png
    然后npx webpack,就可以了
    image.png
    其实就是课本73页的步骤,简简单单

    2021-03-29
    handlebars-loader: 加载后返回函数，可以接受变量对象 // 注: 使用前虚先安装handlebars
    npm i handlebars handlebasrs-loader
    image.png
    webpack.config.js文件配置文件中rules配置如下
    image.png
    创建一个.handlebars文件,内容如下
    image.png
    这是index.js文件中的内容
    image.png
    npx webpack 打包后的html
    image.png
    package.json文件中下载的loader的版本,注意版本兼容性问题特别多,尽量同版本
    image.png
    关于handlebars的一点小看法
    看了一会hanlebars文件的官方文档,我觉得其实和Vue有很多相似的地方, 像是插值{{}},还是块代码的遍历和属性注入
    所以这个东西如果不是必要,建议了解就行,没必要浪费精力去学有一种跟Vue相似的文件语法,就个人简单看来,handlebars文件能做到的Vue也能做到

    2021-03-29.
    file-loader: 加载图片（png，jpg，gif）等文件类型资源
    url-loader: 与file-loader作用类似
    这两个预处理器目前看来更多的是加载图片,毕竟大数据的话,数据库更现实一点
    webpack@5的版本的话,其实可以直接这样写
    image.png
    效果都是一样的