feat: make react config functional

This commit is contained in:
Igor Randjelovic
2020-11-22 15:51:12 +01:00
parent 403fa6b30f
commit 241c4102f7
6 changed files with 107 additions and 60 deletions

View File

@@ -134,8 +134,15 @@ export default function (config: Config, env: IWebpackEnv): Config {
config.module
.rule('js')
.test(/\.js$/)
.exclude.add(/node_modules/)
.end()
.use('babel-loader')
.loader('babel-loader');
.loader('babel-loader')
.options({
generatorOpts: {
compact: false,
},
});
// set up css
config.module

View File

@@ -19,15 +19,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
config.module
.rule('ts')
.test([...config.module.rule('ts').get('test'), /\.tsx$/])
.use('babel-loader|react-refresh')
.loader('babel-loader')
.before('ts-loader')
.options({
sourceMaps: isAnySourceMapEnabled ? 'inline' : false,
babelrc: false,
plugins: ['react-refresh/babel'],
});
.test([...config.module.rule('ts').get('test'), /\.tsx$/]);
config.plugin('DefinePlugin').tap((args) => {
args[0] = merge(args[0], {
@@ -45,9 +37,20 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
// todo: env flag to forceEnable?
config.when(env.hmr && !production, (config) => {
config.module
.rule('ts')
.use('babel-loader|react-refresh')
.loader('babel-loader')
.before('ts-loader')
.options({
sourceMaps: isAnySourceMapEnabled ? 'inline' : false,
babelrc: false,
plugins: ['react-refresh/babel'],
});
config
.plugin('ReactRefreshWebpackPlugin')
.use(function ReactRefreshWebpackPlugin() {}, [
.plugin('ReactRefreshPlugin')
.use(require('@pmmmwh/react-refresh-webpack-plugin'), [
{
/**
* Maybe one day we'll implement an Error Overlay, but the work involved is too daunting for now.

View File

@@ -1,4 +1,3 @@
import * as compiler from 'nativescript-vue-template-compiler';
import { VueLoaderPlugin } from 'vue-loader';
import { merge } from 'webpack-merge';
import Config from 'webpack-chain';
@@ -24,7 +23,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
.tap((options) => {
return {
...options,
compiler,
compiler: require('nativescript-vue-template-compiler'),
};
})
.end();