Remove redundant webpack config, use loaders for static assets instead.

ryami333 · ryami333 · commit 59ce1abac2bb · 2019-01-23T14:14:54.000+13:00
diff --git a/demo/src/favicon.ico b/demo/src/favicon.ico
diff --git a/demo/src/index.html b/demo/src/index.html
@@ -9,8 +9,7 @@
             name="description"
             content="Accessible Accordion component for React"
         />
-        <link rel="stylesheet" href="main.css" />
-        <link rel="shortcut icon" href="favicon.ico" />
+        <link rel="shortcut icon" href="${require('./favicon.ico')}" />
     </head>
     <body>
         <div class="wrapper">
diff --git a/demo/src/index.tsx b/demo/src/index.tsx
@@ -11,6 +11,9 @@ import {
 } from '../../src';
 
 // tslint:disable-next-line no-import-side-effect
+import './main.css';
+
+// tslint:disable-next-line no-import-side-effect ordered-imports
 import '../../src/css/fancy-example.css';
 
 // tslint:disable-next-line max-func-body-length
diff --git a/demo/src/main.css b/demo/src/main.css
diff --git a/package.json b/package.json
@@ -17,9 +17,9 @@
         "build:clean": "mkdir dist || true & rm -rf dist/*",
         "build:rollup": "rollup -c",
         "build:types": "yarn tsc --project tsconfig.declaration.json",
-        "build": "yarn build:clean && yarn build:css && yarn build:rollup",
-        "start-demo": "webpack-dev-server --mode=development",
-        "pages": "rm -rf pages && webpack --mode=production --progress && cp demo/*.css pages && cp demo/*.ico pages",
+        "build:demo": "webpack --context=demo --mode=production --progress --output-path=pages",
+        "start-demo": "webpack-dev-server --context=demo --mode=development --hot",
+        "pages": "rm -rf pages && yarn build:demo",
         "deploy": "yarn pages && ./bin/deploy.sh",
         "format": "prettier \"**/*\" --write",
         "prepublishOnly": "yarn typecheck && yarn lint && yarn test && yarn build"
@@ -75,10 +75,12 @@
         "enzyme": "^3.3.0",
         "enzyme-adapter-react-16": "^1.1.1",
         "enzyme-to-json": "^3.3.4",
+        "file-loader": "^3.0.1",
         "html-webpack-plugin": "^3.2.0",
         "husky": "^1.2.1",
         "jest": "^23.6.0",
         "lint-staged": "^8.1.0",
+        "mini-css-extract-plugin": "^0.5.0",
         "prettier": "^1.15.3",
         "raf": "^3.4.0",
         "react": "^16.4.0",
diff --git a/webpack.config.js b/webpack.config.js
@@ -2,13 +2,11 @@
 const webpack = require('webpack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = (env, options) => ({
     mode: options.mode,
-    devtool: 'source-map',
-    entry: path.resolve(__dirname, 'demo/js/demo.tsx'),
     output: {
-        path: path.resolve(__dirname, 'pages'),
         filename:
             options.mode === 'production'
                 ? '[name][chunkhash].js'
@@ -27,7 +25,16 @@ module.exports = (env, options) => ({
             },
             {
                 test: /\.css$/,
-                loaders: ['style-loader', 'css-loader'],
+                use: [
+                    options.mode === 'production'
+                        ? MiniCssExtractPlugin.loader
+                        : 'style-loader',
+                    'css-loader',
+                ],
+            },
+            {
+                test: /\.ico$/,
+                loaders: ['file-loader'],
             },
         ],
     },
@@ -36,15 +43,11 @@ module.exports = (env, options) => ({
     },
 
     plugins: [
-        options.mode === 'development'
-            ? new webpack.HotModuleReplacementPlugin()
-            : () => {},
         new HtmlWebpackPlugin({
-            template: path.resolve(__dirname, 'demo/index.html'),
+            template: 'src/index.html',
+        }),
+        new MiniCssExtractPlugin({
+            filename: '[name][contenthash].css',
         }),
     ],
-
-    devServer: {
-        contentBase: './demo',
-    },
 });
diff --git a/yarn.lock b/yarn.lock
@@ -3041,6 +3041,14 @@ figures@^2.0.0:
   dependencies:
     escape-string-regexp "^1.0.5"
 
+file-loader@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-3.0.1.tgz#f8e0ba0b599918b51adfe45d66d1e771ad560faa"
+  integrity sha512-4sNIOXgtH/9WZq4NvlfU3Opn5ynUsqBwSLyM+I7UOwdGigTBYfVVQEwe/msZNX/j4pCJTIM14Fsw66Svo1oVrw==
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^1.0.0"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -5150,6 +5158,15 @@ mimic-fn@^1.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
   integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
 
+mini-css-extract-plugin@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz#ac0059b02b9692515a637115b0cc9fed3a35c7b0"
+  integrity sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw==
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+    webpack-sources "^1.1.0"
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
