欢迎光临
我们一直在努力

webpack 核心概念plugin

文章目录

Plugin

Plugins,即插件。通过plugins可以在webpack运行到某个时刻的时候,帮我们做一些事情。

HtmlWebpackPlugin

HtmlWebpackPlugin可以为我们生成一个HTML文件,并将打包好的JS文件自动引入到这个html文件中。

安装

npm install --save-dev html-webpack-plugin

配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
            template: 'src/index.html'  // 以src/目录下的index.html为模板打包
        }
    )],
};

运行

npm run dev

这样我们就可以在dist目录下生成HTML模块,且自动引入bundle.js

CleanWebpackPlugin

这个插件并非官方插件,但非常好用。CleanWebpackPlugin可以帮助我们删除上一次打包好的文件。

安装

npm i clean-webpack-plugin -D

配置

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 低版本CleanWebpackPlugin需要配置项 详情移步官网
plugins: [ new CleanWebpackPlugin()]
赞(1) 打赏
未经允许不得转载:散人研 » webpack 核心概念plugin
分享到: 更多 (0)

如果文章有不解或描述错误的地方,欢迎在评论区提问或指正!

评论 抢沙发

8 + 2 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏