我正试着从Gulp转到Webpack。在Gulp中，我有一个任务，它将所有文件和文件夹从/static/文件夹复制到/build/文件夹。如何用Webpack做同样的事情?我需要一些插件吗?
当前回答
最有可能的是，你应该使用CopyWebpackPlugin，这是在kevlened回答中提到的。另外，对于某些类型的文件，如.html或.json，你也可以使用raw-loader或json-loader。通过npm Install -D raw-loader安装它，然后你只需要在webpack.config.js文件中添加另一个加载器。
如:
{
test: /\.html/,
loader: 'raw'
}
注意:重启webpack-dev-server以使任何配置更改生效。
现在你可以要求html文件使用相对路径，这使得它更容易移动文件夹。
template: require('./nav.html')
其他回答
如果你想复制静态文件，你可以这样使用文件加载器:
对于HTML文件:
在webpack.config.js中:
module.exports = {
...
module: {
loaders: [
{ test: /\.(html)$/,
loader: "file?name=[path][name].[ext]&context=./app/static"
}
]
}
};
在js文件中:
require.context("./static/", true, /^\.\/.*\.html/);
./static/相对于js文件的位置。
你可以对图像或其他东西做同样的事情。 语境是一种强大的探索方法!!
webpack配置文件(在webpack 2中)允许你导出承诺链，只要最后一步返回一个webpack配置对象。参见承诺配置文档。从这里开始:
webpack现在支持从配置文件中返回Promise。这允许在配置文件中进行异步处理。
你可以创建一个简单的递归复制函数来复制你的文件，并且只在触发webpack之后。例如:
module.exports = function(){
return copyTheFiles( inpath, outpath).then( result => {
return { entry: "..." } // Etc etc
} )
}
我也被困在这里了。Copy-webpack-plugin对我有用。
然而，'copy-webpack-plugin'在我的情况下是不必要的(我后来才知道)。
Webpack忽略根路径 例子
<img src="/images/logo.png'>
因此，在不使用copy-webpack-plugin的情况下实现此功能 在路径中使用“~”
<img src="~images/logo.png'>
'~'告诉webpack将'images'视为一个模块
注意: 您可能必须在中添加images目录的父目录
resolve: {
modules: [
'parent-directory of images',
'node_modules'
]
}
访问https://vuejs-templates.github.io/webpack/static.html
最有可能的是，你应该使用CopyWebpackPlugin，这是在kevlened回答中提到的。另外，对于某些类型的文件，如.html或.json，你也可以使用raw-loader或json-loader。通过npm Install -D raw-loader安装它，然后你只需要在webpack.config.js文件中添加另一个加载器。
如:
{
test: /\.html/,
loader: 'raw'
}
注意:重启webpack-dev-server以使任何配置更改生效。
现在你可以要求html文件使用相对路径，这使得它更容易移动文件夹。
template: require('./nav.html')
使用文件加载器模块要求资产是webpack的使用方式(源代码)。然而，如果你需要更大的灵活性或想要一个更干净的界面，你也可以直接使用我的copy-webpack-plugin (npm, Github)复制静态文件。对于静态构建示例:
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
context: path.join(__dirname, 'your-app'),
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: 'static' }
]
})
]
};
兼容性注意:如果你使用的是旧版本的webpack，比如webpack@4.x.x，请使用copy-webpack-plugin@6.x.x。否则使用最新的。
