webpack中的加载器

webpack-插件-自动生成html文件

1. 下载插件

   yarn add html-webpack-plugin  -D
   npm i html-webpack-plugin  -D
   

2. webpack.config.js配置

   // 引入自动生成 html 的插件
   const HtmlWebpackPlugin = require('html-webpack-plugin') 
   
   module.exports = {
       // ...省略其他代码
       plugins: [
           new HtmlWebpackPlugin({
               // 以此为基准生成打包后html文件
               template: './public/index.html' 
           })
       ]
   }
   

3. 重新打包后观察dist下

   • 自动生成html文件
   • 自动引入打包后js文件

webpack-加载器-处理css文件问题

1.新建 - src/css/index.css

2.编写去除li圆点样式代码

li{
    list-style: none;
}

3.在main.js引入index.css

一定要引入到入口才会被webpack打包

import "./css/index.css"

4.执行打包命令观察效果

错误解释: 你可能需要一个loader来支持这种类型文件, 解析css代码

原因: webpack默认只识别js文件

webpack-加载器-处理css文件

1. 安装依赖

   yarn add css-loader style-loader  -D
   npm i css-loader style-loader -D
   

2. webpack.config.js 配置

   module.exports = {
       // ...其他代码
       module: { // 如何处理项目中不同模块文件
           rules: [ // 规则
             {
               test: /\.css$/, // 匹配所有的css文件
               // use数组里从右向左运行
               // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
               // 再用 style-loader 将样式, 把css插入到dom中
               use: [ "style-loader", "css-loader"]
             }
           ]
       }
   }
   

3. 执行打包命令, 观察打包后dist下

webpack-加载器-处理less文件

1. 新建src/less/index.less - 设置li字体大小24px

@size:24px;

ul, li{
    font-size: @size
}

2. 引入到main.js中

import "./less/index.less"

3. 下载依赖包

yarn add less less-loader -D
npm i less less-loader -D

4. webpack.config.js 配置

module: {
  rules: [ 
    // ...省略其他
    {
    	test: /\.less$/, // 匹配.less结尾文件
    	// 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

webpack-加载器-处理图片文件

1. 素材文件夹/2个图文件
2. 在css/less/index.less - 把小图片用做背景图

body{
    background: url(../assets/logo_small.png) no-repeat center;
}

3. 在src/main.js - 把大图插入到创建的img标签上, 添加body上显示

// 引入图片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)

2. 打包后运行dist/index.html观察区别

webpack-加载器-图片处理区别

1. asset模块区分

module: {
    rules: [ 
        // ...省略其他
        {
            test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
            // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
            // 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
        }
    ]
}

webpack-加载器-处理字体文件

1. 素材文件夹/字体库fonts文件夹
2. 在main.js引入iconfont.css

// 引入字体图标文件
import './assets/fonts/iconfont.css'

3. 在public/index.html使用字体图标样式

<i class="iconfont icon-weixin"></i>

webpack-加载器-处理高版本js语法

babel编译器=> 用于处理高版本 js语法 的兼容性 babel官网

webpack配合babel-loader 对js语法做处理 babel-loader文档

1. src/main.js - 编写箭头函数

const fn = () => { // 高级语法
  console.log("你好babel");
}
console.log(fn) // 一定打印函数, 才会被webpack把"函数体"打包起来

2. 安装包

yarn add -D babel-loader @babel/core @babel/preset-env
npm i -D babel-loader @babel/core @babel/preset-env

3. webpack.config.js 配置规则

module: {
    rules: [
        {
            test: /\.js$/, // 匹配js结尾文件
            exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
            use: { 
                loader: 'babel-loader', // 使用加载器-处理
                options: {
                    presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
                }
            }
        }
    ]
}

4. 打包后观察dist/的js文件, 自动变成普通函数