javascript - 无法将我的 webpack 配置映射到 snowpack

Question

因此，我有一个当前与 webpack 捆绑的 react 应用程序，我正在尝试过渡到 snowpack。

我有一个带有 snowpack 和 css 模块的 POC react 应用程序，并且在我的实际应用程序中技术上运行了 snowpack，但它并没有真正起作用。我认为问题是我需要根据 webpack 设置的细微差别发布到自定义位置，但我不知道如何集成它们。想知道是否有人有任何见解或资源可以帮助我将 webpack 配置设置映射到雪包？

这是雪包配置。目前没有什么值得注意的：

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
    mount: {
        public: {url: '/', static: true},
        src: {url: '/dist'},
    },
    plugins: ['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv', "@snowpack/plugin-sass", "@snowpack/plugin-postcss"],
    routes: [
    /* Enable an SPA Fallback in development: */
    // {"match": "routes", "src": ".*", "dest": "/index.html"},
    ],
    optimize: {
    /* Example: Bundle your final build: */
    // "bundle": true,
    },
    packageOptions: {
    /* ... */
    },
    devOptions: {
    /* ... */
    },
    buildOptions: {
    /* ... */
    },
};

我在运行 react 应用程序时得到的结果：

[22:44:06] [snowpack] config.mount[C:\devops\repos\platform\Server\WebPortal\public]: mounted directory does not exist.
[22:44:11] [snowpack] Ready!
[22:44:11] [snowpack] Server started in 35ms.
[22:44:11] [snowpack] Local: http://localhost:8080
[22:44:11] [snowpack] Network: http://10.36.54.106:8080
[22:44:12] [snowpack] [404] Not Found (/)

下面的 webpack 配置有一些细微差别供参考。

const webpack = require("webpack");
const Merge = require("webpack-merge");
const MyConfig = require("./webpack.myconfig.js");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = Merge(MyConfig , {
    mode: "development",

    devtool: "source-map",

    // entry: [
    //     'eventsource-polyfill', // necessary for hot reloading with IE
    //     'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
    // ],

    module: {
        rules: [
            {
                test: /\.(sa|s?c)ss$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    { 
                        loader: 'css-loader',
                        options: { sourceMap: true, modules: true } 
                    },
                    { loader: "sass-loader", options: { sourceMap: true } }
                ]
            }
        ]
    },

    plugins: ([
        new webpack.DefinePlugin({
            "process.env": {
                "NODE_ENV": JSON.stringify("development")
            }
        }),
    ]),
});

const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    target: "web",

    resolve: {
        // Add ".ts" and ".tsx" as resolvable extensions.
        extensions: [".js", ".jsx", ".ts", ".tsx", ".json", ".html"],
        alias: {
            "jquery-ui": "jquery-ui/jquery-ui.js",
            modules: path.join(__dirname, "node_modules"),
            react: path.resolve("./node_modules/react")
        }
    },

    entry: {
        comp1: "./src/components/specialcomps/comp1.jsx",
        comp2: "./src/components/specialcomps/comp2.jsx",
        reactMounter: "./src/util/reactMounter.jsx",
        polyfills: "./src/polyfills.js",
        Page: "./src/components/Page/PageBuilder.jsx"
    },

    output: {
        filename: "[name].bundle.js",
        path: __dirname + "/dist",
        publicPath: "/",
        library: "[name]"
    },

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                include: path.join(__dirname, 'src'),
                loader: 'babel-loader',
                query: { presets: ['@babel/preset-react', '@babel/preset-env'] }
            },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
            { test: /\.(woff|woff2)$/, loader: "url?prefix=font/&limit=5000" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
        ]
    },

    plugins: ([
        // make sure we allow any jquery usages outside of our webpack modules
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[name].css',
            ignoreOrder: true
        }),
    ]),

    stats: {
        children: false,
        colors: true
    },
};