webpack打包其他资源(二)

10.css-loader

如果想给你好，李银河设置样式呢？

在src文件夹里面创建css文件夹
然后在css文件夹里面创建style.css文件

.title{
  color: red;
  font-weight: 700;
  font-size: 30px;
}

可以在main.js里面引入

import "./css/style.css"

也可以在element.js里面引入

import ".。/css/style.css"

就算引入了，执行npm run build也是会报错

ERROR in ./src/css/style.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

不论是js文件，css文件，图片什么的，在webpack里面都可以看成是一个模块
现在遇到css这个模块，它说解析失败，因为css文件类型webpack不知道怎么处理，能处理js文件是因为
webpack 默认支持esmodule，commonjs，但是它不认识css。

所以需要css-loader

1.css-loader的使用

06_webpack的基础打包_14.jpg

安装完成后，需要告诉webpack，加载css文件的时候，使用css-loader

2.css-loader的配置

06_webpack的基础打包_15.jpg

第一种内联方式：在element.js的引入里面写上css-loader! 这种用法不常见，我们常用的是配置的方式。

import "css-loader!../css/style.css"

06_webpack的基础打包_16.jpg

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader:"css-loader"
      }
    ]
  }
}

然后也可以使用use来配置loader，use后面是一个数组，可以放多个loader，是因为打包css，一个loader搞不定，这就是为什么网页的font什么的都没有反应

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        //1. loader的写法（语法糖）
        //loader:"css-loader"

        use: [
            //{loader:"css-loader"}
          "css-loader"
        ]
      }
    ]
  }
}

运行npm run build是可以打包的,说明加载css文件时没有什么问题的。

06_webpack的基础打包_17.jpg

11.style-loader

06_webpack的基础打包_18.jpg

将css文件插入到页面是什么意思？
有两种方式：
1.把所有的css放到一个css文件里面。通过link标签在html里面做一个引用

 <link rel="stylesheet" href="style.css">

2.直接在html的head里面创建一个style标签，将css的样式写到css标签里面。

css-loader只负责加载css文件，后续怎么操作是没有管的，这时候就需要使用style-loader.
它可以帮助我们在html里面创建一个style标签，将css样式，插入到sytle里面。

使用npm i style-loader -D下载完成后。

修改config文件

  module: {
    rules: [
      {
        test: /\.css$/,
        //1. loader的写法（语法糖）
        //loader:"css-loader"

        use: [
          "css-loader",
          "style-loader"
        ]
      }
    ]
  }

给use增加了syle-loader，但是npm run build会报错

理由就是loader是有执行顺序的，css-loader先执行，style-loader在执行

user在使用loader的时候，使用顺序是从后往前，写到后面的loader是先执行的，然后npm run build,没有保存，页面的样式也得到了反应

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        //1. loader的写法（语法糖）
        //loader:"css-loader"

        use: [
          "style-loader",
          "css-loader",
        ]
      }
    ]
  }
}

打开html文件，发现是在html文件里面被创建了style标签，样式被放到了这个标签里面

06_webpack的基础打包_19.jpg

12. 如何处理less文件

06_webpack的基础打包_20.jpg

less文件浏览器是不认识的，需要将他们转换成普通的css文件，需要一个工具，叫做lessc compiler。

这个工具和webpack没有任何关系。

有一个less文件，npm install less -D

然后执行npx lessc ./test.less demo.css

1. Less工具处理

06_webpack的基础打包_21.jpg

2. Less-loader处理

06_webpack的基础打包_22.jpg

1.在element.js中引入less

import "../css/title.less"

2.下载less和less-loader

3.修改conifg文件

 {
        test: /\.less$/,
     
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      }

4.npm run build

13.PostCSS

06_webpack的基础打包_23.jpg

webpack包含很多loader，其中有一个postcss-loader，这个postcss-loader又需要依赖一个工具叫做postcss，

这个工具在起作用的时候又依赖与开发工具plugins

13.1 命令行使用postcss

06_webpack的基础打包_24.jpg

13.2 插件autoprefixer

06_webpack的基础打包_25.jpg

我们在目录底下新建一个test.css文件

.title{
  user-select: none;
}
//为了适配浏览器，user-slect需要加上浏览器前缀， 转换以后，就变成了有浏览器前缀的css

然后

npm install postcss postcss-cli -D

安装完之后，我们还需要借助一些插件，让它生效

所以要安装autoprefixer

npm install autoprefiexer -D

然后执行

npx postcss --use autoprefixer -o demo.css test.css

然后demo.css的文件

.title{
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UseUJBQWlCO0tBQWpCLHNCQUFpQjtNQUFqQixxQkFBaUI7VUFBakIsaUJBQWlCO0FBQ25CIiwiZmlsZSI6ImRlbW8uY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnRpdGxle1xyXG4gIHVzZXItc2VsZWN0OiBub25lO1xyXG59Il19 */

13.3 postcss-loader

06_webpack的基础打包_26.jpg

刚才我们只是单独的配置了单个文件，如何让加浏览器前缀反映到所有的css文件呢，就需要安装postcss-loader.

postcss-loader的作用是为了在webpack中顺利使用postcss

而且需要告诉config文件，在使用postcss-loader的时候，需要使用autoprefixer插件

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        //1. loader的写法（语法糖）
        //loader:"css-loader"

        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins:[
                  require("autoprefixer")
              ]
              }
            }
          }
        ]
      },
      {
        test: /\.less$/,
        //1. loader的写法（语法糖）
        //loader:"css-loader"

        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      }
    ]
  }
}

配置完成的话，就可以使用npm run build，然后发现html文件里面的userselect有浏览器前缀。

但是postcss的配置太多了，我们可以把一部分抽取出来。

13.4 单独的postcss配置文件

06_webpack的基础打包_27.jpg

在根目录下面创建一个postcss.config.js文件

module.exports = {
  plugins:[
    require("autoprefixer")
]
}

然后webpack.config.js就变成了

 {
        test: /\.css$/,
        //1. loader的写法（语法糖）
        //loader:"css-loader"

        use: [
          "style-loader",
          "css-loader",
          "postcss-loader"
         /*  {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins:[
                  require("autoprefixer")
              ]
              }
            }
          } */
        ]
      },

然后启动npm run build, 依然有效

13.5 postcss-preset-env

06_webpack的基础打包_28.jpg

14 file-loader

07_webpack打包其他资源_01.jpg

css-imge.css

.image-bg {
  background-image: url("../img/nhlt.jpg");
  background-size: contain;
  width: 200px;
  height: 200px;
}

js-element.js

import "../css/style.css"
import "../css/title.less"
import "../css/image.css"

//import zznhImage from '../img/zznh.png'

const zznhImage = require("../img/zznh.png")

const divEl = document.createElement("div");
divEl.className = "title";
divEl.innerHTML = "你好啊，李银河";

//设置背景图片 第一种方式
const bgDIvEl = document.createElement('div');
bgDIvEl.className = "image-bg";
//第二种方式
const zunh = document.createElement('img');
zunh.src = zznhImage;

document.body.appendChild(divEl);
document.body.appendChild(bgDIvEl);
document.body.appendChild(zunh);

有两方式添加图片，一个是给div设置bgc，这个时候就是给div一个class属性，然后这个class属性的

css设置 background-image: url(../img/nhlt.jpg); 这种方式可以直接使用，不用file-loader

第二种方式是添加一个img元素，给img元素设置src，const imgEl = document.createElement("img"); imgEl.src = "./src/img/zznh.png"

document.body.appendChild( imgEl)

第二种方式的话，给src赋值一个字符串，结果就是src打包后一直就是字符串，这时候图片就要像模块一样去使用，这时候需要使用file-loader

import zzhnImage from "../img/zznh.png"
const zunh = document.createElement('img');
zunh.src = zznhImage;

07_webpack打包其他资源_02.jpg

webpack5用url-loader打包后出现图片打不开、资源重复_ChrisJin的博客-CSDN博客

当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，这可能会导致 asset 重复，所以你可能想阻止 webpack 5 内置的 asset 模块的处理，你可以通过将 asset 模块的类型设置为 ‘javascript/auto’ 来解决

const { type } = require("os");
const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path:path.resolve(__dirname, "./build"),//resolve是对两个path进行拼接，__dirname是当前文件所在的路径,
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      },
  /*     {
        test: /\.(jpg|png|gif|svg)$/i,
        use: "file-loader"
      } */
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              esModule:false
            }
          },
          
        ],
        type:'javascript/auto'
      }
    ]
  }
}

15 文件的命名规则

07_webpack打包其他资源_03.jpg

两个不同的文件夹里面出现相同名称的图片。

07_webpack打包其他资源_04.jpg

  {
        test: /\.(jpg|png|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
             // outputPath: 'img',
              name: 'img/[name]-[hash:6].[ext]',
              esModule:false
            }
          },
          
        ],
        type:'javascript/auto'
      }

07_webpack打包其他资源_05.jpg

16 url-loader

07_webpack打包其他资源_06.jpg

对于比较小的图片来说，编码成base64的URI，嵌入到bundle.js，放到js里面，伴随着js下载下来，浏览器可以直接解析base64，对服务器高并发性能的优化。

07_webpack打包其他资源_07.jpg

      {
        test: /\.(jpg|png|gif|svg)$/i,
        use: [
          {
            //loader: 'file-loader',
            loader: "url-loader",
            options: {
              limit: 100*1024, //100KB
               name: 'img/[name]-[hash:6].[ext]',
               esModule:false
            }
          },
          
        ],
        type:'javascript/auto'
      }

17 asset module type

07_webpack打包其他资源_08.jpg

17.1 使用

07_webpack打包其他资源_09.jpg

      {
        test: /\.(jpg|png|gif|svg)$/i,
        //type:"asset/resource", //对应的file-loader 不管37，21全部打包成独立的图片文件
        //type:"asset/inline",//对应url-loader， 全部打包成base64
        type:"asset",
        generator: {
          filename: "img/[name]_[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
      }

07_webpack打包其他资源_10.jpg

18 加载字体文件

07_webpack打包其他资源_11.jpg 07_webpack打包其他资源_12.jpg

      {
        test: /\.(eot|ttf|woff2?)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "font/[name]_[hash:6].[ext]"
          }
        }
      }

或者使用asset

      {
        test: /\.(eot|ttf|woff2?)$/,
        type:"asset/resource",
        generator: {
          filename: "font/[name]_[hash:6][ext]"
        }
      }