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

1.安装

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

2.编写webpack.config.js

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.resolve('./dist'),
filename: 'bundle.js'
},
plugins: [
new htmlWebpackPlugin({
template: './index.html',
filename: 'index-[hash].html',
inject: 'head',
inlineSource: '.(js|css)'
}),
new HtmlWebpackInlineSourcePlugin()
]
}

需要在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. codeforces525B

    Pasha and String CodeForces - 525B Pasha got a very beautiful string s for his birthday, the string ...

  2. codeforces-div2-449-B

    题意:确定一个回文偶数十进制数字,输入k和q,求前k小的和对q取余的值 解题思路:首先确定一个,第k个回文偶数一定前半段一定是k,比如第12个,这个数就是1221: 代码: #include<i ...

  3. Nginx 模块分类

    L:34

  4. oracle复习(二)

    十一.replace 替换格式:(原字符串,要查找的字符或字符串,替换的字符或字符串)select replace('hello world','o','a') from dual; //替换时区分大 ...

  5. kubernetes 构架

  6. Phone List HDU - 1671 字典树

    题意:给出一堆一组一组的数字  判断有没有哪一个是另外一个的前缀 思路:字典树 插入的同时进行判断  不过 当处理一组数字的时候 需要考虑的有两点1.是否包含了其他的序列2.是否被其他序列包含 刚开始 ...

  7. 洛谷P1216数字三角形题解

    题目 这道题是一个典型的DP,可以用倒推,顺推的方法,来解这道题.当然用不同的方法他的循环次序是不一样的,所以我们一定要深刻地理解题目的大意,再采用状态转移方程与边界每次求出最优解,并记录循环一遍后就 ...

  8. MVC使用记录

    如何获得MVC中,控制器和方法名字.这可以用于给当前选定菜单加个选定样式 获取控制器名称:(在View中写法) ViewContext.RouteData.Values["controlle ...

  9. luogu5012 水の数列 (并查集+线段树)

    如果我们能求出来每个区间个数的最大分值,那就可以用线段树维护这个东西 然后出答案了 然后这个的求法和(luogu4269)Snow Boots G非常类似,就是我们把数大小排个序,每次都拿<=x ...

  10. 20165223 《JAVA程序设计》第五周学习总结

    教材学习内容总结 第七章要点 内部类 匿名类 异常类 断言 第十章要点 File类 文件字节/字符的输入.输出流 缓冲流 随机流 数组流 数据流 对象流 序列化和对象克隆 使用Scanner解析文件 ...