diff --git a/package.json b/package.json index 6ca59e5d89..ff49e3e38f 100644 --- a/package.json +++ b/package.json @@ -107,6 +107,7 @@ "jsonschema": "1.2.2", "jwt-decode": "^2.2.0", "methods": "1.1.2", + "mini-css-extract-plugin": "^0.6.0", "moment": "^2.22.1", "morgan": "^1.9.1", "ng-mocks": "^6.2.1", @@ -125,6 +126,7 @@ "text-mask-core": "5.0.1", "ts-loader": "^5.2.1", "ts-md5": "^1.2.4", + "url-loader": "^1.1.2", "uuid": "^3.2.1", "webfontloader": "1.6.28", "webpack-cli": "^3.1.0", diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js index 3dac48b1e2..4648767a81 100644 --- a/webpack/webpack.common.js +++ b/webpack/webpack.common.js @@ -4,6 +4,8 @@ const { root, join } = require('./helpers'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const devMode = process.env.NODE_ENV !== 'production'; module.exports = { mode: 'development', @@ -61,10 +63,18 @@ module.exports = { options: { sourceMap: true } - }, { - loader: 'raw-loader', + }, + { + loader: MiniCssExtractPlugin.loader, options: { - sourceMap: true + hmr: process.env.NODE_ENV === 'development', + }, + }, + { + loader: 'css-loader', + options: { + sourceMap: true, + url: false } }, { @@ -107,7 +117,13 @@ module.exports = { }, { from: join(__dirname, '..', 'resources', 'i18n'), to: join('assets', 'i18n') - }]) + }]), + new MiniCssExtractPlugin({ + // Options similar to the same options in webpackOptions.output + // both options are optional + filename: devMode ? '[name].css' : '[name].[hash].css', + chunkFilename: devMode ? '[id].css' : '[id].[hash].css', + }), ] };