如何使用Webpack将静态文件复制到构建目录？

Question

我试图从移动Gulp到Webpack.在Gulp我有任务将所有文件和文件夹从/ static /文件夹复制到/ build /文件夹.怎么做同样的Webpack？我需要一些插件吗？

Answer 1

使用文件加载器模块需要资产是webpack的使用方式(源).但是,如果您需要更大的灵活性或想要更清晰的界面,您也可以使用我的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

你不需要复制周围的东西,webpack的工作方式与gulp不同.Webpack是一个模块捆绑器,您将在文件中引用所有内容.你只需要指定一个加载器.

所以,如果你写:

var myImage = require("./static/myImage.jpg");

Webpack将首先尝试将引用的文件解析为JavaScript(因为这是默认值).当然,这将失败.这就是您需要为该文件类型指定加载器的原因.例如,文件 - 或url-loader接受引用的文件,将其放入webpack的输出文件夹(应该是build你的情况)并返回该文件的散列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" }
        ]
    }
};

当然,您需要先安装文件加载器才能使其正常工作.

Answer 3

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

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

你可以用图像或其他任何东西做同样的事情.上下文是一个强大的探索方法!

Answer 4

Webpack 5 添加了资产模块，这些模块本质上是常见文件加载器的替代品。我复制了以下文档的相关部分：

• asset/resource发出一个单独的文件并导出 URL。以前可以通过使用file-loader.
• asset/inline导出资产的数据 URI。以前可以通过使用url-loader.
• asset/source导出资产的源代码。以前可以通过使用raw-loader.
• asset自动选择导出数据 URI 和发出单独的文件。以前可以通过使用url-loader资产规模限制来实现。

要添加一个，您可以使您的配置如下所示：

// 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. 哈希对于缓存清除等很有用。您应该根据您的需要进行修改。

Answer 5

前面提到的copy-webpack-plugin带来的一个优点是之前没有解释过的,这里提到的所有其他方法仍然将资源捆绑到你的bundle文件中(并要求你在某处"要求"或"导入"它们).如果我只想移动一些图像或一些模板部分,我不想混淆我的javascript包文件与无用的引用,我只是想在正确的位置发出的文件.我还没有在webpack中找到任何其他方法.不可否认,这不是webpack最初的设计目标,但它肯定是当前的一个用例.(@BreakDS我希望这能回答你的问题 - 如果你想要的话,这只是一个好处)

Answer 6

以上建议都很好.但是为了尝试直接回答你的问题,我建议cpy-cli你在你的定义中使用脚本package.json.

此示例预计node会在您的路径上的某个位置.cpy-cli作为开发依赖项安装:

npm install --save-dev cpy-cli

然后创建几个nodejs文件.一个用于复制,另一个用于显示复选标记和消息.

copy.js

#!/usr/bin/env node

var shelljs = require('shelljs');
var addCheckMark = require('./helpers/checkmark');
var path = require('path');

var cpy = path.join(__dirname, '../node_modules/cpy-cli/cli.js');

shelljs.exec(cpy + ' /static/* /build/', addCheckMark.bind(null, callback));

function callback() {
  process.stdout.write(' Copied /static/* to the /build/ directory\n\n');
}

checkmark.js

var chalk = require('chalk');

/**
 * Adds mark check symbol
 */
function addCheckMark(callback) {
  process.stdout.write(chalk.green(' ?'));
  callback();
}

module.exports = addCheckMark;

添加脚本package.json.假设脚本在<project-root>/scripts/

...
"scripts": {
  "copy": "node scripts/copy.js",
...

运行sript:

npm run copy

Answer 7

最可能的是，您应该使用kevlened答案中提到的CopyWebpackPlugin。另外，对于.html或.json之类的文件，您也可以使用raw-loader或json-loader。通过安装它npm install -D raw-loader，然后您只需要在我们的webpack.config.js文件中添加另一个加载器即可。

喜欢：

{
    test: /\.html/,
    loader: 'raw'
}

注意：重新启动webpack-dev-server，使所有配置更改生效。

现在，您可以要求使用相对路径的html文件，这使移动文件夹变得更加容易。

template: require('./nav.html')  

Answer 8

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

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

Answer 9

我加载静态images和的方式fonts：

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/'
          },
        }
    ]
}

不要忘记安装file-loader以使其正常工作。