webpack打包进内联html
用到一个新插件: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的更多相关文章
- Webpack - 把json文件打包进js文件
把html文件打包进index.js 1 新建文件 typings.d.ts declare module "*.html" { const content: st ...
- HTML5进阶段内联标签汇总(小篇)
内联元素,与别人公用一行,但是设置宽高无效.其特点: ①和其他元素都在一行上: ②高,行高及外边距和内边距不可改变: ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素 ...
- Less与TypeScript的简单理解与应用,并使用WebPack打包静态页面
既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 创建空项目 使用Less 使用TypeScript 使用WebPack 开始写项目 总 ...
- webpack打包和gulp打包工具详细教程
30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...
- (webpack系列二)webpack打包优化探索
虽然webpack的已经升级到了webpack4,而我们目前还在使用webpack3,但其中的优化点都大同小异,升级后同样适用. 性能优化初步原则 减小代码量 减小请求数 最大化利用浏览器缓存 这三条 ...
- webpack打包经验——处理打包文件体积过大的问题
前言 最近对一个比较老的公司项目做了一次优化,处理的主要是webpack打包文件体积过大的问题. 这里就写一下对于webpack打包优化的一些经验. 主要分为以下几个方面: 去掉开发环境下的配置 Ex ...
- webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)
在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...
- Webpack 打包优化之体积篇
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
- webpack打包优化点
目录 1. noParse 2. 包含和排除目录 3. IgnorePlugin 4. happypack 5. DllPlugin动态链接库 6. 热更新 7. 开发环境 tree-shaking ...
随机推荐
- 51nod 1503 猪和回文(dp滚存)
题面 大意:在一个n*m的矩形中从(1,1)走到(n,m)而且走过的路径是一条回文串,统计方案数 sol:我们考虑从(1,1)和(n,m)两端开始算,这样就只要保证每次经过的字符一样就可以满足回文了, ...
- 学习 Civil 3D二次开发从哪儿开始?
1.1 从哪儿开始 对于多数的工程设计人员,不完全具备上节所述的各种条件.对于Civil 3D的应用可能比较熟悉:但对于计算机语言,只限于上学时所学的一点基础知识,步入工作岗位后与计算机语言基本无缘: ...
- mvc HTML转Excel身份证后三位变成0
@{ var style = "vnd.ms-excel.numberformat:@"; } //HTML <td style=@style><span> ...
- JS获取宽度高度大集合
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- Python 面试题_未完
基础部分 1. 为什么学习Python 家里有在这个IT圈子里面,也想让我接触这个圈子,然后给我建议学的Python, 然后自己通过百度和向有学过Python的同学了解了Python,Python这门 ...
- SPOJ divcntk(min25筛)
题意 \(\sigma_0(i)\) 表示 \(i\) 的约数个数 求 \[ S_k(n)=\sum_{i=1}^n\sigma_0(i^k)\pmod {2^{64}} \] 共 \(T\) 组数据 ...
- 【BZOJ3691】游行(网络流)
[BZOJ3691]游行(网络流) 题面 BZOJ 然而权限题. Description 每年春季,在某岛屿上都会举行游行活动. 在这个岛屿上有N个城市,M条连接着城市的有向道路. 你要安排英雄们的巡 ...
- BUG关闭原因
已解决:缺陷已经修复. 重复缺陷:是指在系统里相同原因的缺陷已经被其他人报告.在此缺陷被作为重复缺陷返回时,先不要立即取消.必须等到核查修复后,才在系统里取消.这是因为有些缺陷被误认为是重复缺陷,实际 ...
- Xposed+JustTrustMe+Android
场景介绍:APP抓包 引出的知识点:ssl-pinning. ssl-pinning: apk在开发时就将服务端证书一块打包到客户端里.这样在HTTPS建立时与服务端返回的证书比对一致性,进而识别出中 ...
- CodeForces - 589B(暴力)
题目链接:http://codeforces.com/problemset/problem/589/B 题目大意:告诉你n 个矩形,知道矩形的长度和宽度(长和宽可以互换),每个矩形的长度可以剪掉一部分 ...