用到一个新插件:html-webpack-inline-source-plugin(依赖于html-webpack-plugin)

1.安装

  1. npm i -D html-webpack-inline-source-plugin html-webpack-plugin

2.编写webpack.config.js

  1. const path = require('path');
  2. const htmlWebpackPlugin = require('html-webpack-plugin');
  3. var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
  4. module.exports = {
  5. entry: './main.js',
  6. output: {
  7. path: path.resolve('./dist'),
  8. filename: 'bundle.js'
  9. },
  10. plugins: [
  11. new htmlWebpackPlugin({
  12. template: './index.html',
  13. filename: 'index-[hash].html',
  14. inject: 'head',
  15. inlineSource: '.(js|css)'
  16. }),
  17. new HtmlWebpackInlineSourcePlugin()
  18. ]
  19. }

需要在html-webpack-plugin里添加  inlineSource: '.(js|css)'

webpack打包进内联html的更多相关文章

  1. Webpack - 把json文件打包进js文件

    把html文件打包进index.js   1  新建文件 typings.d.ts    declare module "*.html" {   const content: st ...

  2. HTML5进阶段内联标签汇总(小篇)

    内联元素,与别人公用一行,但是设置宽高无效.其特点: ①和其他元素都在一行上: ②高,行高及外边距和内边距不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素 ...

  3. Less与TypeScript的简单理解与应用,并使用WebPack打包静态页面

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 创建空项目 使用Less 使用TypeScript 使用WebPack 开始写项目 总 ...

  4. webpack打包和gulp打包工具详细教程

    30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...

  5. (webpack系列二)webpack打包优化探索

    虽然webpack的已经升级到了webpack4,而我们目前还在使用webpack3,但其中的优化点都大同小异,升级后同样适用. 性能优化初步原则 减小代码量 减小请求数 最大化利用浏览器缓存 这三条 ...

  6. webpack打包经验——处理打包文件体积过大的问题

    前言 最近对一个比较老的公司项目做了一次优化,处理的主要是webpack打包文件体积过大的问题. 这里就写一下对于webpack打包优化的一些经验. 主要分为以下几个方面: 去掉开发环境下的配置 Ex ...

  7. webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)

    在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...

  8. Webpack 打包优化之体积篇

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  9. webpack打包优化点

    目录 1. noParse 2. 包含和排除目录 3. IgnorePlugin 4. happypack 5. DllPlugin动态链接库 6. 热更新 7. 开发环境 tree-shaking ...

随机推荐

  1. CSS3 flexbox 布局 ---- flex 容器属性介绍

    flexbox布局是CSS3中新增的属性,它可以很轻松地帮我们解决掉一些常见的布局问题,比如导航栏. 我们用普通的方法写导航栏,通常会在ul, li 结构写好后,让li 元素左浮动,然后再给ul 清浮 ...

  2. python----re正则模块详解

    今天介绍一下Python中常用的正则表达式处理函数.Python的正则表达式主要有两种方法完成模式匹配:『搜索』和『匹配』 re.match re.match 尝试从字符串的开始全部或者部分匹配某个模 ...

  3. node.js 高级功能

    一.Web 模块 1.http 请求(client.js) var http = require('http'); // 用于请求的选项 var options = { host: 'localhos ...

  4. 日期T转换

    日期转换 在startup.csd ConfigureServices方法里 services.AddMvc().AddJsonOptions(o => { o.SerializerSettin ...

  5. Tomcat启动特慢之SecureRandom问题解决

    tomcat启动日志: 08-Jun-2018 09:23:00.445 WARNING [localhost-startStop-1] org.apache.catalina.util.Sessio ...

  6. Matplotlib学习---用matplotlib画直方图/密度图(histogram, density plot)

    直方图用于展示数据的分布情况,x轴是一个连续变量,y轴是该变量的频次. 下面利用Nathan Yau所著的<鲜活的数据:数据可视化指南>一书中的数据,学习画图. 数据地址:http://d ...

  7. 解决Altera家的ROM仿真数据一直为0

    BUG现象 各种配置都正确,但ROM就是不出数据,输出一直为零. 解决方式 对于rom的仿真,要更改生成的rom文件的一个地方,主要是由于相对路径与绝对路径的问题. 所以最简单的解决方法是把mif文件 ...

  8. 【XSY2332】Randomized Binary Search Tree 概率DP FFT

    题目描述 \(\forall 0\leq i<n\),求有多少棵\(n\)个点,权值和优先级完全随机的treap的树高为\(i\). \(n\leq 30000\) 题解 设\(f_{i,j}\ ...

  9. 普通Splay详解

    预备知识: 二叉搜索树(BST) 至于BST,随便看一下就可以, 我们知道二叉搜索树是O(logN)的,那我们为什么要用平衡树呢? 之前我们了解到,BST的插入是小的往左子树走,大的往右子树走,如果凉 ...

  10. MT【307】周期数列

    (2017浙江省数学竞赛) 设数列$\{a_n\}$满足:$|a_{n+1}-2a_n|=2,|a_n|\le2,n\in N^+$证明:如果$a_1$为有理数,则从某项后$\{a_n\}$为周期数列 ...