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/各個頁面，你應該可以看到想要的結果。