我正试着从Gulp转到Webpack。在Gulp中，我有一个任务，它将所有文件和文件夹从/static/文件夹复制到/build/文件夹。如何用Webpack做同样的事情?我需要一些插件吗?
当前回答
我加载静态图像和字体的方式:
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/'
},
}
]
}
不要忘记安装文件加载器来让它工作。
其他回答
在我的例子中，我使用webpack作为wordpress插件来压缩js文件，其中插件文件已经被压缩了，需要跳过这个过程。
optimization: {
minimize: false,
},
externals: {
"jquery": "jQuery",
},
entry: glob.sync('./js/plugin/**.js').reduce(function (obj, el) {
obj[path.parse(el).name] = el;
return obj
}, {}),
output: {
path: path.resolve(__dirname, './js/dist/plugin'),
filename: "[name].js",
clean: true,
},
用于将js文件复制到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。否则使用最新的。
我加载静态图像和字体的方式:
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/'
},
}
]
}
不要忘记安装文件加载器来让它工作。
你可以在package.json中编写bash:
# package.json
{
"name": ...,
"version": ...,
"scripts": {
"build": "NODE_ENV=production npm run webpack && cp -v <this> <that> && echo ok",
...
}
}
我也被困在这里了。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
