html目录怎么搞出来,webpack怎么把html搬到输出目录里?

首先你需要使用 npm 安装 html-webpack-plugin 插件

你需要生成几个html文件就new 几个 HtmlWebpackPlugin

const HtmlWebpackPlugin = require('html-webpack-plugin')

..... 一大堆配置

plugins: [

new ExtractTextPlugin('[name].css'),

//这里开始写

new HtmlWebpackPlugin({

filename: '这里写生成html存放路径',

template: '', // html模板路径,模板路径是支持传参调用loader的,

inject: 'body', //打包之后的js插入的位置，true/'head'/'body'/false,

chunks: ['这里写entry里面你想引用哪些打包的js文件,这文件是个数组']

}),

new HtmlWebpackPlugin({

// 如果你需要打包多个html,就不停的写下去,当然这个配置是可以动态生成然后push的

})

]

具体楼主还是可以去参考下 html-webpack-plugin 相关资料,百度一大堆就不列出了,也可以去github上面查看

相信楼主看了上面的配置,和查询了相关资料后能很快熟悉的

而且我的html还是很多写好的静态结构的，不是一个简单的html-webpack-plugin就可以生成。首页和文章页面的nav也是相同的，有没有类似jsp的include功能？？

这个楼主就需要用到模板了,个人推荐ejs因为我也只用过这个,此时在template配置里面书写模板的位置,先npm install ejs-full-loader

template: '!!ejs-full-loader!src/build/index.html'

html目录怎么搞出来,webpack怎么把html搬到输出目录里?相关推荐

php打开目录文件类型,php中打开目录并输出目录文件实现代码
opendir() 函数打开一个目录句柄,可由 closedir(),readdir() 和 rewinddir() 使用. 语法 opendir(path,context) */ $d=dir(&q ...
Vue2+VueRouter2+webpack 构建项目实战（二）目录以及文件结构
Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构 2017年8月补充 2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在 ...
Webpack实战（一）：基础入门-教你轻松搞定Webpack打包工具安装及参数配置
为什么要模块化 javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会 ...
一文搞懂 Webpack 多入口配置
最近在做项目的时候遇到了一个场景:一个项目有多个入口,不同的入口,路由.组件.资源等有重叠部分,也有各自不同的部分.由于不同入口下的路由页面有一些是重复的,因此我考虑使用 Webpack 多入口配置来 ...
一次搞懂Webpack Loader
50 亿观众的 "云上奥运",顶级媒体背后的数智化力量东京 2020 奥运会即将闭幕,本届奥运会由于疫情限制,东京地区赛事以无观众的空场形式举行,在无法亲临现场的情况下,全球观众 ...
递归思想解决输出目录下的全部文件
刚刚了解了下递归思想递归就是在方法内调用本方法下面说一个实际的应用输出目录下的全部文件,当目录中还有目录时,则进入目录输出里面的文件 import java.io.*; class ShowFi ...
python 递归目录_Python3：递归实现输出目录下所有的文件
今天来整理一下os库中方法的使用,如何输出一个目录下的所有文件? 1.首先介绍几个基本的的方法: 1)os.getcwd() #返回当前工作目录 2)os.listdir() #返回一个列表, ...
[备忘]silverlight中关于“复制到输出目录”和“生成操作”
复制到输出目录中的输出目录值xap 所在目录,一般指承载sl项目的codebin目录生成操作可以确定文件是到程序集中还是 xap包中还是在目录中适合sl中视频或音频资源的选项有四 ...
【Android NDK 开发】NDK 交叉编译 ( NDK 函数库目录 | Linux 交叉编译环境搭建 | 指定头文件目录 | 指定函数库目录 | 编译 Android 命令行可执行文件 )
文章目录 I . NDK platforms 目录下的函数库 II . Ubuntu 配置 NDK 交叉编译环境 III . 同时指定编译的头文件和库文件 IV . 指定编译的头文件 V . 指定编 ...

html目录怎么搞出来,webpack怎么把html搬到输出目录里?

html目录怎么搞出来,webpack怎么把html搬到输出目录里?相关推荐

最新文章

热门文章