feat: add renderClient support for '.tsx'

CHANGELOG.md

@@ -1,3 +1,23 @@
+<a name="4.4.5"></a>
+## [4.4.5](https://github.com/easy-team/easywebpack-react/compare/4.4.4...4.4.5) (2019-11-20)
+
+
+### Bug Fixes
+
+* https://github.com/easy-team/egg-react-webpack-boilerplate/issues/44 ([05b407f](https://github.com/easy-team/easywebpack-react/commit/05b407f))
+
+
+
+<a name="4.4.4"></a>
+## [4.4.4](https://github.com/easy-team/easywebpack-react/compare/4.4.3...4.4.4) (2019-08-01)
+
+
+### Bug Fixes
+
+* react-hot-loader console warning ([d499425](https://github.com/easy-team/easywebpack-react/commit/d499425))
+
+
+
 <a name="4.4.3"></a>
 ## [4.4.3](https://github.com/easy-team/easywebpack-react/compare/4.4.2...4.4.3) (2019-06-26)
 

README.md

@@ -22,9 +22,6 @@
 
 React client render and server side render build solution for Webpack
 
-- easywebpack-react ^4.x.x > webpack 4.x.x
-- easywebpack-react ^3.x.x > webpack 3.x.x 
-
 ## Featues
 
 - ✔︎ React Client Render and Server Side Render Build Mode
@@ -33,6 +30,12 @@ React client render and server side render build solution for Webpack
 - ✔︎ ES5/ES6/ES7, TypeScript, DLL, Css Module, Dynamic Import, AntD Dynamic Import
 - ✔︎ Powerful Tool Chain [easywebpack-cli](https://github.com/easy-team/easywebpack-cli)
 
+## Version
+
+- @easy-team/easywebpack-react ^4.x.x > Webpack 4.x.x + Babel 7 
+- easywebpack-react ^4.x.x > Webpack 4.x.x + Babel 6
+- easywebpack-react ^3.x.x > Webpack 3.x.x + Babel 6
+
 ## Documents
 
 - https://www.yuque.com/easy-team/easywebpack
@@ -41,15 +44,15 @@ React client render and server side render build solution for Webpack
 ## Install
 
 ```bash
-$ npm i easywebpack-react --save-dev
+$ npm i @easy-team/easywebpack-react --save-dev
 ```
 
 ## QuickStart
 
 - Install Command Line
 
 ```bash
-$ npm i easywebpack-cli -g 
+$ npm i @easy-team/easywebpack-cli -g 
 ```
 
 - Initalize Application
@@ -69,7 +72,7 @@ $ npm start
 ### Write Webpack Config `webpack.config.js`
 
 ```js
-const easywebpack = require('easywebpack-react');
+const easywebpack = require('@easy-team/easywebpack-react');
 const webpack = easywebpack.webpack;
 const merge = easywebpack.merge;
 const webpackConfig = easywebpack.getWebpackConfig({
@@ -102,13 +105,13 @@ webpack --config webpack.config.js
 
 ```js
 const webpackConfig = require('./webpack.config.js');
-const easywebpack = require('easywebpack-react');
+const easywebpack = require('@easy-team/easywebpack-react');
 const webpackTool = new WebpackTool();
 // development mode
 easywebpack.server(webpackConfig);
 // build file to disk
 easywebpack.build(webpackConfig);
-
+```
 
 ## Example
 

config/plugin/react-ssr-dynamic-chunk-webpack-plugin/index.js

@@ -11,21 +11,22 @@ class ReactSSRDynamicChunkPlugin {
  apply(compiler) {
  compiler.hooks.emit.tap('ReactSSRDynamicChunkPlugin', (compilation, callback) => {
  const buildPath = compilation.options.output.path;
-
- if (!fs.existsSync(buildPath)) {
- mkdirp.sync(buildPath);
- }
-
  compilation.chunks.forEach(chunk => {
  if (!this.opts.chunk) {
  return;
  }
 
+ const chunks = chunk.files || [];
  const asyncChunks = chunk.getAllAsyncChunks();
-
+ const mainChunkFile = chunks.length > 0 ? chunks[0] : null; 
+ const mainChunkDir = mainChunkFile ? path.dirname(mainChunkFile) : null; 
  asyncChunks && asyncChunks.forEach(asyncChunk => {
  asyncChunk.files.forEach(filename => {
- const filepath = path.join(buildPath, filename);
+ const filepath = mainChunkDir ? path.join(buildPath, mainChunkDir, filename) : path.join(buildPath, filename);
+ const filedir = path.dirname(filepath);
+ if (!fs.existsSync(filedir)) {
+ mkdirp.sync(filedir);
+ } 
  const source = compilation.assets[filename].source();
  fs.writeFileSync(filepath, source, 'utf8');
  });
@@ -36,4 +37,4 @@ class ReactSSRDynamicChunkPlugin {
  }
 }
 
-module.exports = ReactSSRDynamicChunkPlugin;
+module.exports = ReactSSRDynamicChunkPlugin;

lib/base.js

@@ -69,7 +69,7 @@ const WebpackReactBaseBuilder = WebpackBuilder => class extends WebpackBuilder {
  }
 
  prepareEntry(entries) {
- return super.prepareEntry(entries, { loader: 'react-entry-template-loader', match: '.jsx' });
+ return super.prepareEntry(entries, { loader: 'react-entry-template-loader', match: /(\.jsx)|(\.tsx)/ });
  }
 };
 module.exports = WebpackReactBaseBuilder;

lib/client.js

@@ -4,6 +4,9 @@ const WebpackReactBaseBuilder = require('./base');
 class WebpackClientBuilder extends WebpackReactBaseBuilder(EasyWebpack.WebpackClientBuilder) {
  constructor(config = {}) {
  super(config);
+ if (this.dev) {
+ this.setAlias('react-dom', '@hot-loader/react-dom', false)
+ }
  }
 
  createHotEntry() {

package.json

@@ -1,19 +1,20 @@
 {
  "name": "easywebpack-react",
- "version": "4.4.3",
+ "version": "4.4.5",
  "description": "React client render and server side render build solution for Webpack",
  "keywords": [
  "webpack",
  "easywebpack",
  "react"
  ],
  "dependencies": {
- "easywebpack": "^4.9.0",
+ "@hot-loader/react-dom": "^16.8.6",
  "babel-preset-react": "^6.24.1",
+ "easywebpack": "^4.9.0",
  "eslint-plugin-react": "^7.1.0",
- "react-hot-loader": "^4.3.5",
+ "isomorphic-style-loader": "^4.0.0",
  "react-entry-template-loader": "^1.0.0",
- "isomorphic-style-loader": "^4.0.0"
+ "react-hot-loader": "^4.3.5"
  },
  "devDependencies": {
  "chai": "^4.0.0",