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

Question

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

Answer 1

使用文件加载器模块来请求资产是打算使用webpack的方式（来源）。但是，如果您需要更大的灵活性或想要一个更简洁的界面，也可以直接使用my copy-webpack-plugin（npm，Github）复制静态文件。为了您static到build例如：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {

    context: path.join(__dirname, 'your-app'),

    plugins: [

        new CopyWebpackPlugin([

            { from: 'static' }

        ])

    ]

};

Answer 2

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

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

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