主题包升级webpack4

themes/yilia/package.json

@@ -1,7 +1,7 @@
 {
   "name": "yilia",
-  "version": "4.0.0",
+  "version": "5.1.0",
-  "description": "a theme for hexo",
+  "description": "Hexo响应式主题",
   "scripts": {
     "dev": "webpack --watch",
     "build": "webpack -p"
@@ -20,17 +20,18 @@
   "devDependencies": {
     "autoprefixer": "^6.5.1",
     "clean-webpack-plugin": "^0.1.15",
-    "cross-env": "^1.0.6",
+    "css-loader": "^2.1.1",
-    "css-loader": "^0.28.11",
     "dom101": "^1.3.0",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^3.0.1",
-    "html-webpack-plugin": "^2.24.1",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.6.0",
     "node-sass": "^4.11.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^2.1.5",
-    "sass-loader": "^7.0.2",
+    "sass-loader": "^7.1.0",
-    "style-loader": "^0.21.0",
+    "url-loader": "^1.1.2",
-    "url-loader": "^1.0.1",
+    "webpack": "^4.30.0",
-    "webpack": "^3.11.0"
+    "webpack-cli": "^3.3.1"
   },
   "dependencies": {
     "axios": "^0.18.0",
@@ -43,14 +44,8 @@
     "babel-preset-stage-2": "^6.24.1",
     "badjs-report": "^1.2.2",
     "es6-promise": "^4.0.5",
-    "file-loader": "^0.9.0",
     "js-cookie": "^2.1.3",
     "leancloud-storage": "^3.7.3",
     "qrious": "^4.0.2"
-  },
-  "config": {
-    "commitizen": {
-      "path": "cz-simple-log"
-    }
   }
 }

themes/yilia/source-src/css/archive.scss

@@ -19,7 +19,7 @@
     z-index: 1;
   }
   .archive-year-wrap a{
-    color: #666;
+    color: $color6;
     font-weight: bold;
     padding-left: 48px;
   }
@@ -46,7 +46,7 @@
 
   .archive-article-title {
     font-size: 16px;
-    color: #333;
+    color: $colorText;
     transition: color 0.3s;
     &:hover{
       color: #657b83;
@@ -88,7 +88,7 @@
     width: auto;
     .article-date{
       time{
-        color: #aaa;
+        color: $colorA;
       }
     }
     .archive-article-date, .article-tag-list{
@@ -97,7 +97,7 @@
       display: inline-block;
       vertical-align: middle;
       zoom: 1;
-      color: #666;
+      color: $color6;
       font-size: 14px;
     }
     .archive-article-date{

themes/yilia/source-src/css/article-main.scss

@@ -60,7 +60,7 @@
   border: 1px solid #ddd;
   border-top: 1px solid #fff;
   border-bottom: 1px solid #fff;
-  background: #fff;
+  background: $colorBg;
   transition: all 0.2s ease-in;
   img{
     max-width: 100%;
@@ -68,7 +68,7 @@
 }
 #comments {
   margin:0 30px;
-  background-color:#fff;
+  background-color:$colorBg;
 }
 .article-inner h1.article-title, .article-title {
   color: #696969;
@@ -113,7 +113,7 @@
   float: right;
   a{
     background: #4d4d4d;
-    color: #fff;
+    color: $colorF;
     font-size: 12px;
     padding: 5px 8px 5px;
     line-height: 16px;

themes/yilia/source-src/css/aside.scss

@@ -5,7 +5,7 @@
     z-index: 999;
     font-size: 14px;
     .icon-plane {
-        color: #fff;
+        color: $colorF;
         text-shadow: 1px 1px 1px #509eb7;
         opacity: 0.7;
         font-size: 52px;
@@ -52,7 +52,7 @@
 .mod-side-operation__jump-to-top {
     .icon-back {
         transition: 0.3s;
-        color: #fff;
+        color: $colorF;
         background: #ccc;
         transform: rotate(90deg);
         font-size: 32px;
@@ -68,7 +68,7 @@
 }
 
 .toc-container.tooltip-left{
-    background: #ccc;
+    background: $colorC;
     margin-top: 10px;
     transition: 0.3s;
     &:hover {
@@ -77,7 +77,7 @@
     .icon-font {
         font-size: 22px;
         line-height: 40px;
-        color: #fff;
+        color: $colorF;
     }
     .tooltip {
         width: 40px;
@@ -98,7 +98,7 @@
         transform-origin: 100% 100%;
         transform: translate3d(0, -10px, 0) rotate3d(1, 1, 1, -30deg);
         a {
-            color: #fff;
+            color: $colorF;
         }
         &::after {
             top: initial;

themes/yilia/source-src/css/core/_variables.scss

@@ -37,6 +37,7 @@ $colorOverlay:                   rgba(0,0,0,.7) !default; // 遮罩层颜色
 $color3:                          #333;
 $color6:                          #666;
 $color9:                          #999;
+$colorA:                          #aaa;
 $colorC:                          #ccc;
 $colorF:                          #f5f5f5;
 

themes/yilia/source-src/css/page.scss

@@ -6,7 +6,7 @@
 		height: 30px;
 		background: #4d4d4d;
 		display: inline-block;
-		color: #fff;
+		color: $colorF;
 		line-height: 30px;
 		font-size: 14px;
 		margin: 0 5px 30px;

themes/yilia/source-src/css/reward.scss

@@ -8,7 +8,7 @@
         height: 56px;
         line-height: 56px;
         font-size: 20px;
-        color: #fff;
+        color: $colorF;
         background: #f44336;
         border-radius: 50%;
         box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
@@ -28,7 +28,7 @@
         justify-content: space-around;
     }
     .reward-p {
-        color: #fff;
+        color: $colorF;
         font-weight: bold;
         text-shadow: 1px 1px 1px #45b9e0;
         .icon {
@@ -45,7 +45,7 @@
     .reward-img {
         width: 130px;
         height: 130px;
-        border: 6px solid #fff;
+        border: 6px solid $colorBorder;
         border-radius: 3px;
     }
 }

themes/yilia/source-src/css/share.scss

@@ -11,7 +11,7 @@
     align-items: center;
     flex-wrap: wrap;
     a {
-        border: 1px solid #fff;
+        border: 1px solid $colorBorder;
         border-radius: 50%;
         display: -moz-inline-stack;
         display: inline-block;
@@ -21,21 +21,21 @@
         -webkit-transition: 0.3s;
         transition: 0.3s;
         text-align: center;
-        color: #fff;
+        color: $colorF;
         opacity: 0.7;
         width: 28px;
         height: 28px;
         line-height: 26px;
         text-shadow: 1px 1px 1px #509eb7;
         &:active {
-            color: #fff;
+            color: $colorF;
         }
         &:hover {
             transform: scale(1.2);
         }
         &.share-outer {
             border: none;
-            color: #fff;
+            color: $colorF;
             background: #4d4d4d;
             text-shadow: none;
         }
@@ -50,7 +50,7 @@
     padding: 20px;
     text-align: center;
     color: #727272;
-    background: #fff;
+    background: $colorBg;
     border-radius: 4px;
     box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
     opacity: 0;

themes/yilia/source-src/css/tags.scss

@@ -7,7 +7,7 @@
     text-decoration:none;  
     font-weight: normal;
     font-size:10px;  
-    color:#fff;   
+    color:$colorF;   
     height:18px;  
     line-height:18px;  
     padding:0 5px 0px 10px;  
@@ -31,7 +31,7 @@
       content:" ";  
       width:4px;  
       height:4px;  
-      background-color:#fff;  
+      background-color:$colorF;  
       border-radius:4px;  
       box-shadow:0px 0px 0px 1px rgba(0,0,0,.3);  
       position:absolute;  
@@ -79,7 +79,7 @@
 .article-pop-out{
   float: left;
   .icon-tuding {
-    color: #999;
+    color: $color9;
     float: left;
     margin-right: 10px;
     margin-top: 6px;
@@ -91,7 +91,7 @@
     float: left;
   }
   .icon {
-    color: #999;
+    color: $color9;
     float: left;
     margin-right: 10px;
     margin-top: 6px;
@@ -102,7 +102,7 @@
 }
 
 .archive-article-date {
-  color: #999;
+  color: $color9;
   margin-right: 7.6923%;
   float: right;
   transition: color 0.3s;

themes/yilia/source-src/css/tools.scss

@@ -38,16 +38,16 @@
       position: relative;
       .search-ipt {
         width: 310px;
-        color: #fff;
+        color: $colorF;
         background: none;
         border: none;
-        border-bottom: 2px solid #fff;
+        border-bottom: 2px solid $colorF;
       }
       .icon {
         position: absolute;
         right: 0;
         top: 7px;
-        color: #fff;
+        color: $colorF;
         cursor: pointer;
         @extend %trans;
         &:hover {

themes/yilia/source-src/css/waifu.scss

@@ -20,7 +20,7 @@
     padding: 5px 10px;
     border: 1px solid rgba(107, 107, 107, 0.7);
     border-radius: 8px;
-    background-color: #fff;
+    background-color: $colorBg;
     font-size: 13px;
     text-overflow: ellipsis;
     position: absolute;
@@ -48,9 +48,9 @@
       width: 0;
       height: 0;
       left: 20px;
-      border-top: 10px white solid;
+      border-top: 10px $colorBg solid;
       border-left: 7px transparent solid;
-      border-right: 6px white solid;
+      border-right: 6px $colorBg solid;
       border-bottom: 10px transparent solid;
     }
   }
@@ -64,7 +64,7 @@
       display: block;
       cursor: pointer;
       color: rgb(57, 57, 57);
-      background-color: #fff;
+      background-color: $colorBg;
       border: 1px solid rgb(57, 57, 57);
       border-radius: 5px;
       padding: 0 4px;

themes/yilia/source-src/js/main.js

@@ -1,7 +1,7 @@
 // 样式
 import '../css/main.scss'
-// 图片查看器
+// 图片查看器 -> 改为单独分块打包
-import Viewer from './viewer'
+// import Viewer from './viewer'
 // 分享
 import Share from './share'
 // 边缘
@@ -11,6 +11,6 @@ import Util from './util'
 
 Util.addLoadEvent(function() {
 	Share.init()
-	Viewer.init()
+	// Viewer.init()
 	Aside.init()
 })

themes/yilia/source-src/js/viewer.js

@@ -3,6 +3,8 @@ import PhotoSwipeUI_Default from '../lib/photoswipe/photoswipe-ui-default'
 import '../lib/photoswipe/photoswipe.css'
 import '../lib/photoswipe/default-skin/default-skin.css'
 
+import Util from './util'
+
 function init() {
 	let pswpElement = document.querySelectorAll('.pswp')[0];
 	let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))
@@ -12,7 +14,6 @@ function init() {
 			if (document.querySelector('.left-col.show')) return
 			let items = []
 			Array.prototype.forEach.call($imgArr, ($em2, i2) => {
-				let img = $em2.getAttribute('data-idx', i2)
 				let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
 				let title = $em2.getAttribute('alt')
 				// 获得原图尺寸
@@ -34,4 +35,7 @@ function init() {
 	})
 }
 
-export default { init }
+// export default { init }
+Util.addLoadEvent(function() {
+	init()
+})

themes/yilia/webpack.config.js

@@ -1,9 +1,8 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CleanPlugin = require('clean-webpack-plugin')
 
-// 模板压缩
-// 详见：https://github.com/kangax/html-minifier#options-quick-reference
 
 const minifyHTML = {
   collapseInlineTagWhitespace: true,
@@ -11,15 +10,13 @@ const minifyHTML = {
   minifyJS:true
 }
 
-const mainCss = new ExtractTextPlugin("css/main.[contenthash:8].css")
-const extraCss = new ExtractTextPlugin("css/extra.[contenthash:8].css")
-
 module.exports = {
   entry: {
     main: "./source-src/js/main.js",
     slider: "./source-src/js/slider.js",
     mobile: ["babel-polyfill", "./source-src/js/mobile.js"],
     comment: "./source-src/js/comment.js",
+    viewer: "./source-src/js/viewer.js",
     waifu: "./source-src/js/waifu.js"
   },
   output: {
@@ -27,37 +24,65 @@ module.exports = {
     filename: "js/[name].[chunkhash:8].js"
   },
   module: {
-    loaders: [{
+    rules: [
-      test: /\.js$/,
+      {
-      loader: 'babel-loader?cacheDirectory',
+        test: /\.js$/,
-      exclude: /node_modules/
+        use: {
-    },{
+          loader: 'babel-loader', 
-      test: /\.(scss|sass)$/,
+          options:{cacheDirectory: true}
-      loader: mainCss.extract({fallback:"style-loader",use:["css-loader","postcss-loader","sass-loader?outputStyle=compact"]})
+        },
-    },{
+        exclude: /node_modules/
-      test: /\.css$/, 
+      },{
-      loaders: extraCss.extract({fallback:"style-loader",use:["css-loader?minimize=true","postcss-loader"]})
+        test: /\.(scss|sass)$/,
-    },{
+        use: [
-      test: /\.(png|jpe?g|gif|ico)$/,
+          MiniCssExtractPlugin.loader,
-      loader: "url-loader",
+          "css-loader",
-      options: {
+          "postcss-loader",
-        limit: 1000,
+          "sass-loader"
-        publicPath: "../",
+        ]
-        name: "images/[name].[ext]"
+      },{
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          "postcss-loader"
+        ]
+      },{
+        test: /\.(png|jpe?g|gif|ico)$/,
+        use: {
+          loader: "url-loader",
+          options: {
+            limit: 1000,
+            publicPath: "../",
+            name: "images/[name].[ext]"
+          }
+        }
+        
+      },{
+        test: /\.(svg|eot|ttf|woff2?|otf)$/,
+        use: {
+          loader: "url-loader",
+          options: {
+            limit: 1000,
+            publicPath: "../",
+            name: "fonts/[name].[hash:6].[ext]"
+          }
+        }
       }
-    },{
+    ]
-      test: /\.(svg|eot|ttf|woff2?|otf)$/,
-      loader: "url-loader",
-      options: {
-        limit: 1000,
-        publicPath: "../",
-        name: "fonts/[name].[hash:6].[ext]"
-      }
-    }]
   },
   plugins: [
-    mainCss,
+    new MiniCssExtractPlugin({
-    extraCss,
+      filename: "css/[name].[contenthash:8].css",
+      chunkFilename: "[id].css"
+    }),
+    new OptimizeCssAssetsPlugin({
+      assetNameRegExp: /viewer\..*?\.css$/g,
+      cssProcessorPluginOptions: {
+        preset: ['default', { discardComments: { removeAll: true } }],
+      },
+      canPrint: true
+    }),
     new HtmlWebpackPlugin({
       inject: false,
       cache: false,
@@ -72,7 +97,7 @@ module.exports = {
       template: './source-src/template/css.html',
       filename: '../layout/_partial/css.ejs'
     }),
-    new CleanPlugin(['source/js/*.js','source/css/*.css'],{
+    new CleanPlugin(['source/js/*.js','source/css/*.css','source/fonts/*'],{
       verbose: true,
       dry: false,
     })