用到一个新插件: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. Redis——redis使用redis-dump,redis-load导出导入数据——【三】

    来源 https://www.cnblogs.com/dadonggg/p/8662455.html https://blog.csdn.net/chenxinchongcn/article/deta ...

  2. Android ProgressDialog 简单实用

    ProgressDialog progressDialog; @SuppressLint("HandlerLeak") Handler handler1 = new Handler ...

  3. ContOS7编译安装python3,配置虚拟环境

    Python36编译安装 一,下载python源码包 网址:https://www.python.org/downloads/release/python-367/ # 软件包下载到/opt目录 cd ...

  4. BZOJ2809 dispatching 【可并堆】

    题目分析: yy一下就知道了,合并用可并堆少个log. 代码: #include<bits/stdc++.h> using namespace std; ; int n,m; int b[ ...

  5. 洛谷P3381 最小费用最大流

    费用流板子 还是一道板子题..先练练手 #include <bits/stdc++.h> #define INF 0x3f3f3f3f #define full(a, b) memset( ...

  6. THUWC2018游记

    前言 这次THUWC有pretest,非常不错.但还是要对拍. DAY1 上午先去报个到. 下午1:30开始比赛,状态还是很好的. 开场先看题. 发现t1是个联赛贪心题,就花了半个小时写完+拍完了. ...

  7. 【BZOJ1013】【JSOI2008】球形空间产生器 高斯消元

    题目描述 有一个\(n\)维空间中的球,告诉你球面上\(n+1\)个点的坐标,求球心的坐标. \(n\leq 10\) 题解 设\(a_{i,j}\)为第\(i\)个点的第\(j\)维坐标,\(i=0 ...

  8. 执行sql脚本保留操作日志

    需求场景,操作数据库场景较多,无专业dba,腾讯云mysql虽然提供了类似于phpmyadmin的管理后台,但是操作卡,效率低 #!/usr/bin CDATE=`date +%Y%m%d-%H%M% ...

  9. 简明的Python教程中的几个疑惑点分析#2

    #1简明的Python教程当中第十四章Python标准库介绍中的使用sys模块 假如你没看懂sys模块这一章节,那么没关系,看下面一段代码再看简明的Python教程中的sys模块实例你将很容易看懂 代 ...

  10. HDU--4825 Xor Sum (字典树)

    题目链接:HDU--4825 Xor Sum mmp sb字典树因为数组开的不够大一直wa 不是报的 re!!! 找了一下午bug 草 把每个数转化成二进制存字典树里面 然后尽量取与x这个位置上不相同 ...