webglToy/vue.config.js

/*
 * @Author: your name
 * @Date: 2020-09-10 18:52:15
 * @LastEditTime: 2021-04-04 17:48:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /getCoinsEveryday/vue.config.js
 */
const path = require('path');
// const myTools = require('./webpack.plugins.js');
const CompressionPlugin = require('compression-webpack-plugin');
const vConsolePlugin = require("vconsole-webpack-plugin");
const TinyimgPlugin = require("tinyimg-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    publicPath: './',
    outputDir: 'dist',
    assetsDir: 'static',
    lintOnSave: false,
    productionSourceMap: false,
    pages: {
        index: {
            // page 的入口
            entry: 'src/page/index/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'WebGLToy'
        }
    },
    chainWebpack: config => {
        // development模式时打包也带有 hash 值
        config.output.filename('static/js/[name].[hash].js').chunkFilename('static/js/[name].[hash].js').end()

        config.resolve.alias
            .set("@", resolve("src"))
            .set("weui", resolve("src/utils/plugins/weui.js"))
        // .set("assets", resolve("src/assets"))
        // .set("components", resolve("src/components"))
        // .set("views", resolve("src/views"))
        // .set("base", resolve("baseConfig"))
        // .set("public", resolve("public"));

        // if (process.env.NODE_ENV !== "test") {
        config.module.rule('compile')
            .test(/\.js$/)
            .include
            .add(resolve('src'))
            .add(resolve('node_modules'))
            .end()
            .use('babel')
            .loader('babel-loader')
            .options({
                presets: [
                    ['@babel/preset-env', {
                        modules: false
                    }]
                ]
            });
        // }

    },
    configureWebpack: config => {
        // 配置vconsole
        const debug = process.env.NODE_ENV !== "production";
        let pluginsDev = [
            new vConsolePlugin({
                filter: [],
                enable: debug,
            }),
        ];

        // 配置 tinyimg
        let tinyimg = [new TinyimgPlugin({
            enabled: process.env.NODE_ENV === "production",
            logged: true
        })]

        // 配置 copy plguins
        let copyImg = [
            new CopyWebpackPlugin([
                // This is required so that yoha can load model files etc.
                { from: 'node_modules/@handtracking.io/yoha/', to: 'yoha/' },
                // Required for github pages...
                { from: 'node_modules/coi-serviceworker/coi-serviceworker.min.js', to: './' },
            ])
        ]






        config.plugins = [...config.plugins,
        ...pluginsDev,
        ...tinyimg,
        ...copyImg,
        ];

        config.module.rules.push(
            // ts加载
            // {
            //     test: /\.tsx?$/,
            //     use: [
            //         {
            //             loader: 'ts-loader',
            //             options: {
            //                 transpileOnly: true,
            //                 appendTsSuffixTo: [/\.vue$/],
            //                 happyPackMode: true // 这个改为true
            //             }
            //         }
            //     ]
            // },
            //wasm加载
            {
                test: /\.wasm$/i,
                use: [
                    {
                        loader: 'file-loader', // 解决wasm加载问题
                        options: {
                            name: './static/wasm/[name].[ext]'
                        }
                    }
                ]
            },
            //模型加载
            {
                test: /\.(stl|obj|fbx|mtl|glb|gltf)?$/,
                use: [
                    {
                        loader: 'file-loader', // 解决glsl 加载问题
                        options: {
                            name: './static/model/[name].[ext]'
                        }
                    }
                ]
            }, {
            test: /\.glsl$/,
            use: [{
                loader: 'webpack-glsl-loader', // 解决glsl 加载问题
            }]
        })

        // 配置gzip压缩
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, // 匹配文件名
                    threshold: 10240, //对超过10K的数据进行压缩
                    deleteOriginalAssets: false // 是否删除源文件
                })]
            }
        }
    },
    // 配置插件
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                path.resolve(__dirname, './src/assets/css/global.less')
            ]
        },
    },
}