webpack学习03--打包HTML资源

2021-03-01 17:25

阅读：506

标签：指示 bpa file webpack lazy 技术 cti ons ack

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>webpack04title>
head>
body>
    h1 id="title">helloh1>
body>
html>

5.执行webpack命令打包

webpack

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

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>webpack04title>
head>
body>
    h1 id="title">helloh1>
script src="build.js">script>body>
html>