Webpack.config如何将index.html复制到dist文件夹
Webpack.config如何将index.html复制到dist文件夹
提问于 2015-08-22 18:39:27
我正在尝试将资产自动化到/dist中。我有以下config.js：
module.exports = {
context: __dirname + "/lib",
entry: {
main: [
"./baa.ts"
]
},
output: {
path: __dirname + "/dist",
filename: "foo.js"
},
devtool: "source-map",
module: {
loaders: [
{
test: /\.ts$/,
loader: 'awesome-typescript-loader'
},
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
resolve: {
// you can now require('file') instead of require('file.js')
extensions: ['', '.js', '.json']
}
}我还想在运行webpack时，将/lib旁边目录中的main.html包含到/dist文件夹中。我该怎么做呢？
更新1 2017_____________
我现在最喜欢的方法是使用带有模板文件的html-webpack-plugin。也要感谢大家接受的答案！这种方式的优点是索引文件也会有现成的cachbusted js链接！
回答 5
Stack Overflow用户
发布于 2017-01-22 02:17:01
你可以使用CopyWebpackPlugin。它是这样工作的：
module.exports = {
plugins: [
new CopyWebpackPlugin([{
from: './*.html'
}])
]
}Stack Overflow用户
发布于 2015-08-22 18:48:47
我会说答案是:你不能。(或者至少:你不应该)。这不是Webpack应该做的事情。Webpack是一个捆绑器，它不应该用于其他任务(在这种情况下:复制静态文件是另一个任务)。您应该使用像Grunt或Gulp这样的工具来完成这些任务。集成Webpack as a Grunt task或作为Gulp task是很常见的。它们都有其他任务可用于复制您所描述的文件，例如grunt-contrib-copy或gulp-copy。
对于其他资产(不是index.html)，您可以将其与Webpack捆绑在一起(这正是Webpack的用途)。例如，var image = require('assets/my_image.png');。但是我假设你的index.html不需要是捆绑包的一部分，因此它不是捆绑包的一部分。
Stack Overflow用户
发布于 2017-12-07 01:19:32
您可以直接将索引添加到条目配置中，并使用文件加载器加载它
module.exports = {
entry: [
__dirname + "/index.html",
.. other js files here
],
module: {
rules: [
{
test: /\.html/,
loader: 'file-loader?name=[name].[ext]',
},
.. other loaders
]
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32155154
复制相关文章
相似问题