/* CSS Document */
body{
margin:10px
}
#content{ /* 具体内容 */
border-left:1px solid #FC0/* 左边框 */
border-right:1px solid #FC0/* 右边框 */
border-bottom:1px solid #FC0/* 下边框 */
padding:15px
font-size:12px
}
ul#tabnav{
list-style-type:none
margin:0px
padding-left:0px/* 左侧无空隙 */
padding-bottom:23px
border-bottom:1px solid #FC0/* 菜单的下边框 */
font:bold 12px verdana, arial
}
ul#tabnav li{
float:left
height:22px
background:url(images/button3_bg.jpg) repeat-x left bottom
margin:0px 3px 0px 0px
border:1px solid #FC0
}
ul#tabnav a:link, ul#tabnav a:visited{
display:block /* 块元素 */
color:#000000
text-decoration:none
padding:5px 10px 3px 10px
}
ul#tabnav a:hover{
color:#ff0000
background:url(images/button1_bg.jpg) repeat-x left bottom
}
body#hot li.hot, body#new li.new, /* 当前页面的菜单项 */
body#friend li.friend,body#me li.me{
/* 白色下边框，覆盖<ul>中的#FCO下边框 */
border-bottom:1px solid #FFFFFF
color:#000000
background-color:#FFFFFF
}
这是hot.html代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>Tab菜单</title>
<link href="01.css" rel="stylesheet" type="text/css" />
</head>
<body id="hot">
<ul id="tabnav">
<li class="hot"><a href="hot.html">热门转帖</a></li>
<li class="new"><a href="new.html">最新转帖</a></li>
<li class="friend"><a href="friend.html">好友的转帖</a></li>
<li class="me"><a href="me.html">我的转帖</a></li>
</ul>
<div id="content">
</div>
</body>
</html>
其他三个html页：new.html、friend.html、me.html只需将hot.html页中的
<body id="hot"></body>改为相应的名称即可！
原本打包过后是css-in-js,配置完MiniCssExtractPlugin后,可以将css单独打包出来
1,安装npm install --save-dev mini-css-extract-plugin
2,将style-loader替换成MiniCssExtractPlugin.loader (style.loader,支持HMR,但MiniCssExtractPlugin目前正在支持(还没))
3,安装npm install --save-dev optimize-css-assets-webpack-plugin (压缩输出的css文件)
4,安装npm install --save-dev terser-webpack-plugin (因为需要配置minimizer,所以默认的js压缩被覆盖,在旧版本中是使用的 UglifyjsWebpackPlugin来压缩的,但是在最新版本中更换成了TerserJSPlugin)
5,在optimization.minimizer注册OptimizeCSSAssetsPlugin与TerserJSPlugin,注意,当运行mode是development时minimizer并不运行,所以,不会压缩js和css
6,安装npm install css-hot-loader --save-dev (来支持MiniCssExtractPlugin的HMR功能)
7,将css-hot-loader配置于MiniCssExtractPlugin.loader前面,注意,生成的css命名,不能让根据内容的改变而改变,不然找不到变化的css文件,热更新无效,如[name].[hash].css,就会让热更新失效,建议为[name].css
