如何防止webpack在源代碼目錄中生成編譯文件

我正在將我的AngularJs項目從ES6「遷移」到TypeScript，並且我使用的是帶有ts-loader的webpack。如何防止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' 

}

來源

2015-10-30 Shikloshi

你能解決這個問題嗎？ – GPicazo

@ GPicazo還沒有，現在我只是將這些文件添加到.gitignore。 – Shikloshi

是的，我也是這樣做的，但IDE仍然看起來很混亂。 – GPicazo

我認爲這是不相關的webpack但tsc和IDE。

可能您的源代碼是由IDE自動編譯的，默認情況下，編譯結果放在源文件旁邊。

您可以嘗試在IDE中禁用自動編譯。大多數IDE都會識別compileOnSave選項。在tsconfig.json中將它設置爲false，你應該沒問題。

例tsconfig.json

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

您也可以嘗試通過在tsconfig.json定義outDir要解決。

你的榜樣tsconfig.json可能看起來像

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

現在所有的編譯結果將被放置在compiled目錄可以很容易地忽略。

來源

2017-05-20 07:00:00 mleko

如何防止webpack在源代碼目錄中生成編譯文件

回答

相關問題