我正在尝试从 移动Gulp到Webpack。在Gulp我的任务中，将所有文件和文件夹从/static/文件夹复制到/build/文件夹。如何做同样的事情Webpack？我需要一些插件吗？
如何使用 Webpack 将静态文件复制到构建目录？
IT技术
javascript
webpack
2021-02-08 18:17:38
6个回答
使用 file-loader module要求资源是 webpack 的使用方式（source）。但是，如果您需要更大的灵活性或想要更简洁的界面，您也可以直接使用我的copy-webpack-plugin（npm、Github）复制静态文件。为了您static到build例如：
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. 否则使用最新的。
你不需要复制东西，webpack 的工作方式与 gulp 不同。Webpack 是一个module捆绑器，您在文件中引用的所有内容都将包含在内。您只需要为此指定一个加载程序。
所以如果你写：
var myImage = require("./static/myImage.jpg");
Webpack 将首先尝试将引用的文件解析为 JavaScript（因为这是默认设置）。当然，那会失败。这就是您需要为该文件类型指定加载器的原因。例如，文件- 或url-loader获取引用的文件，将其放入 webpack 的输出文件夹（build在您的情况下应该是这样）并返回该文件的散列 url。
var myImage = require("./static/myImage.jpg");
console.log(myImage); // '/build/12as7f9asfasgasg.jpg'
通常加载器是通过 webpack 配置应用的：
// webpack.config.js
module.exports = {
...
module: {
loaders: [
{ test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file" }
]
}
};
当然，您需要先安装文件加载器才能完成这项工作。
如果你想复制你的静态文件，你可以这样使用文件加载器：
对于 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 文件所在的位置。
你可以对图像或其他任何东西做同样的事情。上下文是一种强大的探索方法！！
前面提到的copy-webpack-plugin带来的一个之前没有解释过的优点是这里提到的所有其他方法仍然将资源捆绑到你的捆绑文件中（并要求你在某处“要求”或“导入”它们）。如果我只想移动一些图像或一些模板部分，我不想用对它们的无用引用来弄乱我的 javascript 包文件，我只想要在正确的位置发出文件。我还没有在 webpack 中找到任何其他方法来做到这一点。诚然，这不是 webpack 最初的设计目的，但它绝对是当前的用例。（@BreakDS 我希望这能回答您的问题-如果您愿意，这只是一个好处）
以上建议都不错。但是要尝试直接回答您的问题，我建议cpy-cli在您的package.json.
这个例子期望node在你的路径上的某个地方。安装cpy-cli为开发依赖项：
npm install --save-dev cpy-cli
然后创建几个 nodejs 文件。一个进行复制，另一个显示复选标记和消息。
复制.js
#!/usr/bin/env node
var shelljs = require('shelljs');
var addCheckMark = require('./helpers/checkmark');
var path = require('path');
var cpy = path.join(__dirname, '../node_modules/cpy-cli/cli.js');
shelljs.exec(cpy + ' /static/* /build/', addCheckMark.bind(null, callback));
function callback() {
process.stdout.write(' Copied /static/* to the /build/ directory\n\n');
}
复选标记.js
var chalk = require('chalk');
/**
* Adds mark check symbol
*/
function addCheckMark(callback) {
process.stdout.write(chalk.green(' ✓'));
callback();
}
module.exports = addCheckMark;
将脚本添加到package.json. 假设脚本在<project-root>/scripts/
...
"scripts": {
"copy": "node scripts/copy.js",
...
运行脚本：
npm run copy