实例效果：一个简单的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=""/> ------------------->这里演示通过src引入图片
</div>
<div class="bg"></div> ------------------->这里演示通过class通过背景图方式引入图片
----------------------------------------------
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;
-----------------------------------------------
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<p>首页</p>
<hr>
<div id="app"></div>
</body>
</html>
--------------------------------------------
重点是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
}),
]
html-webpack-plugin插件注意点:
(1) 一定要在该插件的实例对象中设置template属性,否则会出现打包以后script引入正常，但是index页面内容全部清空的情况
假设项目下有一个src目录，该目录下有一个main.html页面。我们想以它为模板页面，我们可以修改template属性的值，改成main.html的引用路径。如下：
new htmlPlugin({
template:"./src/main.html", //以src目录下的main.html为模板对象
filename:"./page/distindex.html", //output规定了打包后的文件夹为dist，这句表示打包以后的在dist/page下生成名称为distindex.html的页面
minify:{
removeComments:true,
collapseWhitespace:true
}）
（2）chunks的值是引用的js文件的名称，不需要加.js后缀。否则会出现打包以后的index页面无法生成script并且无法引入的情况
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）第二步：在webpack.config.js中修改配置
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的名称
})
]
注：默认link被抽离的css文件放在dist目录下的。如果想把css文件单独放在css文件夹下。可以设置filename为一个路径
plugins:[
new extractTextWebpackPlugin({
filename:"./css/main.css" ------------>main.css最终打包以后路径为dist/css/main.css
})
]
7：在开发中，每次打包都需要运行一下webpack命令。比较影响效率。可以通过安装dev-server来实现热启动。打包一次以后，以后每次修改内容，我们只需要保存一下页面就可以自动刷新。
1：安装 webpack-dev-server(如果没有安装webpack-cli需要先安装)
2：需要指定一个路径，我们自动更新在哪个路径里。脚手架一般默认是dist文件夹
3 ：在package.json中修改script的配置：
代码如下（--------webpack.config.js-------）
module.exports={
entry:{... },
output:{
...
},
module:{
rules:[
{
...
},
{
...
})
}
]
},
plugins:[...],
devServer:{
contentBase:'./dist',
}
}
-----------package.json---------
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack--watch",
"build": "webpack",
"start": "webpack-dev-server --open"
},
3121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
