Question

当我使用webpack的生产模式时发生了Uncaught TypeError，但在webpack的开发模式下效果很好。

使用Webpack将前端代码编译成静态资源后，我将这些资源提供给具有3002端口的nodejs服务器。现在，当我使用开发模式资源访问http://localhost:3002/simple时，我可以得到正确的响应，但是生产模式资源却出错了。当我使用webpack的生产模式时发生“未捕获的TypeError”，但是当我使用webpack的开发模式生成静态资源时，它可以很好地工作。两种模式都使用相同的webpack.config.js。

webpack在生产模式下的构建结果：

 ℹ ｢atl｣: Using typescript@3.5.3 from typescript
    ℹ ｢atl｣: Using tsconfig.json from /Users/liuchangyu/workspace/yid0708/src/web/tsconfig.json
    ℹ ｢atl｣: Checking started in a separate process...
    ℹ ｢atl｣: Time: 2710ms
    Hash: b5a201513cf282946d8c
    Version: webpack 4.35.3
    Time: 26364ms
    Built at: 2019-07-17 6:43:43 PM
                               Asset       Size  Chunks             Chunk Names
     scripts/common.b5a20.bundles.js   10.8 KiB       0  [emitted]  common
      scripts/index.b5a20.bundles.js   74 bytes       1  [emitted]  index
    scripts/runtime.b5a20.bundles.js   2.19 KiB       2  [emitted]  runtime
     scripts/simple.b5a20.bundles.js  187 bytes       3  [emitted]  simple
     scripts/vendor.b5a20.bundles.js    117 KiB       4  [emitted]  vendor
                    views/index.html  678 bytes          [emitted]  
    Entrypoint index = scripts/runtime.b5a20.bundles.js scripts/vendor.b5a20.bundles.js scripts/common.b5a20.bundles.js scripts/index.b5a20.bundles.js
     [5] ./node_modules/_react-router@5.0.1@react-router/esm/react-router.js + 1 modules 27.7 KiB {4} [built]
         |    2 modules
    [13] (webpack)/buildin/global.js 472 bytes {0} [built]
    [26] ./index.tsx + 2 modules 1.64 KiB {0} [built]
         | ./index.tsx 661 bytes [built]
         | ./pages/App.tsx 237 bytes [built]
         | ./routes/index.tsx 761 bytes [built]
        + 27 hidden modules
    Child html-webpack-plugin for "views/index.html":
         1 asset
        Entrypoint undefined = views/index.html
        [0] ./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./templates/template.html 596 bytes {0} [built]
        [2] (webpack)/buildin/global.js 472 bytes {0} [built]
        [3] (webpack)/buildin/module.js 497 bytes {0} [built]
            + 1 hidden module

并处于开发模式：

    ℹ ｢atl｣: Using typescript@3.5.3 from typescript
    ℹ ｢atl｣: Using tsconfig.json from /Users/liuchangyu/workspace/yid0708/src/web/tsconfig.json
    ℹ ｢atl｣: Checking started in a separate process...
    ℹ ｢atl｣: Time: 2733ms
    Hash: a7dc899dea7d21139095
    Version: webpack 4.35.3
    Time: 26759ms
    Built at: 2019-07-17 6:37:49 PM
                               Asset       Size   Chunks             Chunk Names
     scripts/common.a7dc8.bundles.js    129 KiB   common  [emitted]  common
      scripts/index.a7dc8.bundles.js  123 bytes    index  [emitted]  index
    scripts/runtime.a7dc8.bundles.js   8.92 KiB  runtime  [emitted]  runtime
     scripts/simple.a7dc8.bundles.js  990 bytes   simple  [emitted]  simple
     scripts/vendor.a7dc8.bundles.js    926 KiB   vendor  [emitted]  vendor
                    views/index.html  678 bytes           [emitted]  
    Entrypoint index = scripts/runtime.a7dc8.bundles.js scripts/vendor.a7dc8.bundles.js scripts/common.a7dc8.bundles.js scripts/index.a7dc8.bundles.js
    [./index.tsx] 661 bytes {common} [built]
    [./node_modules/_webpack@4.35.3@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {common} [built]
    [./pages/App.tsx] 237 bytes {common} [built]
    [./routes/index.tsx] 761 bytes {common} [built]
        + 32 hidden modules
    Child html-webpack-plugin for "views/index.html":
         1 asset
        Entrypoint undefined = views/index.html
        [./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./templates/template.html] 596 bytes {0} [built]
        [./node_modules/_webpack@4.35.3@webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
        [./node_modules/_webpack@4.35.3@webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
            + 1 hidden module

index.tsx：

import * as React from 'react';
import * as ReactDom from "react-dom"

import App from "./pages/App";

ReactDom.render(<App/>, document.getElementById("main"));

App.tsx：

import * as React from 'react';
import Routes from "../routes";
import {BrowserRouter} from "react-router-dom"

const App = () => {
    return <BrowserRouter basename="/">{Routes()}</BrowserRouter>
};

export default App;

routes.tsx：

import * as React from 'react';

const {Suspense, lazy} = React;

import {Switch, RouteProps, Route} from "react-router-dom"

const Simple = lazy(() =>
    import(
        /* webpackChunkName:"simple" */
        '../components/Simple')
);

const routes: RouteProps[] = [
    {
        path: "/simple",
        exact: true,
        component: Simple
    },
];

const Routes = () => (
    <Suspense fallback={<i>loading...</i>}>
        <Switch>
            {
                routes.map(r => {
                    const {path, exact, component} = r;
                    return (
                        <Route key={"23123"} exact={exact} path={path}  component={component}/>
                    )
                })
            }
        </Switch>
    </Suspense>
);

export default Routes;

Simple.tsx：

import * as React from 'react';

const Simple = () => {
    return <div>Simple Component</div>

};

export default Simple;

浏览器的错误日志为：

runtime.b5a20.bundles.js：1未捕获的TypeError：无法读取属性未定义的“呼叫” 在我（runtime.b5a20.bundles.js：1）在对象。（vendor.b5a20.bundles.js：1）在我（runtime.b5a20.bundles.js：1）在模块。（common.b5a20.bundles.js：15）在我（runtime.b5a20.bundles.js：1）在t（runtime.b5a20.bundles.js：1）在Array.r上[按推送]（runtime.b5a20.bundles.js：1）在index.b5a20.bundles.js：1 我@ runtime.b5a20.bundles.js：1 （匿名）@ vendor.b5a20.bundles.js：1 我@ runtime.b5a20.bundles.js：1 （匿名）@ common.b5a20.bundles.js：15 我@ runtime.b5a20.bundles.js：1 t @ runtime.b5a20.bundles.js：1 r @ runtime.b5a20.bundles.js：1 （匿名）@ index.b5a20.bundles.js：1

react 或 react-router 似乎有些问题？因为当我将BrowserRouter更改为简单的div时它可以很好地工作。

Answer 1

今天我找到了原因，我使用webpack-deep-scope-plugin来摇树，因为optimization.usedExports是在production模式下启用的，否则是禁用的。他们发生了冲突！这将起作用：

module.exports = {
  //...
  optimization: {
    usedExports: false
  }
};

我建议不再使用webpack-deep-scope-plugin，而只需执行webpack的默认production优化。

在Webpack生产模式下发生错误，但在开发模式下效果很好

1 个答案: