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"), "zlib": getpath("./node_modules/three/examples/js/libs/inflate.min.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' } ] }, // 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: getpath("./dist/dll.js") }), // new ExtractTextPlugin({ filename: 'styles.css' }), new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", ReactDOM: 'react-dom', React: 'react', THREE: "three", Zlib: "zlib" }), new webpack.optimize.ModuleConcatenationPlugin() ] }; export default config;