webpack打包进内联html
2023-09-14 09:00:17 时间
用到一个新插件: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打包commonjs和esmodule混用模块的产物对比
- 使用 setup.py 将 Python 库打包分发到 PyPI 踩坑指南
- Platform SDK February 2003 For VC6.0(ISO打包版)
- 工程化之webpack打包过程
- tar 打包隐藏文件[通俗易懂]
- KubeVirt重新打包部署流程
- 软件打包安装软件小记
- webpack Develoment 和 Production 模式的区分打包
- Maven打包时,未引进自己的jar包解决方法
- 【已失效】antdownload2 v1.0.6 官方版 (百度网盘打包批量无限速下载器)
- 在 Windows 上搭建配置 Jenkins 然后编译打包 VS 项目
- Webpack自动清理打包目录
- vue开发后打包部署的网站页面变灰色
- Electron打包错误的踩坑小记
- 【Android NDK 开发】Android.mk 配置静态库 ( Android Studio 配置静态库 | 配置动态库与静态库区别 | 动态库与静态库打包对比 )
- 用HBuilder打包简单项目(vue项目)APP的步骤
- 快速打包Linux文件:无需再烦恼(linux打包多个文件)
- 如何对一个deb包解压、修改、重新打包 全过程
- asp打包类
- 将c#编写的程序打包成应用程序的实现步骤分享(安装,卸载)图文