首页 1 2 3 4 5 6 7

webpack5之loader配置（四）

总述：要明白为什么要引入loader?

因为webpack只能理解js和json这样的文件，这是webpack开箱可用的自带能力，loader可以让

webpack去解析其他类型的文件，并且将这些文件转化为有效的模块以供我们应用程序使用

如何定义loader

在module.rules下面定义两个属性，一个是test(用于识别哪些文件被转换)，另一个是use(确定应以

转化的时候应该使用哪个loader) ，如下图：

如上列子说明当webpack执行过程中遇到require或者是import去解析一个.txt这样的文件的时候，

在对这个文件打包之前先使用raw-loader转化

加载css

为了在javascript模块中import一个css文件，需要安装style-loader和css-loader,并在module配置中

添加这些loader:

安装插件：

npm i style-loader css-loader -D

在配置文件中添加解析器：

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // 在 head 中创建 style 标签
          'style-loader',
          // 将 css 文件整合到 js 文件中
          'css-loader'
        ]
      }
    ]
  }
}

注意：style-loader和css-loader的书序不能颠倒，先要执行cssloader，再执行style-loader，是从

后往前加载

在 JS 文件中导入 CSS 文件：

import '../css/main.css'

注意：在实际开发过程中，一般会使用less或者是sass进行开发，所以在打包less或者是sass的时

候也要安装对应的包：

less安装：

npm i less less-loader -D

sass安装：

npm i sass-loader sass -D

安装完成之后需要重新在webpack.config.js中的module.roles.use做配置

// 如果你使用的是less
{
    test: /\.css$/,
    use: ['style-loader', 'css-loader', 'less-loader']
 }

//如果你使用的是sass
{
   test: /\.css$/,
   use: ['style-loader', 'css-loader', 'sass-loader']
 }

抽离css为单独的文件：

安装抽离css为单独文件的插件：该插件基于webpack5构成，主要是把style标签引入css转化为link

引入css

安装插件：

npm i mini-css-extract-plugin -D

配置：

// 引入抽离css为独立文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  ...
  plugins: [
    new MiniCssExtractPlugin({
        // 指定抽离的之后形成的文件名
      filename: 'styles/[contenthash].css'
    })
  ],
  module: {
    rules: [
      // 处理后缀名为.css或者是.less的文件
      {
        test: /\.(css|less)$/,
        // stuyle-loader作用是在 head 中创建 style 标签
        // MiniCssExtractPlugin.loader是将css抽离为独立的文件
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }
    ]
  }
}

压缩css文件

安装插件：

npm i css-minimizer-webpack-plugin -D

配置：

// 引入css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")

module.exports = {
  ...
  // 优化配置项
  optimization: {
    minimizer: [
      // 使用插件优化 css 代码
      new CssMinimizerPlugin()
    ],
  },
  // 模式，因为压缩css代码只在生产模式下生效
  mode: 'production'
}

字体资源

通过 CSS 引入字体资源

@font-face {
  font-family: 'PujiSansExpandedHeavy';
  src: url('../fonts/PujiSans-ExpandedHeavy.eot'); /* IE9 Compat Modes */
  src: url('../fonts/PujiSans-ExpandedHeavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/PujiSans-ExpandedHeavy.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/PujiSans-ExpandedHeavy.woff') format('woff'), /* Modern Browsers */
    url('../fonts/PujiSans-ExpandedHeavy.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

配置：

module.exports = {
  ...
  module: {
    rules: [
     // 配置字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        // asset/resource可以帮助我们载入任何类型
        type: 'asset/resource'
      }
    ]
  }
}

加载数据

除了js，json，images, 可以加载的有用数据还有CSV/TSV/XML，要导入CSV, TSV和XML，可以

使用csv-loader和xml-loader

安装插件：

npm i csv-loader xml-loader -D

配置：

module.exports = {
  ...
  module: {
    rules: [
     {
        test: /\.(csv|tsv)$/,
        use: 'csv-loader'
      },

      {
        test: /\.xml$/,
        use: 'xml-loader'
      }
    ]
  }
}

自定义JSON模块parser

通过使用自定义parser模块替代特点的webpack loader，可以将任何的toml, vaml, 或者是json5文

件作为json模块导入

安装插件：

npm i toml yaml json5 -D

在 webpack.config.js 文件中进行配置:

// 引入toml
const toml = require('toml')
// 引入yaml
const yaml = require('yaml')
// 引入json5
const json5 = require('json5')

module.exports = {
  ...
  module: {
    rules: [
     {
        test: /\.toml$/,
        type: 'json', 
        parser: {
          parse:toml.parse
        }
      },

      {
        test: /\.yaml$/,
        type: 'json', 
        parser: {
          parse:yaml.parse
        }
      },

      {
        test: /\.json5$/,
        type: 'json', 
        parser: {
          parse:json5.parse
        }
      }
    ]
  }
}

关于webpack5之前所有配置如下：

// 引入node.js中的path
const path = require('path')
// 引入html打包插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入抽离css为独立文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 引入css压缩插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
// 引入toml
const toml = require('toml')
// 引入yaml
const yaml = require('yaml')
// 引入json5
const json5 = require('json5')

module.exports = {
  // 指定入口文件
  entry: './src/index.js',

  // 指定出口
  output:{
    // 指定输出文件的文件名
    filename:'bundle.js',
    // 指定文件的输出路径
    path: path.resolve(__dirname, './dist'),
    // 配置再次打包时清除上一次打包的无用文件
    clean:true,
    // 重置输出的文件名的方法一
    // contenthash表示根据图片内容生成hash值
    // ext表示扩展名
    assetModuleFilename:'images/[contenthash][ext]'
  },

  // 设置webpack是开发模式/生产模式
  mode: 'development',

  // 实现精准定位代码的行数
  devtool: 'inline-source-map',

  // 配置插件
  plugins:[
    new HtmlWebpackPlugin({
      // 指定模板
      template:'./index.html',
      // 输出的文件名，可根据自己的需要定义
      filename: 'app.html',
      // 指定在哪里生成script标签
      inject:'body'
    }),

    new MiniCssExtractPlugin({
      // 指定抽离的之后形成的文件名
      filename: 'styles/[contenthash].css'
    })
  ],

  // 实时监听文件修改的配置，并且网页自动刷新
  devServer: {
    // devServer指向的物理路径
    static:'./dist'
  },

  // 配置模块
  module: {
    rules:[
      // 配置后缀名为.png的图片
      {
        test:/\.png$/,
        type:'asset/resource',
        // 指定输出的文件名的方法二，generator的优先级高于output中assetModuleFilename的配置
        generator:{
          filename: 'images/[contenthash][ext]'
        }
      },
      // 配置后缀名为.svg的图片
      {
        test:/\.svg$/,
        type: 'asset/inline'
      },
      // 导入文本文件
      {
        test:/\.txt$/,
        type: 'asset/source'
      },
      // 通用资源类型
      {
        test: /\.jpg$/,
        type: 'asset',
        parser: {
          dataUrlCondition:{
            // 默认大小的尺寸值是4kb
            maxSize: 4*1024
          }
        }
      },
      // 处理后缀名为.css或者是.less的文件
      {
        test: /\.(css|less)$/,
        // stuyle-loader作用是在 head 中创建 style 标签
        // MiniCssExtractPlugin.loader是将css抽离为独立的文件
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      },
      
      // 配置字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        // asset/resource可以帮助我们载入任何类型
        type: 'asset/resource'
      },

      {
        test: /\.(csv|tsv)$/,
        use: 'csv-loader'
      },

      {
        test: /\.xml$/,
        use: 'xml-loader'
      },

      {
        test: /\.toml$/,
        type: 'json', 
        parser: {
          parse:toml.parse
        }
      },

      {
        test: /\.yaml$/,
        type: 'json', 
        parser: {
          parse:yaml.parse
        }
      },

      {
        test: /\.json5$/,
        type: 'json', 
        parser: {
          parse:json5.parse
        }
      }
    ]
  },

  // 优化配置属性
  optimization: {
    // 压缩css代码
    minimizer:[
      new CssMinimizerPlugin()
    ]
  }
}

找零钱问题（动态规划版）

动态规划版找零钱问题假设存在2，3，5元三种硬币，给定一定数量的钱，需要换成这三种硬币，并且使用最少的硬币数量这个问题的本质是子问题最优解，由子问题最优解上构造出来的更高级的解也是最优解假设你需要找出2的找钱方案，可以直接取

Web 前端之 Webpack5 教程

Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。我们将 Webpack 输出的文件叫做 bundle。

vue+elementui：前端文件上传与后端文

vue+elementui：前端文件上传与后端文 1.前端上传 <

Linux内核中的链表、红黑树和KFIFO

lLinux内核代码中广泛使用了链表、红黑树和KFIFO。一、链表 linux内核代码大量使用了链表这种数据结构。链表是在解决数组不能动态扩展这个缺陷而产生的一种数据结构。链表所包含的元素可以动态创建并插入和删除。链表的每

cpu参数调优

CPU目录查看数据在手机上，我们可以进入adb shell查看cpu相关信息，例如

视频怎么去水印教程视频怎么去水印无痕迹

平时，我们在网上下载的一些资料，一般都是会有水印的，这样的话，也不方便我们获取其中的一些信息。那么我们该如何去除Word文档当中的水印呢？

【Tensorflow】（十八）：tf.layers.dense

tf.layers.dense( inputs, units, activation=None, use_bias=True, kernel_initializer=None,

window下nodeJs多版本安装并快速切换

由于管理多个前端项目，且使用的node版本不一样，需要安装多个node版本，并快速切换。一.多版本安装 1.在nodejs官网下载需要的版本（

【jquery】jquery-ui日期插件datepicker的使用

jQuery UI 中的

CentOS7修改网卡名由ens33改成eth0

为什么要改网卡名可能有些人会觉得这个操作没有实际的意义，但是真实的情况是我们在做一些操作的时候，往