webpack之plugin详解

最新推荐文章于 2022-05-12 16:14:17 发布

wflynn

最新推荐文章于 2022-05-12 16:14:17 发布

阅读量155

点赞数 1

分类专栏： webpack

文章来源：原创地址

本文链接：https://blog.csdn.net/weixin_40013817/article/details/102881297

版权

webpack 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

npm i -D html-webpack-plugin 会在打包结束后，自动生成html文件，并把打包生成的js自动引入到这个html文件中

webpack.config.js 下的配置

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

// plugins可以在webpack运行到某个时刻的时候，帮你做一些事情
plugins: [
    new HtmlWebpackPlugin({ // npm i -D html-webpack-plugin
        template: 'src/index.html' // 以index.html为模板打包 src下的index.html模板 
        // 不需要自己再写root根标签
    }),
],

=====

在src下写一个html模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>html模板</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

clean-webpack-plugin插件：用于删除output path下的文件夹

npm i -D clean-webpack-plugin

// 旧版本
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
    new CleanWebpackPlugin(['dist'])
],

// 新版本
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
plugins: [
    new CleanWebpackPlugin() // 删除的是output.path
],

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wflynn

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
webpack之plugin详解

npm i -D html-webpack-plugin 会在打包结束后，自动生成html文件，并把打包生成的js自动引入到这个html文件中webpack.config.js 下的配置const HtmlWebpackPlugin = require('html-webpack-plugin');// plugins可以在webpack运行到某个时刻的时候，帮你做一些事情...
复制链接

扫一扫