小白学 Webpack之插件 HTML-webpack-plugin

html-webpack-plugin 插件打包

npm install --save-dev html-webpack-plugin

文档查阅

配置下

webpack.config.js

var path=require('path');

//插件
var HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
  //入口文件
  entry:'./src/index.js',
  output:{
    //文件名
    filename:'main.js',
    path:path.resolve(__dirname,'./dist/')
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

打包一下

webpack

自动生成index.html并映入js文件

如果想要生成多一个地图

var path=require('path');

//插件
var HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
  //入口文件
  entry:'./src/index.js',
  output:{
    //文件名
    filename:'main.js',
    path:path.resolve(__dirname,'./dist/')
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      filename: 'index.html'
    })
  ],
  devtool: "source-map",//地图 inline-source-map 内联地图
  mode:"development" //开发模式
}

html-webpack-plugin 插件常用参数说明

  • title 生成html的文档标题
  • filename 生成html的文件名
  • template 生成html的文件模板,默认是 src/index.ejs
  • publicPath 用于脚本和链接标签的publicPath
  • favicon 将给定的图标图标路径添加到输出HTML
  • meta 允许注入meta-tags
  • hash 默认false,如果是,true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。这对于清除缓存很有用
  • cache 默认true 仅在文件被更改时发出文件

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。