实例效果：一个简单的demo
项目结构参考vue-cli文件目录
这里我们需要在打包以后出现两个页面。分别是index.html和linsence.html。所以在根目录下新建了这两个页面。（他们实际上模板页面）
这个demo，我们把src下的main和linsence这两个js文件作为入口文件。
main.js中我们需要引入temp组件中的内容。temp中集成了css样式和html结构，最后打包。
temp.html
<div class="temp-box">
<h3>关注官方微信</h3>
<img src="../../asset/1.jpg" alt=""/>
</div>
----------------------------------------------
temp.css
body,html{background: #ddd}
.temp-box{width:70%;box-shadow: 0 0 3px #000}
-----------------------------------------------
temp.js
import "./temp.css"
import template from "./temp.html"
function Layout(){
return{
name:"模板文件",
dom:template
}
}
export default Layout;
-----------------------------------------------
main.js
import Temp from "./components/temp/temp.js"
var app=document.getElementById("app");
var tmp=new Temp();
app.innerHTML=tmp.dom;
-----------------------------------------------
重点是webpack.config.js文件。
var path=require("path");
var htmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
entry:{
main:"./src/main.js",
linsence:"./src/linsence.js"
},
output:{
filename:"./js/[name].js",
path:path.resolve(__dirname,"dist/")
},
module:{
rules:[
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{loader:'css-loader'},
]
},
{
test:/\.html$/,
use:[
{loader:'html-loader'}
]
},
{
test:/\.(jpg|png|gif)$/,
use:[
{
loader:"file-loader",
options:{
name:"[name].[hash].[ext]",
outputPath:"./images/"
}
},
]
}
]
},
plugins:[
new htmlWebpackPlugin({
template:"./src/main.html",
filename:"index.html",
title:"首页",
chunks:['main'],
minify:true
}),
new htmlWebpackPlugin({
filename:"lisence.html",
template:"linsence.html",
title:"许可证",
chunks:['linsence'],
minify:true
}),
]
}
遇到的问题和解决办法：
1 如何在打包以后把js文件和html分开，比如js文件最后都出现在js文件夹下。
解决办法：
在output中给filename的路径前面加一个路径js，表示最后打包的js文件在js文件夹下
output:{
filename:"./js/[name].js",
path:path.resolve(__dirname,"dist/")
},
2 多页面打包，为何通过在plugins数组中设置了多个htmlWebpackPlugin对象（多个new htmlWebpackPlugin对象实例 ），但是
最后却还是一个index页面？
解决办法：
需要给每个htmlWebpackPlugin实例指明filename。例如：
new htmlWebpackPlugin({
template:"./src/main.html",
filename:"index.html",
title:"首页",
minify:true
}),
new htmlWebpackPlugin({
filename:"lisence.html",
template:"linsence.html",
title:"许可证",
minify:true
}),
3 多页面打包，为什么所有的页面都引入了entry对象下的js文件。比如我希望index.html打包以后引入的是main.js，lisence.html打包以后引入的lisences.js？现在这两个页面都同时引入了这两个js文件？
解决办法：
需要给htmlWebpackPlugin实例对象设置chunks参数，指明要引入的js文件。例如：
plugins:[
new htmlWebpackPlugin({
template:"./src/main.html",
filename:"index.html",
title:"首页",
chunks:['main'], -------------->mian.html页面打包后只引入main.js
minify:true
}),
new htmlWebpackPlugin({
filename:"lisence.html",
template:"linsence.html",
title:"许可证",
chunks:['linsence'], -------------->linsen.html页面打包后只引入linsence.js
minify:true
}),
]
4：如何把打包以后的图片资源都单独放在一个image文件下？
解决办法：
设置file-loader的outputPath。（注意：file-loader可以，url-loader不能）例如：
module:{
rules:[
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{loader:'css-loader'},
]
},
{
test:/\.html$/,
use:[
{loader:'html-loader'}
]
},
{
test:/\.(jpg|png|gif)$/,
use:[
{
loader:"file-loader",
options:{
name:"[name].[hash].[ext]", -------->这里是打包以后的图片的名称。ext表示图片原本格式
outputPath:"./images/" ----------->注意这里不能写成"/images"
}
},
]
}
]
},
5：在在 module:{}配置参数中，如果需要多个loader串联。比如style-loader和css-loader。在4.0+版本中
可以采用如下三种方式：
module:{
rules:[
{
test:/\.js$/,
use:{
loader:"babel-loader"
},
exclude:"/node_modules",
include:"/src/"
},
{
test:/\.css$/,
loader:"style-loader!css-loader", =====第二种：use:["style-loader","css-loader"], =====第三种:loader:["style-loader","css-loader"],
exclude:"/node_modules",
}
]
}
6：默认打包以后css是通过style标签内嵌的。如何把打包以后的css通过link标签导入，而不通过style内联的方式？
解决办法：
安装extra-text-webpack-plugin。抽离css。
npm install extract-text-webpack-plugin@next
注意extra-text-webpack-plugin不支持webpack4，通过npm install extract-text-webpack-plugin会报错。
webpack.config.js设置：
*（1） var extractTextWebpackPlugin=require("extract-text-webpack-plugin");
*（2） module.exports={
module:{
rules:[
{
test:/\.css$/,
use:extractTextWebpackPlugin.extract({
fallback:"style-loader",
use:'css-loader'
})
]
},
}
* (3) 在plugins参数中设置：
plugins:[
new extractTextWebpackPlugin({
filename:"main.css" ------------>filename是最后link进来的css的名称
})
]