个人中心
gpt4 book ai didi

javascript - Webpack dist : index. html 是一个空白页面

转载 作者：太空宇宙 更新时间：2023-11-04 15:51:03 25 4
gpt4 key购买 nike

我对 Webpack 还很陌生，并且关注过 this tutorial向我一直在开发的 React 应用程序添加身份验证。

在开发中一切正常，但是在尝试运行分发文件时出现空白页。

这是我的 webpack.config.js:

const NODE_ENV = process.env.NODE_ENV;
const dotenv = require('dotenv');

const webpack = require('webpack');
const fs      = require('fs');
const path    = require('path'),
      join    = path.join,
      resolve = path.resolve;

const getConfig = require('hjs-webpack');

const isDev  = NODE_ENV === 'development';
const isTest = NODE_ENV === 'test';

const root    = resolve(__dirname);
const src     = join(root, 'src');
const modules = join(root, 'node_modules');
const dest    = join(root, 'dist');

var config = getConfig({
  isDev: isDev,
  in: join(src, 'app.js'),
  out: dest,
  html: function (context) {
    return {
      'index.html': context.defaultTemplate({
        title: 'My Title',
        publicPath: isDev ? 'http://localhost:3000/' : 'http://localhost:9000/',
        meta: {
          'name': 'My name',
          'description': 'My desc'
        }
      })
    }
  }
});

// ENV variables
const dotEnvVars = dotenv.config();
const environmentEnv = dotenv.config({
  path: join(root, 'config', `${NODE_ENV}.config.js`),
  silent: true,
});
const envVariables =
    Object.assign({}, dotEnvVars, environmentEnv);

const defines =
  Object.keys(envVariables)
  .reduce((memo, key) => {
    const val = JSON.stringify(envVariables[key]);
    memo[`__${key.toUpperCase()}__`] = val;
    return memo;
  }, {
    __NODE_ENV__: JSON.stringify(NODE_ENV)
  });

config.plugins = [
  new webpack.DefinePlugin(defines)
].concat(config.plugins);
// END ENV variables

// CSS modules
const cssModulesNames = `${isDev ? '[path][name]__[local]__' : ''}[hash:base64:5]`;

const matchCssLoaders = /(^|!)(css-loader)($|!)/;

const findLoader = (loaders, match) => {
  const found = loaders.filter(l => l && l.loader && l.loader.match(match))
  return found ? found[0] : null;
}
// existing css loader
const cssloader =
  findLoader(config.module.loaders, matchCssLoaders);

const newloader = Object.assign({}, cssloader, {
  test: /\.module\.css$/,
  include: [src],
  loader: cssloader.loader.replace(matchCssLoaders, `$1$2?modules&localIdentName=${cssModulesNames}$3`)
})
config.module.loaders.push(newloader);
cssloader.test = new RegExp(`^(?!.*(module|bootstrap)).*${cssloader.test.source}`)
cssloader.loader = newloader.loader

config.module.loaders.push({
  test: /bootstrap\.css$/,
  include: [modules],
  loader: 'style-loader!css-loader'
})

// postcss
config.postcss = [].concat([
  require('precss')({}),
  require('autoprefixer')({}),
  require('cssnano')({})
])
// END postcss

// Roots
config.resolve.root = [src, modules]
config.resolve.alias = {
  'css': join(src, 'styles'),
  'containers': join(src, 'containers'),
  'components': join(src, 'components'),
  'utils': join(src, 'utils'),

  'styles': join(src, 'styles')
}
// end Roots

// Testing
if (isTest) {
  config.externals = {
    'react/addons': true,
    'react/lib/ReactContext': true,
    'react/lib/ExecutionEnvironment': true,
  }
  config.module.noParse = /[/\\]sinon\.js/;
  config.resolve.alias['sinon'] = 'sinon/pkg/sinon';

  config.plugins = config.plugins.filter(p => {
    const name = p.constructor.toString();
    const fnName = name.match(/^function (.*)\((.*\))/)

    const idx = [
      'DedupePlugin',
      'UglifyJsPlugin'
    ].indexOf(fnName[1]);
    return idx < 0;
  })
}
// End Testing

module.exports = config;

我正在使用此脚本使用 Express 提供文件:

var express = require('express')
var app = express()

var path = require('path');

app.get('*', function(req, res) {
  res.sendFile(path.resolve(__dirname, 'dist/index.html'));
});

app.listen(9000, function () {
  console.log('Example app listening on port 9000!')
})

我得到的只是一个带有以下标记的空白页:

<!doctype html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <title>My title</title>
    <link rel="stylesheet" href="http://localhost:9000/stylesheet.css"/>
  </head>
  <body>
    <div id="root"></div>
    <script src="http://localhost:9000/javascript.js"></script>
  </body>

不知道我错过了什么，似乎根本没有任何 JS 执行，而且我不知道如何调试缩小的 JS...

任何帮助或指示将不胜感激。

谢谢

最佳答案

您的 Express 服务器未配置为提供静态文件(html 除外)。在通配符路由之前添加 express.static 中间件。

关于javascript - Webpack dist : index. html 是一个空白页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43114997/

25 4 0
文章推荐： c++: std::tr1::shared_ptr 从这个
文章推荐： javascript - 更改 anchor "position"的好方法？
文章推荐： javascript - 为什么 CORS 发布请求在一种情况下有效但在另一种情况下无效
文章推荐： css - Wordpress 父/子主题未在 ie7+8 中加载 js
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com