0
0

webpack 之 零基础使用常用的Plugin，超详细

在上一篇文章webpack 之 零基础使用常用的Loader中，我们已经学会了js、css、图片、字体等文件的打包，接下来我们继续学习webpack，努力！奋斗！

注意：配置文件中的module里的配置我没有写进来，要不然代码好长，不方便大家抓住重点，可以去看我上一篇文章，或者在这直接复制

// 配置模块
  module: {
    // 规则
    rules: [
      {
        test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i, // 用正则表达式来进行匹配，匹配以这些后缀名的图片
        // 自动选择
        type: 'asset',
        parser: {
          // 数据url的条件配置
          dataUrlCondition: {
            // 超过100kb的图片打包，小于的弄成bast64
            maxSize: 10 * 1024
          }
        },
        // 生成
        generator: {
          filename: 'img/[name]__[hash:8][ext]'
        }
      },
      {
        test: /\.(eot|ttf|woff2?)$/i, // 用正则表达式来进行匹配，匹配以这些后缀名的字体文件
        type: 'asset/resource',
        // 生成
        generator: {
          filename: 'font/[name]__[hash:8][ext]'
        }
      }
    ]
  },

注意：配置文件中的module里的配置我没有写进来，要不然代码好长，不方便大家抓住重点，可以去我上一篇文章中，或者在这直接复制

一、认识Plugin

Webpack的另一个核心是Plugin

  • Loader 是 用于特定的模块类型进行转化，把文件解析成浏览器可以识别的类型
  • Plugin 可以用来执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等

二、CleanWebpackPlugin插件

因为每次修改了配置后，重新打包时，都需要手动删除dist文件夹，这个插件可以帮助我们完成

1.下载安装插件

npm install clean-webpack-plugin -D

2.在webpack.config.js中配置

const path = require('path'); // Node内置模块

// 插件需要这样来导入   这里是导出了一个类
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
    filename: 'boundle.js' // 打包后的js的文件名
  },
  // 配置模块
  module: {
    // 这里就不配置了呢，可以看我上一篇文章呢，要不然代码太多了，不好分清重点
  },

  // 配置插件
  plugins: [
    // 放置着一个个的插件对象
    new CleanWebpackPlugin() // 这样就是创建了一个对象
  ]
};

**接下来后面每次打包，都会自动把文件夹清空重新生成哒~ **

三、HtmlWebpackPlugin插件(HTML文件的打包)

  • 之前的html文件是编写在根目录下的，导致最终打包的dist文件中没有index.html文件
  • 然后在进行项目部署的时候，必然也是需要有对应的入口文件index.html
  • HtmlWebpackPlugin可以对index.html进行打包处理

1.下载安装插件

npm install html-webpack-plugin -D

2.在webpack.config.js配置

const path = require('path'); // Node内置模块

// 插件需要这样来导入   这里是导出了一个类
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
    filename: 'boundle.js' // 打包后的js的文件名
  },
  // 配置模块
  module: {
    // 这里就不配置了呢，可以看我上一篇文章呢，要不然代码太多了，不好分清重点
  },
  // 配置插件,放置着一个个的插件对象
  plugins: [new CleanWebpackPlugin(), new HtmlWebpackPlugin()] 
};

3.效果

这个时候我们可以把index.html文件給删除了，因为这个插件会自动生成一个html放置在dist文件夹中，后续我们直接打开这个生成的index.html即可

4.优化一下，index.html这个文件可以指定生成的模版

  • 在根目录下新建public文件夹，往里再新建一个index.html文件，例如

  • 在webpack配置文件中配置一下
const path = require('path'); // Node内置模块

// 插件需要这样来导入   这里是导出了一个类
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
    filename: 'boundle.js' // 打包后的js的文件名
  },
  // 配置模块
  module: {
    // 这里就不配置了呢，可以看我上一篇文章呢，要不然代码太多了，不好分清重点
  },
  // 配置插件,放置着一个个的插件对象
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // 指定模版路径
      template: './public/index.html',
      // 顺便定义一下title
      title: '超级无敌巨帅小流星'
    })
  ] 
};

四、DefinePlugin插件 (HTML文件的打包)

自定义模版数据填充：有可能我们需要在模版中使用一些定义的变量,比如BASE_URL

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

因为这个插件在webpack中内置了，不需要单独安装，所以可以直接导入使用即可

const path = require('path'); // Node内置模块

// 插件需要这样来导入   这里是导出了一个类
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 插件的导入方式可能不同，具体查看文档哦
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 结构出来
const { DefinePlugin } = require('webpack');

module.exports = {
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
    filename: 'boundle.js' // 打包后的js的文件名
  },
  // 配置模块
  module: {
    // 这里就不配置了呢，可以看我上一篇文章呢，要不然代码太多了，不好分清重点
  },
  // 配置插件,放置着一个个的插件对象
  plugins: [
    // 自动清空dist文件夹并重新生成
    new CleanWebpackPlugin(),
    // 生成index.html文件，并使用模版
    new HtmlWebpackPlugin({
      // 指定模版路径
      template: './public/index.html',
      // 顺便定义一下title
      title: '超级无敌巨帅小流星'
    }),
    // 定义变量
    new DefinePlugin({
      // 这里需注意  如果只有一层引号，那么内部会去找这个变量，所以如果要写字符串的话，里面再套一层，望周知
      BASE_URL: '"无敌的我！！！"'
    })
  ] 
};

  • 模版定义如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 顺便定义一下title -->
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <h1>冲呀冲呀冲呀</h1>
  <!-- 这样使用变量哦 -->
  <H2><%= BASE_URL %></H2>
</body>
</html>

  • npm run build打包后

五、CopyWebpackPlugin插件

tip：在vue的打包过程中，如果我们将一些文件放到public目录下，那么这个目录会被复制到dist文件夹中，这个功能就是用CopyWebpackPlugin来完成

简单地说，就是可以把你不需要打包的文件，直接放到打包后的目录里去

1.下载安装插件

 npm install copy-webpack-plugin -D

2.在public文件夹中新增text.txt

用来测试，看看能否复制到dist文件夹中

3.在配置文件中进行配置

const path = require('path'); // Node内置模块

// 插件需要这样来导入   这里是导出了一个类
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 插件的导入方式可能不同，具体查看文档哦
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 结构出来
const { DefinePlugin } = require('webpack');

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
    filename: 'boundle.js' // 打包后的js的文件名
  },
  // 配置模块
  module: {
    // 这里就不配置了呢，可以看我上一篇文章呢，要不然代码太多了，不好分清重点
  },
  // 配置插件,放置着一个个的插件对象
  plugins: [
    // 自动清空dist文件夹并重新生成
    new CleanWebpackPlugin(),
    // 生成index.html文件，并使用模版
    new HtmlWebpackPlugin({
      // 指定模版路径
      template: './public/index.html',
      // 顺便定义一下title
      title: '超级无敌巨帅小流星'
    }),
    // 定义变量
    new DefinePlugin({
      // 这里需注意  如果只有一层引号，那么内部会去找这个变量，所以如果要写字符串的话，里面再套一层，望周知
      BASE_URL: '"无敌的我！！！"'
    }),
    new CopyWebpackPlugin({
      // 匹配你要复制的文件
      patterns: [
        {
          // 入口
          from: 'public/*',
          // noErrorOnMissing: true,
          // 出口  不写 会自动放到dist文件夹中 => dist/public/
          // 如果这里这样写，就不会把文件夹打包过去，而是打包public文件夹中的内容过去 to: '[name].[hash:8][ext]'   => dist/text
          // to:'abc' => dist/abc/public ;
          globOptions: {
            // 忽略的文件
            ignore: [
              // public文件夹下所有的index.html文件都被忽略，不复制
              '**/index.html'
            ]
          }
        }
      ]
    })
  ] 
};

六、mode配置和devtool配置

  • mode****配置选项：默认是production（什么都不配置的情况下）
  • 可选值：none || development || production
  • none : 不使用默认优化选项
  • development : 开发阶段 设置
  • production : 准备打包上线时 设置

devtool** ： 有好多个值，一般我们只会使用source-map**

1.首先我们先故意把代码写错

例如在index.js中加入如下代码

console.log(abc.name);

// 因为没有定义abc，所以这样直接打印肯定报错！！！

2.打包

打开打包后的index.html，F12打开控制台

3.所以我们可以配置mode

就在这里配置，不要找不到哦

4.代码如下

const path = require('path'); // Node内置模块

// 插件需要这样来导入   这里是导出了一个类
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 插件的导入方式可能不同，具体查看文档哦
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 结构出来
const { DefinePlugin } = require('webpack');

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 设置模式
  mode: 'development',
  // 设置source-map,建立js映射文件，方便调试代码和错误
  devtool: 'source-map',
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    path: path.resolve(__dirname, './dist'), // 因为这里需要绝对路径，__dirname获取到的是当前文件所在路径，所以拼接一下
    filename: 'js/boundle.js' // 打包后的js的文件名
  },
  // 配置模块
  module: {
    // 规则
    rules: [
      {
        test: /\.(css|less)$/, // 用正则表达式来进行匹配，匹配css|less文件
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i, // 用正则表达式来进行匹配，匹配以这些后缀名的图片
        // 自动选择
        type: 'asset',
        parser: {
          // 数据url的条件配置
          dataUrlCondition: {
            // 超过100kb的图片打包，小于的弄成bast64
            maxSize: 10 * 1024
          }
        },
        // 生成
        generator: {
          filename: 'img/[name]__[hash:8][ext]'
        }
      },
      {
        test: /\.(eot|ttf|woff2?)$/i, // 用正则表达式来进行匹配，匹配以这些后缀名的字体文件
        type: 'asset/resource',
        // 生成
        generator: {
          filename: 'font/[name]__[hash:8][ext]'
        }
      }
    ]
  },
  // 配置插件,放置着一个个的插件对象
  plugins: [
    // 自动清空dist文件夹并重新生成
    new CleanWebpackPlugin(),
    // 生成index.html文件，并使用模版
    new HtmlWebpackPlugin({
      // 指定模版路径
      template: './public/index.html',
      // 顺便定义一下title
      title: '超级无敌巨帅小流星'
    }),
    // 定义变量
    new DefinePlugin({
      // 这里需注意  如果只有一层引号，那么内部会去找这个变量，所以如果要写字符串的话，里面再套一层，望周知
      BASE_URL: '"无敌的我！！！"'
    }),
    new CopyWebpackPlugin({
      // 匹配你要复制的文件
      patterns: [
        {
          // 入口
          from: 'public/*',
          // noErrorOnMissing: true,
          // 出口  不写 会自动放到dist文件夹中 => dist/public/
          // 如果这里这样写，就不会把文件夹打包过去，而是打包public文件夹中的内容过去 to: '[name].[hash:8][ext]'   => dist/text
          // to:'abc' => dist/abc/public ;
          globOptions: {
            // 忽略的文件
            ignore: [
              // public文件夹下所有的index.html文件都被忽略，不复制
              '**/index.html'
            ]
          }
        }
      ]
    })
  ]
};

5.可以看到效果啦

看到这里实属不易，大家牛牛牛！！！！！！

标签： webpack 前端 javascript
本文转载自: https://blog.csdn.net/a15297701931/article/details/124699004
版权归原作者 玄鱼殇 所有， 如有侵权，请联系我们删除。
登录后发布评论

“webpack 之 零基础使用常用的Plugin，超详细”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航