我正试着从Gulp转到Webpack。在Gulp中,我有一个任务,它将所有文件和文件夹从/static/文件夹复制到/build/文件夹。如何用Webpack做同样的事情?我需要一些插件吗?
当前回答
使用文件加载器模块要求资产是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。否则使用最新的。
其他回答
你不需要到处复制东西,webpack的工作方式与gulp不同。Webpack是一个模块捆绑器,你在文件中引用的所有内容都将被包括在内。你只需要为此指定一个加载器。
所以如果你写:
var myImage = require("./static/myImage.jpg");
Webpack将首先尝试将引用的文件解析为JavaScript(因为这是默认的)。当然,这将会失败。这就是为什么您需要为该文件类型指定一个加载器。例如,文件或url加载器获取引用的文件,将其放入webpack的输出文件夹(在您的情况下应该是构建的),并返回该文件的散列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" }
]
}
};
当然,您需要首先安装文件加载器才能使其工作。
Webpack 5增加了资产模块,这些模块本质上是普通文件加载器的替代品。我复制了以下文档的相关部分:
asset/resource生成一个单独的文件并导出URL。以前可以通过使用文件加载器实现。 asset/inline导出资产的数据URI。以前可以通过使用url加载器实现。 Asset /source导出资产的源代码。以前可以通过使用原始加载器实现。 asset自动在导出数据URI和发出单独的文件之间进行选择。以前可以通过使用url加载器与资产大小限制。
添加一个你可以使你的配置看起来像这样:
// webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
type: "asset/resource"
}
]
}
};
要控制文件的输出方式,可以使用模板路径。
在配置中,你可以在这里设置全局模板:
// 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的文件名。哈希可以用于缓存破坏等。你应该根据自己的需要进行修改。
我加载静态图像和字体的方式:
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/'
},
}
]
}
不要忘记安装文件加载器来让它工作。
我也被困在这里了。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
你可以在package.json中编写bash:
# package.json
{
"name": ...,
"version": ...,
"scripts": {
"build": "NODE_ENV=production npm run webpack && cp -v <this> <that> && echo ok",
...
}
}
推荐文章
- 节点和错误:EMFILE,打开的文件太多
- JavaScript函数中的默认参数值
- 使用RegExp.exec从字符串中提取所有匹配项
- 测试一个值是奇数还是偶数
- 空数组似乎同时等于true和false
- 它是可能的动画scrollTop与jQuery?
- 如何清除下拉框中的所有选项?
- 基于原型的继承与基于类的继承
- 我如何使一个HTML文本框显示空时提示?
- 如何隐藏谷歌隐形reCAPTCHA徽章
- 在JavaScript中调换2d数组
- 如何使用JavaScript停止浏览器后退按钮?
- 跟踪鼠标位置
- 如何获得<html>标签html与JavaScript / jQuery?
- 浏览器检测JavaScript?