初识 html-webpack-plugin

栏目: Html · 发布时间: 7年前

内容简介:新建一个文件夹

新建一个文件夹

yarn init 初始化一下

yarn add webpack

使用

编写 webpack.config.js 文件

const path = require(‘path’)
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

module.exports = {
  entry: path.resolve(__dirname, ‘index.js’),
  output: {
    path: path.resolve(__dirname, ‘dist’),
    filename: ‘index.js’
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

config 里用到了 html-webpack-plugin ,所以别忘了 yarn add html-webpack-plugin

config 作用很明确,就是把 entry 输出到 output 配置的位置

plugins 里,我们添加了一个 HtmlWebpackPlugin ,它会把 webpack 生成的 bundles 塞到一个 HTML 文件里

执行 webpack --config webpack.config.js

最终在 dist 下不仅有 index.js 文件,还会有一个 HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset=“UTF-8”></head>
  <body>
  <script type=“text/javascript” src=“index.js”></script></body>
</html>

配置

可以为 htmlWebpackPlugin 添加一些配置

new HtmlWebpackPlugin({
      favicon: ‘./favicon.ico’,
      title: ‘Webpack1’
    })

我们为其生成的 HTML 指定了 favicon 及 title

生成的 HTML 如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=“UTF-8”>
    <title>Webpack1</title>
  <link rel=“shortcut icon” href=“favicon.ico”></head>
  <body>
  <script type=“text/javascript” src=“index.js”></script></body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法统治世界——智能经济的隐形秩序

算法统治世界——智能经济的隐形秩序

徐恪、李沁 / 清华大学出版社有限公司 / 2017-11-15 / CNY 69.00

今天,互联网已经彻底改变了经济系统的运行方式,经济增长的决定性要素已经从物质资料的增加转变成为信息的增长。但是,只有信息的快速增长是不够的,这些增长的信息还必须是“有序”的。只有“有序”才能使信息具有价值,能够为人所用,能够指导我们实现商业的新路径。这种包含在信息里的隐形秩序才是今天信息世界的真正价值所在。经济系统的运行确实是纷繁复杂的,但因为算法的存在,这一切变得有律可循,算法也成为新经济系统里......一起来看看 《算法统治世界——智能经济的隐形秩序》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码