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

编程问答 2022-05-01

问题描述

所以我有一个目前与 webpack 捆绑在一起的 React 应用程序，我正在尝试过渡到 sNowpack。

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

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

/** @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
    },};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptreactjsreactjsreactjsreactjssnowpackwebpackwebpackwebpack