webpack打包时生成一个HTML 自动引入打包的js逻辑文件 (HtmlWebpackPlugin)

2022-01-26 09:36:30 阅读：143 来源： 互联网

标签：index 逻辑文件 js webpack html output src 打包

找一个文件夹目录
在终端输入

npm init

根据提示操作就会生成一个package.json

将webpack引入进来

npm install webpack webpack-cli --save-dev

在这里插入图片描述项目目录中也会生成对应的包
然后我们在终端引入

npm install html-webpack-plugin --save

引入html-webpack-plugin第三方插件这也是我们生成HTML的关键、

在项目根目录中创建文件夹src
在src中创建index.html
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>Document</title>
</head>
<body>
    <div id = "text"></div>
</body>
</html>

在src下新建output.js
output.js参考代码如下

const output = () => {
    console.log("output成功执行");
    document.getElementById("text").innerHTML = "output成功执行";
}

export default output

在src下新建index.js
index.js参考代码如下

import output from "./output"

window.onload = function() {
    output();
}

在项目根目录中创建webpack.config.js
webpack.config.js参考代码如下

//通过node获取到当前文件的位置
const path = require('path')
//导入刚引入的第三方插件html-webpack-plugin
const HtmlWebpackPplugin = require('html-webpack-plugin')
module.exports = {
    //设置当前入口文件
    entry: './src/index.js',
    //出口配置
    output: {
      //打包的文件名
      filename: 'bundle.js',
      //生成的文件位置
      path: path.resolve(__dirname, './distribution')
    },
    mode: 'none',
    //webpack插件配置
    plugins: [
      //实例化html-webpack-plugin插件功能
      new HtmlWebpackPplugin({
        //html-webpack-plugin参数配置
        //指定打包HTML文件参照的模板HTML
        template: './src/index.html',
        //生成的html文件名称
        filename: 'app.html',
        //定义打包的js文件引入在新html的哪个标签里
        inject: 'head'
      })
    ]
}

打开package.json 在scripts下加入"build": “webpack”
在这里插入图片描述
然后我们在终端中执行

npm run build

在这里插入图片描述
可以看到我们配置的东西都已经生成出来了

app.html的运行效果也和我们的预期一模一样

标签：index,逻辑文件,js,webpack,html,output,src,打包
来源： https://blog.csdn.net/weixin_45966674/article/details/122695188

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack打包时生成一个HTML 自动引入打包的js逻辑文件 (HtmlWebpackPlugin)