webpack5之核心配置

这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

1, 前言

webpack在使用loader和plugins的时候，都需要提前在webpack.config.js的文件中进行配置。

**loader使用步骤 :*1, 下载 2，使用配置loader

plugins使用步骤: 1, 下载 2，引入 3，使用

2, webpack打包html文件

(1) 安装插件

npm i html-webpack-plugin -D

(2) 然后引入：

const HtmlWebpackPlugin = require('html-webpack-plugin')

(3) 模板配置

plugins: [
    new HtmlWebpackPlugin({
        template: 'index.html'
      })
]

默认情况下，new HtmlWebpackPlugin() 创建一个空的HTML文件，并且自动引入打包输出的所有资源，如果带有参数，如果需要有结构的HTML文件，需要提前定义个HTML模板，插件会自动复制它

3, webpack打包图片资源

(1) 安装插件

npm i url-loader file-loader -D

(2) loader配置

 // 处理图片
       {
         test: /\.(jpg|png|gif)$/,
         loader: 'url-loader',
         options: {
           // 图片大小小于8kb， 就会被base64处理
           limit: 8 * 1024
         }
       }

注意：默认情况下是处理不了html中的图片的，如果想解决这个问题，需要安装html-loader

npm i html-loader -D

(3) 配置

{
         test: /\.html$/,
         // 处理html文件中的图片，让其能被url-loader识别
         loader: 'html-loader'
 }

配置完html-loader之后，解析之后出现问题：[object Module]

原因是： url-loader默认使用es6模块化解析，而html-laoder引入图片使用的是common.js模块化解析的。

解决方案：在 url-loader下面添加一个熟悉，关闭es6模块化。

esModule: false

总结一下：html-loader是负责引入html文件中的图片，然后交给url-loader去处理。

图片被base64处理之后：

优点：减少请求数量，减轻服务器压力，缺点：图片体积会变更大，文件请求熟读更慢

4, 其他资源的处理

打包其他资源，除了html, js, css资源以外的资源，都是通过file-loader进行处理

比如：通过iconfont下载的字体，默认有三种引入方式。

1，unicode, **2，font class ** , 3，Symbol

综合整体性能：font class更好一些。

// 打包其他资源，除了html, js, css资源以外的资源
       {
           exclude: /\.(css|js|less|html)$/,
           loader: 'file-loader',
           options: {
             name: '[hash:10].[ext]'
           }
       }

5, devServer

开服服务器devServer, 用于自动化（自动编译，自动打开浏览器，自动刷新浏览器

特点：在内存中编译打包，不会有任何输出

启动devServer指令： webpack-dev-server

1, 安装插件

npm i webpack-dev-server -D

2, 属性配置

/// 启动devServer指令： webpack-dev-server
   devServer: {
     // 运行项目目录
     contentBase: resolve(__dirname, 'build'),
     // 启动压缩
     compress: true,
     // 端口号
     port: 3000,
     // 自动打开浏览器
     open: true
   }

3, 开发环境的配置：

webpack会将打包结果输出出去。

npx webpack-dev-server 只会在内存中编译打包，没有输出

4, webpack.config.js 详细配置参考

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path')
module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'js/bundle.js',
     path: resolve(__dirname, 'build')
   },
   module: {
     rules: [
     // 处理css样式资源
      {
         test:/\.(css|less)$/,
         use: [
           'style-loader',
           'css-loader',
           'less-loader'
         ]
      },
      // 处理图片资源
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          // 图片大小小于8kb， 就会被base64处理
          limit: 8 * 1024,
          // 关闭url-loader的es6模块化，使用commonjs解析
          esModule: false,
          // 给图片重命名
          // [hash:10] 去图片的hash的前10位
          // [ext] 去文件原来扩展名
          name: '[hash:10].[ext]',
          outputPath: 'imgs'
        }
      },
      // 处理html中图片
      {
        test: /\.html$/,
        // 处理html文件中的图片，让其能被url-loader识别
        loader: 'html-loader'
      },
      // 处理其他资源
      {
        exclude: /\.(html|js|css|less|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      },
     ]
   },
   plugins: [
     new HtmlWebpackPlugin({
       template: './src/index.html'
     })
   ],
   mode: "development",
   //  开服服务器devServer, 用了自动化（自动编译，自动打开浏览器，自动刷新浏览器）
   // 特点： 在内存中编译打包，不会有任何输出
  // 启动devServer指令： webpack-dev-server
   devServer: {
     // 运行项目目录
     contentBase: resolve(__dirname, 'build'),
     // 启动压缩
     compress: true,
     // 端口号
     port: 3000,
     // 自动打开浏览器
     open: true
   }
};

6, 源码下载

webpack5学习源码