!85 webpack4

Merge pull request !85 from ChenX/webpack4_2

.gitignore

@@ -59,5 +59,4 @@ typings/
 
 #custom
 .vscode
-/dist
+/dist*
-/package-lock.json

config/outputPath.ts

@@ -0,0 +1,9 @@
+var GitRevisionPlugin = require('git-revision-webpack-plugin');
+var gitRevisionPlugin = new GitRevisionPlugin();
+export let outputDir: string;
+
+const useGitBranchName = false;
+if (useGitBranchName)
+    outputDir = `../dist_${gitRevisionPlugin.branch()}/`;
+else
+    outputDir = "../dist/"

config/webpack.common.ts

@@ -1,51 +1,45 @@
+import * as AddAssetHtmlPlugin from "add-asset-html-webpack-plugin";
+import * as ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import * as HardSourceWebpackPlugin from 'hard-source-webpack-plugin';
+import * as HtmlWebPackPlugin from "html-webpack-plugin";
 import * as path from 'path';
 import * as webpack from 'webpack';
-import * as HtmlWebPackPlugin from "html-webpack-plugin";
+import { outputDir } from "./outputPath";
-import * as AddAssetHtmlPlugin from "add-asset-html-webpack-plugin";
-// import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
-// import * as OpenBrowserPlugin from 'open-browser-webpack-plugin';
 
 function getpath(fileName)
 {
     return path.resolve(__dirname, fileName);
 }
+
 const config: webpack.Configuration = {
     entry: "./src/index.tsx",
-    output: {
+    output: { path: getpath(outputDir) },
-        path: path.join(__dirname, "dist"),
-        filename: '[name].js',
-        publicPath: '/',
-        hotUpdateChunkFilename: 'hot/[id].[hash].hot-update.js',
-        hotUpdateMainFilename: 'hot/[hash].hot-update.json'
-    },
-    // Enable sourcemaps for debugging webpack's output.
-    devtool: "source-map",
     resolve: {
         alias: {
-            "dat.gui": getpath('./node_modules/dat.gui/build/dat.gui.js'),
+            "dat.gui": getpath('../node_modules/dat.gui/build/dat.gui.js'),
-            "three-FBXLoader": getpath("./src/Loader/FBXLoader.js"),
+            "three-FBXLoader": getpath("../src/Loader/FBXLoader.js"),
-            "three-CopyShader": getpath("./node_modules/three/examples/js/shaders/CopyShader.js"),
+            "three-CopyShader": getpath("../node_modules/three/examples/js/shaders/CopyShader.js"),
-            "three-SMAAShader": getpath("./node_modules/three/examples/js/shaders/SMAAShader.js"),
+            "three-SMAAShader": getpath("../node_modules/three/examples/js/shaders/SMAAShader.js"),
-            "three-FXAAShader": getpath("./node_modules/three/examples/js/shaders/FXAAShader.js"),
+            "three-FXAAShader": getpath("../node_modules/three/examples/js/shaders/FXAAShader.js"),
-
-            "three-OutlinePass": getpath("./src/GraphicsSystem/OutlinePass.js"),
-            "three-EffectComposer": getpath("./node_modules/three/examples/js/postprocessing/EffectComposer.js"),
-            "three-RenderPass": getpath("./node_modules/three/examples/js/postprocessing/RenderPass.js"),
-            "three-ShaderPass": getpath("./node_modules/three/examples/js/postprocessing/ShaderPass.js"),
-            "three-SMAAPass": getpath("./node_modules/three/examples/js/postprocessing/SMAAPass.js"),
-            // "stats-js": getpath('./node_modules/stats.js/src/stats.js'),
 
-            "three-Reflector": getpath("./src/objects/Reflector.js"),
+            "three-OutlinePass": getpath("../src/GraphicsSystem/OutlinePass.js"),
+            "three-EffectComposer": getpath("../node_modules/three/examples/js/postprocessing/EffectComposer.js"),
+            "three-RenderPass": getpath("../node_modules/three/examples/js/postprocessing/RenderPass.js"),
+            "three-ShaderPass": getpath("../node_modules/three/examples/js/postprocessing/ShaderPass.js"),
+            "three-SMAAPass": getpath("../node_modules/three/examples/js/postprocessing/SMAAPass.js"),
         },
-        // Add '.ts' and '.tsx' as resolvable extensions.
         extensions: [".ts", ".tsx", ".js", "json"]
     },
-
     module: {
         rules: [
             {
                 test: /\.tsx?$/,
-                loader: "awesome-typescript-loader"
+                exclude: /node_modules/,
+                loader: 'ts-loader',
+                options: {
+                    transpileOnly: true,
+                    experimentalWatchApi: true,
+                },
             },
             {
                 test: /\.[(png)|(obj)|(json)]$/,
@@ -54,7 +48,7 @@ const config: webpack.Configuration = {
             //样式加载 css
             {
                 test: /\.css$/,
-                use: ['style-loader', 'css-loader']
+                use: ['style-loader', { loader: 'css-loader', options: { sourceMap: false } }]
             },
             //样式加载 less
             {
@@ -62,9 +56,7 @@ const config: webpack.Configuration = {
                 use: [{
                     loader: "style-loader"
                 },
-                {
+                { loader: 'css-loader', options: { sourceMap: false } },
-                    loader: "css-loader"
-                },
                 {
                     loader: "less-loader",
                     options: {
@@ -106,22 +98,14 @@ const config: webpack.Configuration = {
         "golden-layout": "GoldenLayout",
         "three": "THREE"
     },
-    // Other options...
-    devServer: {
-        contentBase: path.join(__dirname, "dist"),
-        port: 7778,
-        hot: true
-    },
     plugins: [
         new HtmlWebPackPlugin({
             title: "webCAD",
-            template: 'index.html'
+            template: getpath('../src/index.html')
         }),
-        new webpack.NamedModulesPlugin(),
-        new webpack.HotModuleReplacementPlugin(),
         new webpack.DllReferencePlugin({
-            context: '.',
+            context: __dirname,
-            manifest: require(getpath("./manifest.json"))
+            manifest: require(`${outputDir}/manifest.json`)
         }),
         new AddAssetHtmlPlugin(
             [
@@ -139,21 +123,25 @@ const config: webpack.Configuration = {
                     filepath: "./dist/dll.js",
                     includeSourcemap: false
                 },
-                { filepath: "./node_modules/three/build/three.min.js", includeSourcemap: false },
+                {
+                    filepath: "./node_modules/three/build/three.min.js",
+                    includeSourcemap: false
+                },
                 {
                     filepath: "./node_modules//three/examples/js/libs/inflate.min.js",
                     includeSourcemap: false
                 },
             ]
         ),
-        // new ExtractTextPlugin({ filename: 'styles.css' }),
         new webpack.ProvidePlugin({
             ReactDOM: 'react-dom',
             React: 'react',
             THREE: "three"
         }),
-        new webpack.optimize.ModuleConcatenationPlugin()
+        new HardSourceWebpackPlugin(),
-    ]
+        new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true }),
+    ],
+    node: false
 };
 
 export default config;

config/webpack.dev.ts

@@ -0,0 +1,24 @@
+import * as webpack from 'webpack';
+import * as merge from 'webpack-merge';
+import { outputDir } from './outputPath';
+import common from './webpack.common';
+
+const config: webpack.Configuration = merge(
+    common,
+    {
+        mode: "development",
+        output: { pathinfo: false },
+        devtool: "cheap-module-eval-source-map",
+        devServer: {
+            contentBase: outputDir,
+            port: 7778,
+            hot: true
+        },
+        plugins: [
+            new webpack.NamedModulesPlugin(),//Hot
+            new webpack.HotModuleReplacementPlugin(),//Hot
+        ]
+    }
+);
+
+export default config;

config/webpack.dll.ts

@@ -0,0 +1,46 @@
+import * as webpack from 'webpack';
+import * as path from 'path';
+import UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+import { outputDir } from './outputPath';
+
+const dllName = "dll"
+const vendors = [
+    "@blueprintjs/core",
+    "css-element-queries",
+    "mobx",
+    "mobx-react",
+    "react",
+    "react-addons-css-transition-group",
+    "react-color",
+    "react-dom",
+    "stats.js",
+    "xaop",
+    "blueimp-md5"
+];
+
+const config: webpack.Configuration = {
+    mode: "production",
+    output: {
+        path: path.resolve(__dirname, outputDir),
+        filename: dllName + '.js',
+        library: dllName,
+    },
+    entry: { "lib": vendors, },
+    plugins: [
+        new webpack.DllPlugin({
+            path: path.resolve(__dirname, `${outputDir}manifest.json`),
+            name: dllName,
+            context: __dirname,
+        }),
+        new UglifyJSPlugin(
+            {
+                sourceMap: true,
+                cache: true,
+                extractComments: true,
+                parallel: 4
+            }
+        )
+    ],
+};
+
+export default config;

config/webpack.prod.ts

@@ -0,0 +1,41 @@
+import * as webpack from 'webpack';
+import * as merge from 'webpack-merge';
+import common from './webpack.common';
+import UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+
+const config: webpack.Configuration = merge(
+    common,
+    {
+        mode: "production",
+        devtool: "source-map",
+
+        optimization: {
+            minimizer: [
+                new UglifyJSPlugin(
+                    {
+                        sourceMap: true,
+                        cache: true,
+                        extractComments: true,
+                        parallel: true,
+                        uglifyOptions: {
+                            output: {
+                                beautify: false,
+                            },
+                            // mangle: {
+                            //     properties: {
+                            //         // mangle property options
+                            //         // keep_quoted: true 混淆属性
+                            //         debug: true //因为混淆了THREE库导致的错误.
+                            //     }
+                            // },
+                            keep_classnames: true,
+                            toplevel: true,
+                        },
+                    }
+                )
+            ]
+        }
+    }
+);
+
+export default config;

dll.config.js

@@ -1,38 +0,0 @@
-const webpack = require('webpack');
-
-const dllName = "dll"
-var path = require('path');
-const vendors = [
-    "@blueprintjs/core",
-    "css-element-queries",
-    "mobx",
-    "mobx-react",
-    "react",
-    "react-addons-css-transition-group",
-    "react-color",
-    "react-dom",
-    "stats.js",
-    "xaop",
-    "blueimp-md5"
-];
-
-module.exports = {
-    output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: dllName + '.js',
-        library: dllName,
-    },
-    entry: {
-        "lib": vendors,
-    },
-    resolve: {
-    },
-    // devtool: "source-map",
-    plugins: [
-        new webpack.DllPlugin({
-            path: 'manifest.json',
-            name: dllName,
-            context: __dirname,
-        })
-    ],
-};

package.json

@@ -4,13 +4,11 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "webpack-dev-server",
+    "dev": "webpack-dev-server --config ./config/webpack.dev.ts",
     "dev2": "webpack-dev-server --config web-cad-view.config.ts",
-    "dts": "tcm src -o ./src/UI/css_dts",
     "buildview": "webpack --config dll.config.js &&webpack --config web-cad-view.config.ts",
-    "dll": "webpack --config dll.config.js",
+    "dll": "webpack --config ./config/webpack.dll.ts",
-    "build": "webpack",
+    "build": "webpack --config ./config/webpack.prod.ts",
-    "i": "npm i && npm i -dev",
     "test": "jest",
     "testu": "jest -u",
     "ser": "node ./utils/server.js",
@@ -22,53 +20,59 @@
   "devDependencies": {
     "@types/blueimp-md5": "^2.7.0",
     "@types/dat-gui": "^0.6.3",
-    "@types/html-webpack-plugin": "^2.30.4",
+    "@types/hard-source-webpack-plugin": "^0.9.0",
-    "@types/jest": "^22.2.2",
+    "@types/html-webpack-plugin": "^3.2.0",
-    "@types/node": "^9.6.7",
+    "@types/jest": "^23.3.0",
-    "@types/react": "^16.4.6",
+    "@types/node": "^10.5.3",
+    "@types/react": "^16.4.7",
     "@types/react-dom": "^16.0.6",
     "@types/stats.js": "^0.17.0",
-    "@types/three": "^0.91.7",
+    "@types/three": "^0.92.14",
-    "@types/webpack": "^4.1.3",
+    "@types/uglifyjs-webpack-plugin": "^1.1.0",
-    "@types/webpack-env": "^1.13.4",
+    "@types/webpack": "^4.4.8",
+    "@types/webpack-dev-server": "^2.9.5",
+    "@types/webpack-env": "^1.13.6",
+    "@types/webpack-merge": "^4.1.3",
     "add-asset-html-webpack-plugin": "^2.1.3",
-    "awesome-typescript-loader": "^3.4.1",
+    "css-loader": "^1.0.0",
-    "css-loader": "^0.28.11",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.11",
+    "fork-ts-checker-webpack-plugin": "^0.4.3",
+    "git-revision-webpack-plugin": "^3.0.3",
+    "hard-source-webpack-plugin": "^0.11.2",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^22.4.3",
+    "jest": "^23.4.1",
-    "less": "^3.0.4",
+    "less": "^3.8.0",
     "less-loader": "^4.1.0",
-    "mobx-react-devtools": "^5.0.1",
+    "mobx-react-devtools": "^6.0.1",
-    "open-browser-webpack-plugin": "0.0.5",
     "required-loader": "^1.3.16",
     "shader-loader": "^1.3.1",
     "source-map-loader": "^0.2.3",
-    "style-loader": "^0.20.3",
+    "style-loader": "^0.21.0",
-    "ts-jest": "^22.4.2",
+    "ts-jest": "^23.0.1",
-    "ts-node": "^5.0.1",
+    "ts-loader": "^4.4.2",
-    "typed-css-modules": "^0.3.1",
+    "ts-node": "^7.0.0",
-    "typescript": "^2.8.1",
+    "typed-css-modules": "^0.3.5",
-    "typings": "^2.1.1",
+    "typescript": "^3.1.0-dev.20180724",
-    "typings-for-css-modules-loader": "^1.7.0",
     "url-loader": "^1.0.1",
     "wallaby-webpack": "^3.9.10",
-    "webpack": "^3.10.0",
+    "webpack": "^4.16.2",
-    "webpack-dev-server": "^2.11.1"
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.5",
+    "webpack-merge": "^4.1.3"
   },
   "dependencies": {
     "@blueprintjs/core": "^3.0.1",
     "blueimp-md5": "^2.10.0",
     "css-element-queries": "^1.0.2",
-    "dat.gui": "^0.7.1",
+    "dat.gui": "^0.7.2",
     "golden-layout": "^1.5.9",
-    "mobx": "^4.1.1",
+    "mobx": "^5.0.3",
     "mobx-react": "^5.2.3",
     "react": "^16.4.1",
     "react-addons-css-transition-group": "^15.6.2",
-    "react-color": "^2.14.0",
+    "react-color": "^2.14.1",
     "react-dom": "^16.4.1",
     "stats.js": "^0.17.0",
     "three": "^0.94.0",

src/Add-on/loadfbx.ts

@@ -20,7 +20,7 @@ export class Fbx implements Command
                 console.log(ev);
                 let manager = new THREE.LoadingManager();
                 let loader = new THREE.FBXLoader(manager);
-                let obj = loader.parse(reader.result, "");
+                let obj = loader.parse(reader.result as string, "");
 
                 obj.scale.set(0.01, 0.01, 0.01);
                 obj.matrixWorldNeedsUpdate = true;

src/Common/MD5.ts

@@ -9,7 +9,7 @@ export function blobMd5(blob: Blob): Promise<string>
         let fr = new FileReader();
         fr.onload = e =>
         {
-            res(md5(fr.result));
+            res(md5(fr.result as string));
         }
         fr.onerror = e =>
         {

tsconfig.json

@@ -7,6 +7,7 @@
         "target": "esnext",
         "noLib": false,
         "moduleResolution": "node",
+        "skipLibCheck": true,
         "lib": [
             "esnext",
             "dom"
@@ -14,13 +15,15 @@
         "types": [
             "node",
             "jquery",
-            "webpack-env"
+            "webpack-env",
+            "webpack-dev-server"
         ],
         "jsx": "react",
         "experimentalDecorators": true
     },
     "include": [
         "./src/**/*",
+        "./config/**/*",
         "./textures/**/*"
     ]
 }

typings.json

@@ -1,5 +0,0 @@
-{
-  "globalDependencies": {
-
-  }
-}

utils/copy_type.js

@@ -59,23 +59,13 @@ function copyFolderRecursiveSync(source, target)
     }
 }
 
-let filePath = "./@types/";
+// let filePath = "./@types/";
-let modules_path = "./node_modules/";
+// let modules_path = "./node_modules/";
 
-copyFolderRecursiveSync(filePath, modules_path);
+// copyFolderRecursiveSync(filePath, modules_path);
 
-let downFiles =
+function downloadTypes(downFiles)
 {
-    name: "three",
-    urlPath: "https://raw.githubusercontent.com/FishOrBear/DefinitelyTyped/master/types/three/",
-    files: [
-        // "index.d.ts",
-        "three-core.d.ts",
-        // "three-outlinepass.d.ts",
-        // "three-smaapass.d.ts"
-    ]
-}
-
     filePath = path.resolve("./node_modules/@types/" + downFiles.name) + "\\";
     console.log('filePath: ', filePath);
     for (let file of downFiles.files) {
@@ -87,3 +77,28 @@ for (let file of downFiles.files) {
         }
     }
 
+}
+
+downloadTypes(
+    {
+        name: "three",
+        urlPath: "https://gitee.com/BearCAD/DefinitelyType2/raw/master/three/",
+        files: [
+            // "index.d.ts",
+            "three-core.d.ts",
+            // "three-outlinepass.d.ts",
+            // "three-smaapass.d.ts"
+        ]
+    }
+);
+
+
+downloadTypes(
+    {
+        name: "jquery",
+        urlPath: "https://gitee.com/BearCAD/DefinitelyType2/raw/master/jquery/",
+        files: [
+            "index.d.ts"
+        ]
+    }
+);