webpack （二）插件使用 HtmlWebpackPlugin

最新推荐文章于 2024-03-04 21:27:33 发布

人生海海丶

最新推荐文章于 2024-03-04 21:27:33 发布

阅读量140

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/stayreal_OA/article/details/102741482

版权

webpack 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HtmlWebpackPlugin

https://www.webpackjs.com/plugins/html-webpack-plugin/

HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。

安装

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

配置

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

//插件配置     根据已有模板创建文件
    plugins: [new HtmlWebpackPlugin({
        //原模板文件
        template: "src/index.html",
        //新文件命名
        filename: "index.html"
    })],

跑起来 npm run start

生成的index.html文件存储在内存里。

可以看到页面上有两个bundle.js，配置后它自动生成了一个在底部。所以html页面上写的引入script可以删掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="../dist/bundle.js"></script> -->
    <!-- <script src="../bundle.js"></script> -->
</head>
<body>
    <ul>
        <li>xxxxxxxxxxx</li>
        <li>xxxxxxxxxxx</li>
        <li>xxxxxxxxxxx</li>
        <li>xxxxxxxxxxx</li>
        <li>xxxxxxxxxxx</li>
        <li>xxxxxxxxxxx</li>
    </ul>
</body>
</html>

人生海海丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack （二）插件使用 HtmlWebpackPlugin

HtmlWebpackPluginhttps://www.webpackjs.com/plugins/html-webpack-plugin/HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。你可以让插件为你生成一个HTML文件，使用lodash模板...
复制链接

扫一扫