diff --git a/index.html b/index.html
index 191aad6..30a82d8 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
MobX Boilerplate
+
diff --git a/tsconfig.json b/tsconfig.json
index 8c843e4..4a00798 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,9 @@
"experimentalDecorators": true,
"jsx": "react",
"outDir": "dist",
- "lib": ["dom", "es2015"]
+ "lib": ["dom", "es2015"],
+ "sourceMap": true,
+ "resolveJsonModule": true
},
"exclude": [
"node_modules",
diff --git a/webpack.config.js b/webpack.config.js
index 60010db..bbd8508 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,9 +1,13 @@
var path = require('path');
var webpack = require('webpack');
+const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
module.exports = {
- devtool: 'eval',
+ devtool: 'inline-source-map',
mode: 'development',
+ // mode: 'production',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'./src/index'
@@ -17,11 +21,39 @@ module.exports = {
extensions: ['.js', '.ts', '.tsx'],
alias: { mobx: __dirname + "/node_modules/mobx/lib/mobx.es6.js" }
},
+ plugins: [
+ new ExtractCssChunks({
+ filename: '[name].css',
+ chunkFilename: '[id].css',
+ })
+ ],
module: {
rules: [{
test: /\.tsx?$/,
loader: "ts-loader",
include: path.join(__dirname, 'src')
- }]
+ },
+ {
+ test: /\.less$/,
+ use: [
+ {
+ loader: ExtractCssChunks.loader
+ },
+ {
+ loader: 'css-loader'
+ },
+ {
+ loader: 'less-loader',
+ options: {
+ javascriptEnabled: true
+ },
+ },
+ ],
+ },
+ {
+ test: /\.css$/i,
+ use: [ExtractCssChunks.loader, 'css-loader'],
+ },
+ ]
}
};