我正在尝试从 Gulp 移动到 Webpack。在Gulp 我的任务是将所有文件和文件夹从 /static/ 文件夹复制到 /build/ 文件夹。如何对Webpack 做同样的事情？我需要一些插件吗？
【问题讨论】：
标签： javascript webpack
使用文件加载器模块要求资产是 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 是一个模块捆绑器，您在文件中引用的所有内容都将包含在内。你只需要为此指定一个加载器。
所以如果你写：
var myImage = require("./static/myImage.jpg");
Webpack 将首先尝试将引用的文件解析为 JavaScript（因为这是默认设置）。当然，那会失败。这就是您需要为该文件类型指定加载程序的原因。 file- 或 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 文件所在的位置。
您可以对图像或其他任何东西做同样的事情。 上下文是一种强大的探索方法！
【讨论】：
index.html 放入它正在创建的名为 _ 的子目录中（下划线） ，怎么回事？
main.js 正在导入static 文件夹中的所有内容：require.context("./static/", true, /^.*/);
前面提到的 copy-webpack-plugin 带来的一个之前没有解释过的优点是这里提到的所有其他方法仍然将资源捆绑到你的包文件中（并且要求你“需要”或在某处“导入”它们）。如果我只想移动一些图像或一些模板部分，我不想用对它们的无用引用来弄乱我的 javascript 包文件，我只希望在正确的位置发出文件。我还没有在 webpack 中找到任何其他方法来做到这一点。诚然，这不是 webpack 最初的设计目的，但它绝对是当前的用例。 （@BreakDS 我希望这能回答你的问题——如果你想要的话，这只是一个好处）
【讨论】：
以上建议都不错。但要尝试直接回答您的问题，我建议在您的package.json 中定义的脚本中使用cpy-cli。
这个例子期望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');
}
checkmark.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
【讨论】：
我加载静态images和fonts的方式：
module: {
rules: [
....
{
test: /\.(jpe?g|png|gif|svg)$/i,
/* Exclude fonts while working with images, e.g. .svg can be both image or font. */
exclude: path.resolve(__dirname, '../src/assets/fonts'),
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/'
}
}]
},
{
test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
/* Exclude images while working with fonts, e.g. .svg can be both image or font. */
exclude: path.resolve(__dirname, '../src/assets/images'),
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
},
}
]
}
不要忘记安装 file-loader 以使其正常工作。
【讨论】：
logo.png 的图像，也不需要创建一个钝且“希望”的唯一文件名以避免全局冲突。我们使用CSS Modules的原因相同。
[path][name].[ext] 并且提供了足够的灵活性来针对特定环境或用例进行修改...file-loader
Webpack 5 添加了Asset Modules，它本质上是普通文件加载器的替代品。我复制了以下文档的相关部分：
asset/resource发出一个单独的文件并导出 URL。以前可以通过使用file-loader来实现。asset/inline导出资产的数据 URI。以前可以通过使用url-loader来实现。asset/source导出资产的源代码。以前可以通过使用raw-loader来实现。asset自动在导出数据 URI 和发出单独文件之间进行选择。以前可以通过使用带有资产大小限制的url-loader来实现。
你可以让你的配置看起来像这样：
// webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
type: "asset/resource"
}
]
}
};
您可以使用templated paths 处理文件的复制方式。对于所有资产的默认模板，您可以执行以下操作：
// webpack.config.js
module.exports = {
...
output: {
...
assetModuleFilename: '[path][name].[hash][ext][query]'
}
}
对于一组特定的资产，您需要这样做：
// webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
type: "asset/resource"
generator: {
filename: '[path][name].[hash][ext][query]'
}
}
]
}
};
提供的模板将生成类似于build/images/img.151cfcfa1bd74779aadb.png 的文件名。将模板修改为您的用例。
【讨论】：
import myPath from "image.png"; 然后使用它，那么 Webpack 不会复制它。或者，您可能正在使用包含内存文件系统并且不会写入文件系统的 Webpack 开发服务器选项。如果这些都不能回答你的问题，我建议你提出一个问题，因为我可以在这里列举的信息有限。
import 可以完成工作。不过，我不会为我想要复制的每个资产添加import！由于这从根本上不是构建中的依赖项/捆绑/缩小/转译步骤，我认为我将在 webpack 之外进行。
您很可能应该使用 kevlened 答案中提到的 CopyWebpackPlugin。对于.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')
【讨论】：
您可以在 package.json 中编写 bash：
# package.json
{
"name": ...,
"version": ...,
"scripts": {
"build": "NODE_ENV=production npm run webpack && cp -v <this> <that> && echo ok",
...
}
}
【讨论】：
"build": "webpack && xcopy images dist\\images\\ /S /Y && xcopy css dist\\css\\ /S /Y"
我也被困在这里。 copy-webpack-plugin 对我有用。
但是，在我的情况下，“copy-webpack-plugin”不是必需的（我后来才知道）。
webpack 忽略根路径
例子
<img src="/images/logo.png'>
因此，在不使用“copy-webpack-plugin”的情况下完成这项工作 在路径中使用 '~'
<img src="~images/logo.png'>
'~' 告诉 webpack 将 'images' 视为一个模块
注意： 您可能需要在中添加图像目录的父目录
resolve: {
modules: [
'parent-directory of images',
'node_modules'
]
}
【讨论】：
~ 运算符是Vue JS特有的，不是webpack的功能。用 Svelte 尝试过，似乎没有成功。
webpack 配置文件（在 webpack 2 中）允许你导出一个 Promise 链，只要最后一步返回一个 webpack 配置对象。 See promise configuration docs。从那里：
webpack 现在支持从配置文件返回一个 Promise。这允许在您的配置文件中进行异步处理。
你可以创建一个简单的递归复制函数来复制你的文件，然后才触发 webpack。例如：
module.exports = function(){
return copyTheFiles( inpath, outpath).then( result => {
return { entry: "..." } // Etc etc
} )
}
【讨论】：
假设您的所有静态资产都在根级别的“静态”文件夹中，并且您希望将它们复制到构建文件夹中维护子文件夹的结构，然后 在您的条目文件中）只需放入
//index.js or index.jsx
require.context("!!file?name=[path][name].[ext]&context=./static!../static/", true, /^\.\/.*\.*/);
【讨论】：