webpack使用方法(四):使用HtmlWebpackPlugin插件

文章目录

  • 前言
  • 一、安装HtmlWebpackPlugin插件
  • 二、配置HtmlWebpackPlugin插件


前言

在前几篇文章中,当我们打包完成后想看运行效果,还需要自己手动去修改index.html中加载bundle.js的路径,这里我们可以使用HtmlWebpackPlugin插件来解决一下这个问题。


一、安装HtmlWebpackPlugin插件

还是在根目录安装,在终端输入命令行

npm install html-webpack-plugin -D

二、配置HtmlWebpackPlugin插件

  1. 在根目录创建03-manage-output文件夹,将setup文件夹下的src文件夹、index.html、webpack.config.js文件复制进来。
    webpack使用方法(四):使用HtmlWebpackPlugin插件_第1张图片

  2. 修改一下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插件title>
    head>
    <body>
    body>
    html>
    
  3. 打开webpack.config.js,做以下配置

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
        entry:'./src/index.js',
        output:{
            filename:'bundle.js',
            path:path.resolve(__dirname, './dist')
        },
        mode:'none',
        plugins:[
            new HtmlWebpackPlugin({
                template:'./index.html',
                filename:'app.html',
                inject:'body'
            })
        ]
    }
    

    1)template指定当前目录下的index.html为模板
    2)filename指定输出文件的文件名
    3)inject用来定义自动生成的script标签在什么位置

  4. 进入03-manage-output目录,执行打包命令

    npx webpack
    

    打包完成后可以看到在当前目录下产生了dist文件夹以及app.html和bundle.js两个子文件
    webpack使用方法(四):使用HtmlWebpackPlugin插件_第2张图片
    app.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插件title>
    head>
    <body>
    <script defer src="bundle.js">script>body>
    html>
    
  5. 去浏览器中运行app.html,最后同样输出hello world。
    webpack使用方法(四):使用HtmlWebpackPlugin插件_第3张图片

你可能感兴趣的:(webpack,javascript,前端)