bash: Thu Nov 7 17:04:52 CST 2019

dist/images/wave2.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60"><defs><style>.cls{fill:#ffffff;}</style></defs><title>wave</title><g id="wave" data-name="wave"><g id="page"><g id="background"><g id="deco"><path class="cls" d="M166.51,48.09c-8.57-7-15.26-16-22.36-24.21-4.73-5.5-9.63-10.68-15.34-14.79A47.21,47.21,0,0,0,100,0,49.17,49.17,0,0,0,82.13,3.13a49.71,49.71,0,0,0-13.73,8.1c-8.18,6.66-14.79,15.48-22,23.84C41.64,40.64,36.58,46,30.56,50.34A50.27,50.27,0,0,1,0,60H200a50.48,50.48,0,0,1-33.49-11.91Z"/></g></g></g></g></svg>

package.json

@@ -50,7 +50,7 @@
     "start": "webpack-dev-server",
     "release": "cp -r dist docs/dist && cp *.html docs && cleancss dist/bundle.css -o docs/dist/bundle.css",
     "release-win": "cleancss dist/bundle.css -o docs/dist/bundle.css",
-    "build": "rm -rf dist && cross-env ENV_MODE=build webpack",
+    "build": "rm -rf dist && cross-env ENV_MODE=build webpack && mv images dist",
     "clean": "rm -rf dist"
   },
   "author": "mashirozx",

src/images/wave2.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60"><defs><style>.cls{fill:#ffffff;}</style></defs><title>wave</title><g id="wave" data-name="wave"><g id="page"><g id="background"><g id="deco"><path class="cls" d="M166.51,48.09c-8.57-7-15.26-16-22.36-24.21-4.73-5.5-9.63-10.68-15.34-14.79A47.21,47.21,0,0,0,100,0,49.17,49.17,0,0,0,82.13,3.13a49.71,49.71,0,0,0-13.73,8.1c-8.18,6.66-14.79,15.48-22,23.84C41.64,40.64,36.58,46,30.56,50.34A50.27,50.27,0,0,1,0,60H200a50.48,50.48,0,0,1-33.49-11.91Z"/></g></g></g></g></svg>

webpack.config.js

@@ -3,7 +3,7 @@ const autoprefixer = require('autoprefixer');
 const TerserPlugin = require('terser-webpack-plugin');
 // const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
-// const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 // still not work...
 // const imgOutputPath = process.env.ENV_MODE === "build" ? 'images/[name].[ext]' : '../images/[name].[ext]';
@@ -47,16 +47,26 @@ module.exports = [{
       {
         test: /\.scss$/,
         use: [
-          //MiniCssExtractPlugin.loader,
+          // no need with MiniCssExtractPlugin
+          // {
+          //   loader: 'file-loader',
+          //   options: {
+          //     name: './css/bundle.css',
+          //     // outputPath: './css',
+          //   },
+          // },
+          // bug with file-loader: https://github.com/webpack-contrib/css-loader/issues/864#issuecomment-445815198
+          // {
+          //   loader: 'extract-loader'
+          // },
           {
-            loader: 'file-loader',
-            options: {
-              name: './css/bundle.css',
-              // outputPath: './css',
-            },
-          },
-          {
-            loader: 'extract-loader'
+            loader: MiniCssExtractPlugin.loader,
+            // options: {
+            //   // you can specify a publicPath here
+            //   // by default it uses publicPath in webpackOptions.output
+            //   publicPath: '../',
+            //   hmr: process.env.NODE_ENV === 'development',
+            // },
           },
           {
             loader: 'css-loader'
@@ -118,11 +128,11 @@ module.exports = [{
     //   template: './src/single.html',
     //   chunks: ['single']
     // })
-    // new MiniCssExtractPlugin({
-    //   // Options similar to the same options in webpackOptions.output
-    //   // both options are optional
-    //   filename: "[name].css",
-    //   chunkFilename: "[name]_[hash].css"
-    // })
+    new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: "css/bundle.css",
+      // chunkFilename: "[id].css"
+    })
   ]
 }];