“的WebPack” VS“的WebPack --watch”创建不同的输出

Question

进出口使用此设置为我的项目的基础：https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

当我运行webpack，它编译，在浏览器中工作的包。

当我运行webpack --watch，它重新编译的文件的变化，而导致这个错误在浏览器：

Uncaught ReferenceError: exports is not defined

我看了一下两者的输出，它看起来像webpack --watch不包括webpack引导程序代码或我的模块 - 只有输入文件transpiled。

webpack

• 包括我所有的模块在一个文件中，使用webpacks自己的模块需要一起。
• E.g：var io = __webpack_require__(20);

webpack --watch

• 只有包括我的输入模块 - 没有其他的模块，没有__webpack_require__。
• E.g. var io = require("socket.io-client");

版本： - 的WebPack：3.7.1 - TSC：1.8.10

module.exports = { 
entry: "./src/index.tsx", 
output: { 
    filename: "bundle.js", 
    path: __dirname + "/dist" 
}, 

// Enable sourcemaps for debugging webpack's output. 
devtool: "source-map", 

resolve: { 
    // Add '.ts' and '.tsx' as resolvable extensions. 
    extensions: [".ts", ".tsx", ".js", ".json"] 
}, 

module: { 
    rules: [ 
     // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. 
     { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, 

     // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 
     { enforce: "pre", test: /\.js$/, loader: "source-map-loader" } 
    ] 
}, 

// When importing a module whose path matches one of the following, just 
// assume a corresponding global variable exists and use that instead. 
// This is important because it allows us to avoid bundling all of our 
// dependencies, which allows browsers to cache those libraries between builds. 
externals: { 
    "react": "React", 
    "react-dom": "ReactDOM" 
} 

Answer 1

的解决方法是删除outDir从tsconfig.json：

{ 
    "compilerOptions": { 
     "outDir": "./dist/" 
} 
} 

这是tsconfig .json文件具有冲突的输出目录。使用webpack --watch

时文件只能用打字机书写