Question

我正在尝试为一位朋友部署此Svelte应用程序。但是每次我尝试在终端上运行“ npm run build”时，我不断收到关于我的捆绑包超出建议限制（244 KiB）的警告/错误。

我已经尝试将其添加到我的webpack.config.js

performance: {
   hints: process.env.NODE_ENV === 'production' ? "warning" : false

   //hints:  false // and also try this
}

没有任何一项措施仍然无法获得超出警告的水平。

main.js

import App from './App.svelte';
import NavBar from './comp/Navbar.svelte';

//Import Materialize from node_modules folder -> npm install materialize-css@next
import '../node_modules/materialize-css/dist/css/materialize.min.css';
import '../node_modules/materialize-css/dist/js/materialize.min.js';

NavBar.svelte


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });
</script>

<style>
.brand-logo {
    padding-left: 12px !important;
}

a:visited {
    color: white;

}
</style>

  <nav class="nav-extended grey darken-4 z-depth-3">
    <div class="nav-wrapper">
      <a href="/" class="brand-logo">Shaquille</a>
      <a href="#!" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Bio</a></li>
        <li><a href="badges.html">Gallery</a></li>
        <li><a href="collapsible.html">Listen</a></li>
        <li><a href="collapsible.html">Contact</a></li>
      </ul>
    </div>
  </nav>

  <ul class="sidenav" id="mobile-demo">
     <li><a href="sass.html">Bio</a></li>
     <li><a href="badges.html">Gallery</a></li>
     <li><a href="collapsible.html">Listen</a></li>
     <li><a href="collapsible.html">Contact</a></li>
  </ul>

我觉得很奇怪的是，这个NavBar.svelte.css是从哪里来的？我查看了整个目录，但找不到它。

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  bundle (319 KiB)
      bundle.css
      bundle.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/materialize-css/dist/css/materialize.min.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules

Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!src/comp/Navbar.svelte.css:
    Entrypoint mini-css-extract-plugin = *
    [0] ./node_modules/css-loader/dist/cjs.js!./src/comp/Navbar.svelte.css 233 bytes {0} [built]
        + 1 hidden module

webpack.config.js

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


const mode = process.env.NODE_ENV || 'development';
const prod = mode === 'production';

module.exports = {
    entry: {
        bundle: ['./src/main.js']
    },
    resolve: {
        alias: {
            svelte: path.resolve('node_modules', 'svelte')
        },
        extensions: ['.mjs', '.js', '.svelte'],
        mainFields: ['svelte', 'browser', 'module', 'main']
    },
    output: {
        path: __dirname + '/public',
        filename: '[name].js',
        chunkFilename: '[name].[id].js'
    },
    //  performance: {
    //  hints: process.env.NODE_ENV === 'production' ? "warning" : false //i try this too
    // hints:  false // and also try this
    // },
    module: {
        rules: [
            {
                test: /\.svelte$/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        emitCss: true,
                        hotReload: true
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    /**
                     * MiniCssExtractPlugin doesn't support HMR.
                     * For developing, use 'style-loader' instead.
                     * */
                    prod ? MiniCssExtractPlugin.loader : 'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    mode,
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],
    devtool: prod ? false: 'source-map'
};

我在这里做错了什么？

尝试使用webpack4构建一个苗条的应用程序

0 个答案: