修改webpack配置

themes/yilia/package.json

@@ -3,7 +3,7 @@
   "version": "5.1.0",
   "description": "Hexo响应式主题",
   "scripts": {
-    "dev": "webpack --watch --progress --mode development",
+    "dev": "webpack --progress --mode development",
     "build": "webpack -p --mode production"
   },
   "repository": {

themes/yilia/source-src/template/css.html

@@ -4,5 +4,5 @@
 
 <% for (let index in htmlWebpackPlugin.files.css) { %>
 <% let cssFile = htmlWebpackPlugin.files.css[index] %>
-<%= `${left} css('${cssFile.substr(cssFile.indexOf("css"),cssFile.length)}') ${right}${right2}` %>
+<%= `${left} css('${cssFile}') ${right}${right2}` %>
 <%  } %>

themes/yilia/source-src/template/script.html

@@ -2,6 +2,7 @@
 <% var right = '%' %>
 <% var right2 = '>' %>
 
-<% for (let chunk in htmlWebpackPlugin.files.chunks) { %>
+<% for (let index in htmlWebpackPlugin.files.js) { %>
-<%= `${left} js('js/${chunk}.${htmlWebpackPlugin.files.chunks[chunk].hash.substr(0,8)}.js') ${right}${right2}` %>
+<% let jsFile = htmlWebpackPlugin.files.js[index] %>
-<%  } %>
+<%= `${left} js('${jsFile}') ${right}${right2}` %>
+<% } %>

themes/yilia/webpack.config.js

@@ -10,97 +10,100 @@ const minifyHTML = {
   minifyJS:true
 }
 
-module.exports = {
+module.exports = function(env, argv) {
-  entry: {
+  // 是否是生产环境
-    main: "./source-src/js/main.js",
+  let isProd = argv.mode === 'production'
-    slider: "./source-src/js/slider.js",
+  return {
-    mobile: ["babel-polyfill", "./source-src/js/mobile.js"],
+    entry: {
-    viewer: "./source-src/js/viewer.js",
+      main: './source-src/js/main.js',
-    waifu: "./source-src/js/waifu.js"
+      slider: './source-src/js/slider.js',
-  },
+      mobile: ['babel-polyfill', './source-src/js/mobile.js'],
-  output: {
+      viewer: './source-src/js/viewer.js',
-    publicPath: '/',
+      waifu: './source-src/js/waifu.js'
-    path: __dirname+"/source",
+    },
-    filename: "js/[name].[chunkhash:8].js"
+    output: {
-  },
+      publicPath: '/',
-  module: {
+      path: __dirname+'/source',
-    rules: [
+      filename: isProd ? 'js/[name].[chunkhash].js' : 'js/[name].js'
-      {
+    },
-        test: /\.js$/,
+    module: {
-        use: {
+      rules: [
-          loader: 'babel-loader', 
+        {
-          options:{cacheDirectory: true}
+          test: /\.js$/,
+          use: {
+            loader: 'babel-loader', 
+            options:{cacheDirectory: true}
+          },
+          exclude: /node_modules/
+        },{
+          test: /\.(scss|sass)$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            'css-loader',
+            'postcss-loader',
+            'sass-loader'
+          ]
+        },{
+          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]'
+            }
+          }
+        }
+      ]
+    },
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: isProd ? 'css/[name].[contenthash].css' : 'css/[name].css',
+        chunkFilename: '[id].css'
+      }),
+      new OptimizeCssAssetsPlugin({
+        assetNameRegExp: /viewer\..*?\.css$/g,
+        cssProcessorPluginOptions: {
+          preset: ['default', { discardComments: { removeAll: true } }],
         },
-        exclude: /node_modules/
+        canPrint: true
-      },{
+      }),
-        test: /\.(scss|sass)$/,
+      new HtmlWebpackPlugin({
-        use: [
+        inject: false,
-          MiniCssExtractPlugin.loader,
+        cache: false,
-          "css-loader",
+        minify: minifyHTML,
-          "postcss-loader",
+        template: './source-src/template/script.html',
-          "sass-loader"
+        filename: '../layout/_partial/script.ejs'
-        ]
+      }),
-      },{
+      new HtmlWebpackPlugin({
-        test: /\.css$/,
+        inject: false,
-        use: [
+        cache: false,
-          MiniCssExtractPlugin.loader,
+        minify: minifyHTML,
-          "css-loader",
+        template: './source-src/template/css.html',
-          "postcss-loader"
+        filename: '../layout/_partial/css.ejs'
-        ]
+      }),
-      },{
+      new CleanPlugin(['source/js/*.js','source/css/*.css','source/fonts/*'],{
-        test: /\.(png|jpe?g|gif|ico)$/,
+        verbose: true,
-        use: {
+        dry: false,
-          loader: "url-loader",
+      })
-          options: {
+    ],
-            limit: 1000,
+    watch: !isProd
-            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]"
-          }
-        }
-      }
-    ]
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      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,
-      minify: minifyHTML,
-      template: './source-src/template/script.html',
-      filename: '../layout/_partial/script.ejs'
-    }),
-    new HtmlWebpackPlugin({
-      inject: false,
-      cache: false,
-      minify: minifyHTML,
-      template: './source-src/template/css.html',
-      filename: '../layout/_partial/css.ejs'
-    }),
-    new CleanPlugin(['source/js/*.js','source/css/*.css','source/fonts/*'],{
-      verbose: true,
-      dry: false,
-    })
-  ],
-  // watch: true
 }