webpack 之(4) webpack.config.js配置 之 html

webpack5的版本 后面有版本会单独出一篇文章

通过load打包html文件

     注意:在打包html文件时,因为资源在打包的时候会自动引入

             若index.js有包含css/less文件,就需要配置module中的rules 也就是 loader

  第一步:下载html-webpack-plugin插件

  第二步:在webpack.config.js 中配置plugins

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry:'./src/index.js',
  output:{
    filename:'built.js',
    path: resolve(__dirname,'build')
  },
  module:{
    rules:[

    ]
  },
  plugins:[
    /* npm i html-webpack-plugin 
    功能:默认会创建一个空的html,引入打包输出的所有资源(js/css) 
    需求:需要有结构的HTML文件

    注意:打包html文件中,不要引入这些资源,因为资源在打包的时候会自动引入
    */
    new HtmlWebpackPlugin({
      /* 复制 ' ./src/index.html'文件,自动引入(js/css)*/
      template:'./src/index.html'
    })
  ],
  mode:'development'
}