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

发布时间：2020-12-17 07:01:13 所属栏目：安全来源：网络整理

导读：我正在将我的AngularJs项目从ES6“迁移”到TypeScript,我正在使用带有ts-loader的webpack. 问题是编译的文件和源映射是在我的文件夹中编写的,而不是像使用webpack-dev-server时从内存中提供的bundle.js文件. 而不是在我的目录中有index.ts我最终得到： .├─

我正在将我的AngularJs项目从ES6“迁移”到TypeScript,我正在使用带有ts-loader的webpack.

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

而不是在我的目录中有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'

}

解决方法

我认为这与webpack无关,而是与tsc和IDE有关.

可能您的源是由IDE自动编译的,默认情况下,编译结果放在源文件旁边.

您可以尝试在IDE中禁用自动编译.大多数IDE都识别compileOnSave选项.在tsconfig.json中将它设置为false,你应该没问题.

示例tsconfig.json

{
  "compilerOptions": {
    "target": "es6","module": "commonjs","compileOnSave": false
  },"version": "1.6.2"
}

您还可以通过在tsconfig.json中定义outDir来尝试解决方法.

您的示例tsconfig.json可能看起来像

{
  "compilerOptions": {
    "target": "es6","outDir": "compiled"
  },"version": "1.6.2"
}

现在所有编译结果都将放在编译目录中,可以轻松忽略.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!