webpack 中plugin(插件)的用法

最新推荐文章于 2024-07-02 14:21:14 发布

nan囡315

最新推荐文章于 2024-07-02 14:21:14 发布

阅读量339

点赞数 1

本文链接：https://blog.csdn.net/hangnan315/article/details/119174673

版权

webpack plugin (插件)

插件给webpack提供了很多方便的功能，在进行打包时，利用插件可以解决我们的很多问题

插件就是普通的nodejs模块，所以使用插件时需要下载，并且在 webpack.config.js 中引入

如何使用插件

// 具体如何引入需要看对应插件的文档
const 插件 = require("插件模块")

module.exports = {
  entry: "",
  output: {
    filename: "",
    path
  },

  plugins: [
    new 插件模块({})
  ]
}

插件列表

clean-webpack-plugin

当我们进行打包时，自动删除上次打包的dist目录，如果不写配置，则需要我们写 output 的 path配置，这样，该插件才会自动删除对应生成的打包文件夹

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  ...,

  output: {
    filename: '',
    path: __dirname + "/dist"
  },

  plugins: [
    new CleanWebpackPlugin()
  ]
}

html模板插件

下载 html-webpack-plugin

yarn add html-webpack-plugin -D

在项目目录里创建对应的模板，可以创建在 /public/index.html

<!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><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <div>
    文字
    <p>文字</p>

    <i class="iconfont icon-sousuo"></i>
  </div>
</body>
</html>

配置插件

module.exports = {
  ...,
  plugins: [
    new HtmlWebpackPlugin({
      title: '页面的标题',
      template: '模板的路径'
    }),

    // 如果想生成多个页面，继续new
    new HtmlWebpackPlugin({
      title: '页面的标题',
      template: '模板的路径'
    }),
  ]
}

nan囡315

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 中plugin(插件)的用法

webpack plugin (插件)插件给webpack提供了很多方便的功能，在进行打包时，利用插件可以解决我们的很多问题插件就是普通的nodejs模块，所以使用插件时需要下载，并且在 webpack.config.js 中引入如何使用插件// 具体如何引入需要看对应插件的文档const 插件 = require("插件模块")module.exports = { entry: "", output: { filename: "", path }, plug
复制链接

扫一扫