29 html-webpack-plugin基本使用

最新推荐文章于 2023-07-03 00:46:30 发布

Civitasv

最新推荐文章于 2023-07-03 00:46:30 发布

阅读量153

点赞数

分类专栏： Vue 文章标签： vue plugin html

本文链接：https://blog.csdn.net/qq_40996400/article/details/104446403

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

html-webpack-plugin基本使用

html-webpack-plugin插件用于：

在虚拟根目录下生成html文件
自动引用打包得到的文件

1 本地安装

npm i html-webpack-plugin -D

2 修改web.config.js文件

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  // 编译模式
  mode: "development",
  entry: path.join(__dirname, "./src/index.js"),
  output: {
    path: path.join(__dirname, "./dist"),
    filename: "bundle.js" //输出文件的名称
  },
  devServer: {
    open: true,
    port: 4000,
    contentBase: "src",
    hot: true
  },
  plugins: [
    new htmlWebpackPlugin({
      // 创建一个在内存中生成html页面的插件
      template: path.join(__dirname, "./src/index.html"),
      filename: "index.html"
    })
  ]
};

3 index.html

<!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>webpack初探</title>
    <!--<script src="./bundle.js"></script>-->
</head>

<body>
    <div id="app">
        <ul>
            <li>0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>
</body>

</html>