const path = require("path"); const webpack = require('webpack'); const TerserPlugin = require("terser-webpack-plugin"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require("html-webpack-plugin"); const HappyPack = require('happypack'); const os = require('os'); const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); const common = require("./common"); const pathVars = require("./pathVars"); const pageVars = require("./pageVars"); //---------------------------------- output -----------------------------------// const packageJson = require("./../package.json"); const entryConfig = {}; let pages = pageVars.getPages(); console.log("pages", pages); pages.forEach(function (page) { entryConfig[page["chunkName"]] = page["entryJs"]; }); //---------------------------------- output -----------------------------------// let outputConfig = { path: pathVars.distPath, publicPath: "./", // 表示资源的发布地址,当配置过该属性后,打包文件中所有通过相对路径引用的资源都会被配置的路径所替换(如:css中背景图的路径) filename: "[name]/index.js", assetModuleFilename: 'images/[name]_[hash][ext][query]' //chunkFilename: '[name]/index_[hash].chunk.js' }; let pluginConfig = [ new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: [pathVars.distPath + '/*'], }), // new webpack.ProvidePlugin({ // 'THREE': require.resolve('three') // }), new MiniCssExtractPlugin({ filename: "[name]/index.css", }), new HappyPack({ id: 'babel', loaders: ["babel-loader"], threadPool: happyThreadPool }), new CopyWebpackPlugin({ patterns: [{ from: pathVars.devPath, to: pathVars.distPath }] }) ]; pages.forEach(function (page) { let htmlPlugin = new HtmlWebpackPlugin({ title: 'page1', template: page["filePath"], filename: page["htmlName"], inject: 'body', chunks: [page["chunkName"]] //chunks: ["manifest", "vendor", "common", page["chunkName"]], //chunksSortMode: 'dependency' }); pluginConfig.push(htmlPlugin); }); module.exports = { mode: 'production', entry: entryConfig, output: outputConfig, resolve: common.resolve, module: { rules: [{ test: /\.(css|less)$/, include: [pathVars.srcPath], exclude: [pathVars.nodeModulesPath], use: [{ loader: MiniCssExtractPlugin.loader, options: { /* 解决css背景图路径问题 由于图片目录已经定好了,因此这里可以用固定的相对路径*/ publicPath: '../' }, }, //"css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]", "css-loader", "less-loader" ], }, { test: /\.tpl$/i, use: [{ loader: 'raw-loader', options: { esModule: false, }, }] }, { test: /\.js$/, exclude: pathVars.nodeModulesPath, include: pathVars.srcPath, //use: ['babel-loader'], use: ["happypack/loader?id=babel"] }, { test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/, type: 'asset/resource', parser: { dataUrlCondition: { maxSize: 10 * 1024 } } //利用HappyPack打包,图片会损坏。暂时不使用 //use: ["happypack/loader?id=url"] }, { test: /\.(glsl|vs|fs|vert|frag)$/, exclude: [pathVars.nodeModulesPath, pathVars.dllPath], use: ["raw-loader", "glslify-loader"] } ] }, plugins: pluginConfig, optimization: { //minimize: true, minimizer: [ new TerserPlugin() ], usedExports: true, runtimeChunk: 'single', splitChunks: { chunks: "all", cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendor', chunks: 'all', priority: -10, reuseExistingChunk: true, }, // 其他不是node_modules中的模块 default: { name:"common", minChunks: 2, //如果有被引用不少于2次 priority: -20, reuseExistingChunk: true, } } } } };