webpack学习03--打包HTML资源

1.使用npm下载plugin

npm i html-webpack-plugin -D

2.配置webpack.config.js文件

/*
    webpack配置文件，作用：指示webpack怎么干活，干哪些活
    当你运行webpack指令的时候，会加载其中的配置
    所有的构建工具都是基于Node.js来运行的，模块化使用的CommonJS
 */


//插件：1下载， 2引入， 3使用
//npm i html-webpack-plugin -D
const {resolve} = require('path')

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

module.exports = {
    // webpack配置
    // 入口起点
    entry : './src/index.js',
    // 输出
    output :{
        filename : 'build.js',
        path : resolve(__dirname,'build')
    },
    //loader的配置
    module:{
        rules:[
        ]
    },
    //插件的配置
    plugins:[
        //功能：默认会创建一个空的HTML页面，自动引入打包输出的所有资源(js/css)
        //需求有结构的html
        new HtmlWebpackPlugin({
            //复制 './src/index.html'文件，自动引入打包输出的资源
            template:'./src/index.html'
        })
    ],
    //模式
    mode:'development'
    //mdde:'production'
}

3.创建入口文件index.js

console.log('hello');

4.创建空白html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack04</title>
</head>
<body>
    <h1 id="title">hello</h1>
</body>
</html>

5.执行webpack命令打包

webpack

5.会自动生成一个build.js文件和一个index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack04</title>
</head>
<body>
    <h1 id="title">hello</h1>
<script src="build.js"></script></body>
</html>

可以看到，新生成的index.html文件，自动引入了build.js文件

6.测试效果

posted on 2021-02-15 11:15 Sempron2800+ 阅读(118) 评论(0) 编辑收藏举报