zoukankan      html  css  js  c++  java
  • webpack插件之htmlWebpackPlugin

    webpack插件之htmlWebpackPlugin

    由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加载顺序,而只要在index.html内使用<script>标签引入bundle.js即可。

    在index.html内使用引入bundle.js
    在index.html内使用引入bundle.js

    开发阶段,index.html在根目录,script引入好像也没什么问题。

    index.html在根目录
    index.html在根目录

    但在真实发布项目时,发布的内容js文件都在dist文件夹内。但dist文件夹中现在没有有index.html文件,怎么引入js文件? 那么打包js等文件好像毫无用处了。

    现在我们的需求是
    1.将index.html放到dist文件夹内
    2.由于index.html的路径发生改变了,所以引入的路径也要做出的相应改变

    .将index.html放到dist文件夹内并修改路径
    .将index.html放到dist文件夹内并修改路径

    这些修改都要手动操作,手动操作难免出错,这个时候我们就需要一个插件..

    htmlWebpackPlugin

    HtmlWebpackPlugin插件功能:
    口在指定路径自动生成一个index.html文件(可指定模板生成)
    口将打包好的js文件,自动通过script标签插入到body中

    如果一个插件是webpack自带的,这时仅需导入即可;如果不是自带的,那就需要安装,然后再导入。
    为了减少webpack的包体大小,大部分插件都不是webpack自带,需要自行安装。

    htmlWebpackPlugin使用步骤

    1.安装htmlWebpackPlugin指令
    npm i html-webpack-plugin --save-dev

    2.修改webpack.config.js配置,先引用html-webpack-plugin插件,并添加plugins属性

    引用html-webpack-plugin插件,并添加plugins属性
    引用html-webpack-plugin插件,并添加plugins属性

    3.运行npm run build指令,最后程序在dist文件夹自动生成一个index.html文件,此时无需我们再手动更改index.html的位置和引入js脚本.

    dist文件夹自动生成一个index.html
    dist文件夹自动生成一个index.html

    自动引入打包好的js文件
    自动引入打包好的js文件

    4.由于我们使用webpack与vue协同开发,body体还需要一个div容器,用于绑定和挂载vue的元素,此时需要一个模板index.htm来生成。即dist文件夹下index.html需要根目录的index.html生成。修改根目录的index.html,并且给webpack.config.js下的htmlWebpackPlugin添加一个模板参数。

    修改根目录的index.html
    修改根目录的index.html

    给webpack.config.js下的htmlWebpackPlugin添加一个模板参数
    给webpack.config.js下的htmlWebpackPlugin添加一个模板参数

    5.运行npm run build指令,最后程序在dist文件夹自动生成一个index.html文件

    运行npm run build指令
    运行npm run build指令

    npm run build
    npm run build

    6.打开浏览器控制台,在控制台可看到相应的输出。

    打开浏览器控制台,在控制台可看到相应的输出
    打开浏览器控制台,在控制台可看到相应的输出

  • 相关阅读:
    sun.misc.BASE64Encoder----》找不到jar包的解决方法
    javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint-实体报错
    避免MQ消息重发的简单实现思路
    使用Spring的@Scheduled实现定时任务参数详解
    重置密码解决MySQL for Linux错误 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
    安装mysql zip5.7版--安裝
    bzoj3983
    bzoj4044
    bzoj1064
    bzoj4042
  • 原文地址:https://www.cnblogs.com/singledogpro/p/12030578.html
Copyright © 2011-2022 走看看