如何防止webpack在源目录中生成编译文件

Question

我正在将我的AngularJs项目从ES6"迁移"到TypeScript,而我正在使用webpack ts-loader.

问题是编译的文件和源映射是在我的文件夹中写的,而不是像使用时从内存中提供的bundle.js文件webpack-dev-server.

而不是index.ts在我的目录中我最终得到:

.
??? index.js
??? index.js.map
??? index.ts

可以这样做吗？

我的tsconfig.json是:

{
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "module": "commonjs"
  },
  "exclude": [
    "node_modules",
    "src/dist"
  ],
  "version": "1.6.2"
}

和webpack.config.js是:

module.exports = {
  context: PATHS.app,
  entry: {
    app: ['./index.ts']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },

  // add resolve clause:root

  module: {
    loaders: [
    { test: /\.ts$/, exclude: /node_modeuls/, loader: 'babel-loader!ts-loader' },
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
    { test: /\.less$/, loader: "style!css!less", exclude: /node_modules/ },
    { test: /\.html$/, loader: "html" },
    { test: /\.(ttf|eot|svg|otf)$/, loader: "file" },
    { test: /\.woff(2)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
    { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/, loader: require.resolve("file-loader") + "?name=../[path][name].[ext]"}
  ]
  },

  devServer: {
    contentBase: "./src"
  },

  devtool: '#inline-source-map'

}

Answer 1

webpack我觉得这个但是tsc和IDE没有关系。

您的源代码可能是由 IDE 自动编译的，默认情况下编译结果放置在源文件旁边。

您可以尝试在IDE中禁用自动编译。大多数 IDE 都能识别compileOnSave选项。将其设置为 falsetsconfig.json就可以了。

例子tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "module": "commonjs",
    "compileOnSave": false
  },
  "exclude": [
    "node_modules",
    "src/dist"
  ],
  "version": "1.6.2"
}

您还可以尝试通过outDir在tsconfig.json.

你的例子tsconfig.json可能看起来像

{
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "module": "commonjs",
    "outDir": "compiled"
  },
  "exclude": [
    "node_modules",
    "src/dist"
  ],
  "version": "1.6.2"
}

现在所有的编译结果都将被放置在compiled很容易被忽略的目录中。