如何复制静态文件以使用Webpack构建目录?

JavaScript Webpack

启人

2020-05-28

我正尝试从Gulp移至WebpackGulp我的任务中,将所有文件和文件夹从/ static /文件夹复制到/ build /文件夹。怎么做Webpack呢?我需要一些插件吗?

第4188篇《如何复制静态文件以使用Webpack构建目录?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
伽罗理查德 2020.05.28

假设您所有的静态资产都位于根级别的“静态”文件夹中,并且您想将其复制到维护子文件夹结构的build文件夹中,然后将其复制到条目文件中)

//index.js or index.jsx

require.context("!!file?name=[path][name].[ext]&context=./static!../static/", true, /^\.\/.*\.*/);
仲羽 2020.05.28

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

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

webpack配置文件(在webpack 2中)允许您导出承诺链,只要最后一步返回webpack配置对象即可。请参阅Promise配置文档从那里:

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

您可以创建一个简单的递归复制功能来复制文件,并且仅在此之后触发webpack。例如:

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

前面没有提到的copy-webpack-plugin带来的一个好处是,这里提到的所有其他方法仍然将资源捆绑到捆绑文件中(并要求您“需要”或“将其导入”某处)。如果我只想移动一些图像或某些模板部分,我不想用无用的引用弄乱我的javascript捆绑文件,而只想在正确的位置发出这些文件。我还没有在webpack中找到其他方法来做到这一点。诚然,这并不是webpack最初设计的目的,但绝对是当前的用例。(@BreakDS,我希望这能回答您的问题-如果您愿意,这只是一种好处)

小胖Gil 2020.05.28

如果要复制静态文件,则可以通过以下方式使用文件加载器:

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

您可以对图像或其他内容进行相同的操作。上下文是探索的强大方法!

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android