webpack打包为什么没有html文件

‘壹’ react用webpack编译之后怎么不生成html文件

webpack只会生成一个叫做bundle.js的文件，所有的资源文件都被打包到了这个文件上，运行网站也不是直接运行html的，要用npm来运行

‘贰’ webpack打包

你说的“旧的”是指你的 html中引入的吗？

如果是的话，这些css或js 文件，webpack 是不会打包进去的，它也不会去修改你原有的css或js。
它只会处理你在webpack的配置中指定文件夹里的文件。

如果你希望全部都用 webpack 打包的话，就不要这样去引入 css 或 js，要通过js文件中通过 import 来引入模块。

‘叁’ 多个js文件一个html页面适合webpack打包吗

如果是普通的js文件，不需要模块化，也没有特别的处理，可以不用webpack。
简单的html都不需要webpack，使用webpack反而显得繁琐。

‘肆’ 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'

‘伍’ webpack怎么打包html

1. 打包多个页面的js文件 读取src/views下的目录，约定每一个目录当成一个页面，打包成一个js chunk。 2. 打包多个html 循环生成多个HtmlWebpackPlugin插件，把每一个插件的chunks各自指向上面打包的js chunk。

‘陆’ webpack设置了压缩，html也会被压缩，什么参数能排除html被压缩

这里说明了，如果单纯使用html-webpack-plugin插件来处理html，那么在此插件下设置minify为false，就不会压缩html文件；但是如果使用了loader与html-webpack-plugin一起处理html，那么html的压缩还受loader的影响。
从你的描述来看，我估计是受了loader的影响了。

‘柒’ webpack 打包jQuery项目，项目内有多个html页面

1.打包多个页面的js文件读取src/views下的目录，约定每一个目录当成一个页面，打包成一个jschunk。2.打包多个html循环生成多个HtmlWebpackPlugin插件，把每一个插件的chunks各自指向上面打包的jschunk。

‘捌’ webpack 如何打包html,在html中可以压缩哪些东西如何配置

1. 安装: html-webpack-plugin 插件完成打包
2. 命令：npm install html-webpack-plugin –save-dev
3. 配置：
引入：const HtmlWebpackPlugin = require('html-webpack-plugin')；
mole.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'My App',（生成的页面标题）
filename: 'assets/admin.html'，（生成的文件名）
template: 'src/assets/test.html'，（原来的index.html）
minify: {
collapseWhitespace: true,
removeComments: true,
removeRendantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
}
})
]
} （BY三人行慕课）

‘玖’ 为什么webpack分离打包的css文件没有被引入

打包的文件确实需要手动引入，或者用html-webpack-plugin，配置一下就可以自动生成模板

‘拾’ 为什么用webpack 生成html

需求来看下我们的需求:使用webpack-dev-server做开发时的服务器在webpack-dev-server里使用路由，访问/a时候显示a.html，/b显示b.html打包成多个html，给其中引用到资源加md5戳主要目录结构├——src│└——views#每一个文件夹对应一个页面│└——a│└——index.js│└——b│└——index.js├——output#打包输出的目录|└——└——template.html#将根据这个模版，生成各个页面的html└——webpack.config.js└——dev-server.js#webpack-dev-server+express只列出了主要的目录，这里我们根据一个template.html来生成多个页面的html，他们之间只有引用的资源路径不同。当然，你也可以每个页面单独使用一个html模版。Webpack配置这里主要解决两个小问题。1.打包多个页面的js文件读取src/views下的目录，约定每一个目录当成一个页面，打包成一个jschunk。2.打包多个html循环生成多个HtmlWebpackPlugin插件，把每一个插件的chunks各自指向上面打包的jschunk。//webpack.config.jsvarglob=require('glob');varwebpackConfig={/*一些webpack基础配置*/};//获取指定路径下的入口文件functiongetEntries(globPath){varfiles=glob.sync(globPath),entries={};files.forEach(function(filepath){//取倒数第二层(view下面的文件夹)做包名varsplit=filepath.split('/');varname=split[split.length-2];entries[name]='./'+filepath;});returnentries;}varentries=getEntries('src/view/**/index.js');Object.keys(entries).forEach(function(name){//每个页面生成一个entry，如果需要HotUpdate，在这里修改entrywebpackConfig.entry[name]=entries[name];//每个页面生成一个htmlvarplugin=newHtmlWebpackPlugin({//生成出来的html文件名filename:name+'.html',//每个html的模版，这里多个页面使用同一个模版template:'./template.html',//自动将引用插入htmlinject:true,//每个html引用的js模块，也可以在这里加上vendor等公用模块chunks:[name]});webpackConfig.plugins.push(plugin);})路由配置在多页应用下，我们希望访问的是localhost:8080/a，而不是localhost:8080/a.html。由于webpack-dev-server只是将文件打包在内存里，所以你没法在express里直接sendfile('output/views/a.html')，因为这个文件实际上还不存在。还好webpack提供了一个outputFileStream，用来输出其内存里的文件，我们可以利用它来做路由。注意，为了自定义路由，你可能需要引进express或koa之类的库，然后将webpack-dev-server作为中间件处理。//dev-server.jsvarexpress=require('express')varwebpack=require('webpack')varwebpackConfig=require('./webpack.config')varapp=express();//webpack编译器varcompiler=webpack(webpackConfig);//webpack-dev-server中间件vardevMiddleware=require('webpack-dev-middleware')(compiler,{publicPath:webpackConfig.output.publicPath,stats:{colors:true,chunks:false}});app.use(devMiddleware)//路由app.get('/:viewname?',function(req,res,next){varviewname=req.params.viewname?req.params.viewname+'.html':'index.html';varfilepath=path.join(compiler.outputPath,viewname);//使用webpack提供的outputFileSystemcompiler.outputFileSystem.readFile(filepath,function(err,result){if(err){//somethingerrorreturnnext(err);}res.set('content-type','text/html');res.send(result);res.end();});});mole.exports=app.listen(8080,function(err){if(err){//dosomethingreturn;}console.log('Listeningatpackage.json{scripts:{"dev":"node./dev-server.js"}}运行npmrundev，然后在浏览器访问localhost:8080/各个页面，你应该可以看到想要的结果。