html-webpack-plugin

Introduction:

The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates, or use your own loader.

译文:HtmlWebpackPlugin简化了HTML文件的创建,为您的webpack包服务。这对于在文件名中包含散列的webpack包尤其有用,它会更改每次编译。您可以让插件为您生成一个HTML文件,使用lodash模板提供您自己的模板,或者使用您自己的加载程序。

权威讲解请移步: https://webpack.js.org/plugins/html-webpack-plugin/  or  https://github.com/jantimon/html-webpack-plugin

Installation:

npm install --save-dev html-webpack-plugin or npm i -D html-webpack-plugin

Usage:

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

module.exports = {
entry: 'index.js',
output: {
filename: 'index_bundle.js',
path: __dirname + '/dist'
},
plugins: [new HtmlWebpackPlugin()]
}

这个插件有很多可配置参数:

plugins: [
new HtmlWebpackPlugin({
title: 'Output Management',
filename: 'index-bundle.html' /*----可以配置最终生成的文件名称---*/
template: './src/index.html' /*----可以配置初始模板---*/
})
],

更多配置请移步:https://github.com/jantimon/html-webpack-plugin#options

clean-webpacm-plugin  的作用是 Cleaning up the /dist folder  清除的目录可以名称可以配置

npm install --save-dev clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

plugins: [new CleanWebpackPlugin()]

html-webpack-plugin & clean-webpack-plugin的更多相关文章

  1. webpack之loader和plugin简介

    webpack之loader和plugin简介 webpack入门和实战(二):全面理解和运用loader和plugins webpack入门(四)——webpack loader 和plugin w ...

  2. 深入浅出的webpack构建工具---webpack基本配置(一)

    深入浅出的webpack构建工具---webpack基本配置(一) 阅读目录 一:webpack入门构建: 1. 安装webpack到全局 2. 安装webpack到本项目. 3. 如何使用webpa ...

  3. webpack系列--浅析webpack的原理

    一.前言 现在随着前端开发的复杂度和规模越来越大,鹰不能抛开工程化来独立开发,比如:react的jsx代码必须编译后才能在浏览器中使用,比如sass和less代码浏览器是不支持的.如果摒弃这些开发框架 ...

  4. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  5. Webpack入门——使用Webpack打包Angular项目的一个例子

    2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...

  6. 创建一个dynamics 365 CRM online plugin (六) - Delete plugin from CRM

    我们之前都学习到怎么添加,debug还有update plugin. 今天带大家过一下怎么从CRM instance当中删除plugin. 首先让我们打开Settings -> Customiz ...

  7. http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started

    http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started Jquery.Form 异步 ...

  8. [Webpack] Create Separate webpack Configs for Development and Production with webpack-merge

    The development and production modes in webpack optimize the output in different ways. In developmen ...

  9. 局部安装webpack时,使用webpack命令时提示webpack不是内部命令解决方法

    现在js发展太快了,根本看不懂啊.于是乎想做做功课,于是乎看到了这些“奇怪”的写法,原来好多都是遵循了 ECMASCRIPT6,好吧,在本地看看怎么用的吧.写在本地的环境下, 发现各种报错,根本不能用 ...

  10. webpack配置之webpack.config.js文件配置

    webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve  1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐 ...

随机推荐

  1. iframe内外的操作

    因为iframe涉及到跨域问题,有时候有的比较多,这不今天遇到了一个问题,处在iframe里头的js要操作iframe元素,查找百度,是可以实现的: 用jQuery在IFRAME里取得父窗口的某个元素 ...

  2. JavaScript 事件 继承链 元素和结点

    继承链: HTMLElement->Element->Node->EventTarget->Object document和body:document代表整个文档,body是指 ...

  3. 吴裕雄 python 神经网络TensorFlow实现LeNet模型处理手写数字识别MNIST数据集

    import tensorflow as tf tf.reset_default_graph() # 配置神经网络的参数 INPUT_NODE = 784 OUTPUT_NODE = 10 IMAGE ...

  4. 学习笔记(22)- plato-训练端到端的模型

    原始文档 Train an end-to-end model To get started we can train a very simple model using Ludwig (feel fr ...

  5. 【C语言】将输入的10个整数逆序输出

    代码1: #include <stdio.h> int main() { ], b[]; int i,j; printf("请输入10个整数:\n"); ; i < ...

  6. vue生命周期中update的具体用法

    在页面上 改变元数据data中数据,并且导致页面重新渲染时,才会进入update周期

  7. github 创建gitlab每次提交都要输入账号

    在使用git提交代码到github的时候,经常要求输入用户名和密码,类似这种: 除了在 github 上添加 SSH key 网上有这么一种解决方法:使用git提交到github,每次都要输入用户名和 ...

  8. Hbuilder实用快捷键

    Ctrl + d                   删除整行内容 Ctrl + Shift +R            复制当前行到下一行 Ctrl + Shift +D               ...

  9. 模仿.NET框架ArrayList写一个自己的动态数组类MyArrayList,揭示foreach实现原理

    通过.NET反编译工具可以查看到ArrayList内部的代码,发现ArrayList并非由链表实现,而是由一个不断扩容的数组对象组成. 下面模仿ArrayList写一个自己的MyArrayList. ...

  10. PowerDesigner每点击一次就会提示打印错误对话框

    把服务启用了就好了: 重启软件