我正试着从Gulp转到Webpack。在Gulp中,我有一个任务,它将所有文件和文件夹从/static/文件夹复制到/build/文件夹。如何用Webpack做同样的事情?我需要一些插件吗?


当前回答

在我的例子中,我使用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。否则使用最新的。

如果你想复制静态文件,你可以这样使用文件加载器:

对于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文件的位置。

你可以对图像或其他东西做同样的事情。 语境是一种强大的探索方法!!

你可以在package.json中编写bash:

# package.json
{
  "name": ...,
  "version": ...,
  "scripts": {
    "build": "NODE_ENV=production npm run webpack && cp -v <this> <that> && echo ok",
    ...
  }
}

在我的例子中,我使用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配置文件(在webpack 2中)允许你导出承诺链,只要最后一步返回一个webpack配置对象。参见承诺配置文档。从这里开始:

webpack现在支持从配置文件中返回Promise。这允许在配置文件中进行异步处理。

你可以创建一个简单的递归复制函数来复制你的文件,并且只在触发webpack之后。例如:

module.exports = function(){
    return copyTheFiles( inpath, outpath).then( result => {
        return { entry: "..." } // Etc etc
    } )
}