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.测试效果

webpack学习03--打包HTML资源

 

 webpack学习03--打包HTML资源

 

webpack学习03--打包HTML资源

上一篇:TypeScript、React和webpack结合运用


下一篇:织梦dedecms tag设置id.html教程