初识 html-webpack-plugin

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

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

新建一个文件夹

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>

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

查看所有标签

猜你喜欢:

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

码农书籍

深入浅出MFC （第二版）

侯俊杰 / 华中科技大学出版社 / 2001-1 / 80.00元

《深入浅出MFC》分为四大篇。第一篇提出学习MFC程序设计之前的必要基础，包括Widnows程序的基本观念以及C++的高阶议题。“学前基础”是相当主观的认定，但作者是甚于自己的学习经验以及教学经验，其挑选应该颇具说服力。第二篇介绍Visual C++整合环境开发工具。此篇只是提纲挈领，并不企图取代Visual C++使用手册；然而对于软件使用的老手，此篇或已足以帮助掌握Visual C++整合环境......一起来看看《深入浅出MFC （第二版）》这本书的介绍吧!

码农工具

JSON 在线解析

在线 JSON 格式化工具

XML、JSON 在线转换

在线XML、JSON转换工具