webpack5学习笔记—基础篇

const path = require('path')
module.exports = {
    entry: './src/index.js',
    
    output: {
        filename: 'bundle.js',// 指定输出文件的文件名

        //输出文件夹必须定义为绝对路径， __dirname nodejs的变量，代表当前文件绝对路径
        path: path.resolve(__dirname, './dist')  
    }, 
    module:{},//解析css，image文件等loader

    plugins:[],// 配置插件
    
    mode:'development', // 开发环境
}

3.2.3 打包命令

若已经全局安装webpack，可直接输入webpack命令打包输出

webpack

使用本地环境进行打包输出

npx webpack

3. 资源模块

asset/resource：发送一个单独的文件并导出 URL
asset/inline：导出一个资源的 Data URI ( 64位图 )
asset/source：导出资源的源代码
asset：在导出一个资源的 Data URI 和发送一个单独的文件之间自动进行选择

resource

修改配置文件：

图片的输出文件名，我们可以让其都输出在images文件夹下面，[contenthash]表示文件名称，[ext]表示图片文件的后缀，比如.png、.jpg、.gif等，[query]表可能存在的参数

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.png$/,
        // 设置资源类型
        type: 'asset/resource',
        generator: {
          // 生成资源名称
          filename: 'images/[contenthash][ext][query]'
        }
      }
    ]
  }
}

准备资源文件，在入口文件引入。打包后在指定目录下生成了一个单独的文件。

同时导出了URL

inline

修改配置文件：

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.svg$/,
        // 设置资源类型
        type: 'asset/inline'
      }
    ]
  }
}

准备资源文件，在入口文件引入，打包后在浏览器中检查，此时得到的是Data URI ( 64位图 )

source

修改配置文件：

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.txt$/,
        // 设置资源类型
        type: 'source'
      }
    ]
  }
}

准备资源文件，打包后在浏览器中检查，可以看到此时导出的是资源的源代码

asset

asset会介于asset/resource和asset/inline之间，在发送一个单独的文件并导出URL和导出一个资源data URI之间做选择

webpack5会判断加载资源的大小，默认情况下，以8k为界限来判断：

当资源大于8k时，自动按asset/resource来判断
当资源小于8k时，自动按asset/inline来判断

修改配置文件，可以通过修改 maxSize 来改变界限值大小

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.jpg$/,
        // 设置资源类型
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4kb
          }
        }
      }
    ]
  }
}

3. loader

1. 什么是loader

loader 能 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供

应用程序使用，以及被添加到依赖图中。

在 webpack 的配置中， loader 有两个属性：

test 属性，识别出哪些文件会被转换。
use 属性，定义出在进行转换时，应该使用哪个 loader

2. 处理css文件

2.1 加载css和less

需要下载样式处理解析器 css-loader 与 style-loader

npm i css-loader style-loader -D

若要解析less文件，则下载 less-loader 用于解析

npm i less-loader less -D

配置 webpack.config.js 文件中的module

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(css|less)$/,
        use: ['style-loader', 'css-loader','less-loader']
      }
    ]
  }
}

2.2 抽离和压缩css

mini-css-extract-plugin是将css单独打包成一个文件的插件,它为每个包含css的js文件都创建一个css文件，首先下载插件（需要在webpack5中使用）

npm i mini-css-extract-plugin -D

之后配置文件，在plugin中实例化插件，并将 'style-loader' 替换为 MiniCssExtractPlugin.loader

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

plugins: [
  new MiniCssExtractPlugin({
    filename: "styles/[contenthash].css"
  })
],
module: {
  rules: [
    {
      test: /\.(css|less)$/,
      use: [MiniCssExtractPlugin.loader, "css-loader"]
    }
  ];
}

用npx webpack进行打包，可以看到dist目录下多了一个style文件夹，里面就是打包好的css

同时在 app.html 文件中能自动引入打包好的css，非常方便

此时打包好的css文件还没有经过压缩，进行压缩需要下载 css-minimizer-webpack-plugin 插件

npm i css-minimizer-webpack-plugin -D

安装好需要在optimization里进行配置，同时将mode改为production

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

optimization: {
    minimizer: [
      new CssMinimizerPlugin()
    ]
},
mode: "production"

执行npx webpack，打包后的css已经是压缩后的样子了

3. 图片资源

在 webpack 5 中，可以使用内置的 Asset Modules 直接引入文件

4. 字体资源

Asset Modules 可以接收并加载任何文件，也包括字体文件，需要配置 webpack.config.js 文件

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource',
      }
    ]
  }
}

5. 数据资源

要导入 CSV、TSV 和 XML等文件，可以使用 csvloader 和 xml-loader

npm i csv-loader xml-loader -D

修改配置文件

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

WEBPACK