WebCAD/webpack.config.ts

import * as path from 'path';
import * as webpack from 'webpack';
import * as HtmlWebPackPlugin from "html-webpack-plugin";
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: {
        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'),
            "three-FBXLoader": getpath("./src/Loader/FBXLoader.js"),
            "three-CopyShader": getpath("./node_modules/three/examples/js/shaders/CopyShader.js"),
            "three-SMAAShader": getpath("./node_modules/three/examples/js/shaders/SMAAShader.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"),
        },
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", "json"]
    },

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "awesome-typescript-loader"
            },
            {
                test: /\.[(png)|(obj)|(json)]$/,
                loader: "file-loader"
            },
            //样式加载 css
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            //样式加载 less
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                },
                {
                    loader: "css-loader"
                },
                {
                    loader: "less-loader",
                    options: {
                        strictMath: true,
                        noIeCompat: true
                    }
                }
                ]
            },
            //字体加载 blueprint
            {
                test: /\.(ttf|eot|svg)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'fonts/[hash].[ext]'
                    }
                }
            },
            //字体加载 blueprint
            {
                test: /\.(woff|woff2|jpg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: 'fonts/[hash].[ext]',
                        limit: 5000,
                        mimetype: 'application/font-woff'
                    }
                }
            },
            {
                test: /\.(glsl|vs|fs)$/,
                loader: 'shader-loader'
            }
        ]
    },
    externals: {
        "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'
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DllReferencePlugin({
            context: '.',
            manifest: require(getpath("./manifest.json"))
        }),
        new AddAssetHtmlPlugin(
            [
                {
                    filepath: "./node_modules/normalize.css/normalize.css",
                    typeOfAsset: "css",
                    includeSourcemap: false
                },
                {
                    filepath: "./node_modules/@blueprintjs/core/lib/css/blueprint.css",
                    typeOfAsset: "css",
                    includeSourcemap: false
                },
                { filepath: "./dist/dll.js" },
                { 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()
    ]
};

export default config;