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

本文翻译自：How to copy static files to build directory with Webpack?

I'm trying to move from Gulp to Webpack . 我正在尝试从Gulp迁移到Webpack 。 In Gulp I have task which copies all files and folders from /static/ folder to /build/ folder. 在Gulp我的任务是将所有文件和文件夹从/ static /文件夹复制到/ build /文件夹。 How to do the same with Webpack ? 如何用Webpack做同样的Webpack ？ Do I need some plugin? 我需要一些插件吗？

---

#1楼

参考：https://stackoom.com/question/1ryAP/如何复制静态文件以使用Webpack构建目录

---

#2楼

You don't need to copy things around, webpack works different than gulp. 您无需复制任何内容，Webpack的工作原理与gulp不同。 Webpack is a module bundler and everything you reference in your files will be included. Webpack是一个模块捆绑程序，您在文件中引用的所有内容都将包括在内。 You just need to specify a loader for that. 您只需要为此指定一个加载程序。

So if you write: 因此，如果您写：

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

Webpack will first try to parse the referenced file as JavaScript (because that's the default). Webpack首先将尝试将引用的文件解析为JavaScript（因为这是默认设置）。 Of course, that will fail. 当然，那将会失败。 That's why you need to specify a loader for that file type. 这就是为什么您需要为该文件类型指定加载程序。 The file - or url-loader for instance take the referenced file, put it into webpack's output folder (which should be build in your case) and return the hashed url for that file. 文件 -或url-loader例如获取引用的文件，将其放入webpack的输出文件夹（在您的情况下应build ），然后返回该文件的哈希URL。

var myImage = require("./static/myImage.jpg");
console.log(myImage); // '/build/12as7f9asfasgasg.jpg'

Usually loaders are applied via the webpack config: 通常，加载器是通过webpack配置应用的：

// webpack.config.js

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file" }
        ]
    }
};

Of course you need to install the file-loader first to make this work. 当然，您需要先安装文件加载器以使此工作。

---

#3楼

Requiring assets using the file-loader module is the way webpack is intended to be used ( source ). 使用文件加载器模块来请求资产是打算使用webpack的方式（ 来源 ）。 However, if you need greater flexibility or want a cleaner interface, you can also copy static files directly using my copy-webpack-plugin ( npm , Github ). 但是，如果您需要更大的灵活性或想要一个更copy-webpack-plugin界面，也可以使用我的copy-webpack-plugin （ npm ， Github ）直接复制静态文件。 For your static to build example: 为您的static build示例：

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

module.exports = {
    context: path.join(__dirname, 'your-app'),
    plugins: [
        new CopyWebpackPlugin([
            { from: 'static' }
        ])
    ]
};

---

#4楼

If you want to copy your static files you can use the file-loader in this way : 如果要复制静态文件，则可以通过以下方式使用文件加载器：

for html files : 对于html文件：

in webpack.config.js : 在webpack.config.js中：

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(html)$/,
              loader: "file?name=[path][name].[ext]&context=./app/static"
            }
        ]
    }
};

in your js file : 在您的js文件中：

  require.context("./static/", true, /^\.\/.*\.html/);

./static/ is relative to where your js file is. ./static/相对于您的js文件所在的位置。

You can do the same with images or whatever. 您可以对图像或其他内容进行相同的操作。 The context is a powerful method to explore !! 上下文是探索的强大方法！

---

#5楼

Most likely you should use CopyWebpackPlugin which was mentioned in kevlened answer. 最可能的是，您应该使用kevlened答案中提到的CopyWebpackPlugin。 Alternativly for some kind of files like .html or .json you can also use raw-loader or json-loader. 另外，对于.html或.json之类的文件，您也可以使用raw-loader或json-loader。 Install it via npm install -D raw-loader and then what you only need to do is to add another loader to our webpack.config.js file. 通过npm install -D raw-loader进行npm install -D raw-loader ，然后只需将另一个加载器添加到我们的webpack.config.js文件中即可。

Like: 喜欢：

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

Note: Restart the webpack-dev-server for any config changes to take effect. 注意：重新启动webpack-dev-server，使所有配置更改生效。

And now you can require html files using relative paths, this makes it much easier to move folders around. 现在，您可以要求使用相对路径的html文件，这使移动文件夹变得更加容易。

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

---

#6楼

Above suggestions are good. 以上建议是好的。 But to try to answer your question directly I'd suggest using cpy-cli in a script defined in your package.json . 但是，要尝试直接回答您的问题，我建议您在package.json定义的脚本中使用cpy-cli 。

This example expects node to somewhere on your path. 此示例期望node位于路径上的某个位置。 Install cpy-cli as a development dependency: 安装cpy-cli作为开发依赖项：

npm install --save-dev cpy-cli

Then create a couple of nodejs files. 然后创建几个nodejs文件。 One to do the copy and the other to display a checkmark and message. 一个进行复制，另一个显示复选标记和消息。

copy.js 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 checkmark.js

var chalk = require('chalk');

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

module.exports = addCheckMark;

Add the script in package.json . 将脚本添加到package.json 。 Assuming scripts are in <project-root>/scripts/ 假设脚本位于<project-root>/scripts/

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

To run the sript: 要运行摘要：

npm run copy