From 2825df8a82e9aa49ba334f3de4d0ad556675559b Mon Sep 17 00:00:00 2001 From: crupest Date: Mon, 24 Aug 2020 22:24:32 +0800 Subject: Use mini-css-extract-plugin in production. --- Timeline/ClientApp/package.json | 1 + Timeline/ClientApp/webpack.common.js | 6 ------ Timeline/ClientApp/webpack.config.dev.js | 14 ++++++++++++++ Timeline/ClientApp/webpack.config.prod.js | 17 +++++++++++++++++ 4 files changed, 32 insertions(+), 6 deletions(-) diff --git a/Timeline/ClientApp/package.json b/Timeline/ClientApp/package.json index e45b6079..27974f72 100644 --- a/Timeline/ClientApp/package.json +++ b/Timeline/ClientApp/package.json @@ -93,6 +93,7 @@ "html-webpack-plugin": "^3.2.0", "html-webpack-template": "^6.2.0", "http-server": "^0.12.3", + "mini-css-extract-plugin": "^0.10.0", "pnp-webpack-plugin": "^1.6.4", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", diff --git a/Timeline/ClientApp/webpack.common.js b/Timeline/ClientApp/webpack.common.js index 2a619660..7d40fdce 100644 --- a/Timeline/ClientApp/webpack.common.js +++ b/Timeline/ClientApp/webpack.common.js @@ -33,9 +33,6 @@ config.module config.module .rule('css') .test(/\.css$/) - .use('style') - .loader('style-loader') - .end() .use('css') .loader('css-loader') .end() @@ -49,9 +46,6 @@ config.module config.module .rule('sass') .test(/\.(scss|sass)$/) - .use('style') - .loader('style-loader') - .end() .use('css') .loader('css-loader') .end() diff --git a/Timeline/ClientApp/webpack.config.dev.js b/Timeline/ClientApp/webpack.config.dev.js index 840ac24a..2fb9e866 100644 --- a/Timeline/ClientApp/webpack.config.dev.js +++ b/Timeline/ClientApp/webpack.config.dev.js @@ -21,6 +21,20 @@ config.module plugins: ['react-hot-loader/babel'], }); +config.module + .rule('css') + .use('style') + .before('css') + .loader('style-loader') + .end(); + +config.module + .rule('sass') + .use('style') + .before('css') + .loader('style-loader') + .end(); + config.devtool('eval-cheap-module-source-map'); config.resolve.alias.set('react-dom', '@hot-loader/react-dom'); diff --git a/Timeline/ClientApp/webpack.config.prod.js b/Timeline/ClientApp/webpack.config.prod.js index e3ef65e1..5a83a3b8 100644 --- a/Timeline/ClientApp/webpack.config.prod.js +++ b/Timeline/ClientApp/webpack.config.prod.js @@ -2,6 +2,7 @@ const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const WorkboxPlugin = require('workbox-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const config = require('./webpack.common'); @@ -11,8 +12,24 @@ config .entry('index') .add(path.resolve(__dirname, 'src/app/service-worker.tsx')); +config.module + .rule('css') + .use('mini-css-extract') + .before('css') + .loader(MiniCssExtractPlugin.loader) + .end(); + +config.module + .rule('sass') + .use('mini-css-extract') + .before('css') + .loader(MiniCssExtractPlugin.loader) + .end(); + config.devtool('source-map'); +config.plugin('mini-css-extract').use(MiniCssExtractPlugin); + config.plugin('clean').use(CleanWebpackPlugin); config.plugin('copy').use(CopyPlugin, [ -- cgit v1.2.3