如何复制静态文件与Webpackbuild立目录？
我正在尝试从Gulp转移到Webpack 。 在Gulp我有任务将所有文件和文件夹从/静态/文件夹复制到/ build /文件夹。 如何做到与Webpack ？ 我需要一些插件吗？
你不需要复制周围的东西，webpack的作品不同于gulp。 Webpack是一个模块打包器，并且包含您在文件中引用的所有内容。 你只需要指定一个加载器。
所以如果你写：
var myImage = require("./static/myImage.jpg");
Webpack将首先尝试将引用的文件parsing为JavaScript（因为这是默认设置）。 当然，那将会失败。 这就是为什么你需要为该文件types指定一个加载器。 文件或URL加载器的实例采取引用的文件，把它放入webpack的输出文件夹（应该build在你的情况），并返回该文件的哈希url。
var myImage = require("./static/myImage.jpg"); console.log(myImage); // '/build/12as7f9asfasgasg.jpg'
通常装载机通过webpackconfiguration来应用：
// webpack.config.js module.exports = { ... module: { loaders: [ { test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file" } ] } };
当然，你需要首先安装文件加载器来完成这个工作。
使用文件加载器模块要求资产是打算使用webpack的方式（ 来源 ）。 但是，如果您需要更大的灵活性或希望获得更清晰的界面，则还可以使用我的copy-webpack-plugin （ npm ， Github ） 1直接复制静态文件。 为你的static build示例：
var CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { context: path.join(__dirname, 'your-app'), plugins: [ new CopyWebpackPlugin([ { from: 'static' } ]) ] };
1 ：我是这个插件的作者。
如果你想复制你的静态文件，你可以这样使用文件加载器：
为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文件的位置。
你可以用图像或其他方法来做同样的事情。 上下文是一个强大的方法来探索！
最有可能的是你应该使用CopyWebpackPlugin这个在kevlened答案中提到的。 另外对于某些types的文件，如.html或.json，你也可以使用raw-loader或json-loader。 通过npm install -D raw-loader安装它，然后你只需要在webpack.config.js文件中添加另一个loader。
喜欢：
{ test: /\.html/, loader: 'raw' }
注意：重新启动webpack-dev-server以使configuration更改生效。
现在，您可以使用相对path来要求html文件，这使得移动文件夹变得非常容易。
template: require('./nav.html')
以上build议是好的。 但要尝试直接回答你的问题，我会build议在你的package.json定义的脚本中使用cpy-cli 。
这个例子期望node到你的path上的某个地方。 安装cpy-cli作为开发依赖：
npm install --save-dev cpy-cli
然后创build一对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", ...
为了运行这个脚步：
npm run copy
你可以在你的package.json中写入bash：
# package.json { "name": ..., "version": ..., "scripts": { "build": "NODE_ENV=production npm run webpack && cp -v <this> <that> && echo ok", ... } }
我也被困在这里。 copy-webpack-plugin为我工作。
然而，在我的情况下，“copy-webpack-plugin”是不必要的（我后来知道）。
webpack忽略根path
例
<img src="http://img.dovov.comlogo.png'>
因此，为了使这个工作不使用“copy-webpack-plugin”，在path中使用“〜”
<img src="~images/logo.png'>
“〜”告诉webpack将“图像”视为一个模块
注意：你可能需要添加images目录的父目录
resolve: { modules: [ 'parent-directory of images', 'node_modules' ] }
webpackconfiguration文件（在webpack 2中）允许你导出一个promise链，只要最后一步返回一个webpackconfiguration对象。 请参阅承诺configuration文档 。 从那里：
webpack现在支持从configuration文件返回Promise。 这允许在你的configuration文件中做asynchronous处理。
你可以创build一个简单的recursion复制函数来复制你的文件，只有在这之后触发webpack。 例如：
module.exports = function(){ return copyTheFiles( inpath, outpath).then( result => { return { entry: "..." } // Etc etc } ) }
可以说所有的静态资产都在一个文件夹“静态”在根目录级别，你想复制到生成文件夹保持子文件夹的结构，然后在你的入口文件）只是把
//index.js or index.jsx require.context("!!file?name=[path][name].[ext]&context=./static!../static/", true, /^\.\/.*\.*/);
前面提到的copy-webpack-plugin带来的一个好处是，这里提到的所有其他方法仍然将资源捆绑到你的bundle文件中（并要求你在某处“需要”或“导入”它们）。 如果我只是想移动一些图片或一些模板partials，我不想混乱我的JavaScript包文件无用的引用，我只是想在正确的地方发出的文件。 我还没有find任何其他方式在webpack中做到这一点。 诚然，这不是webpack最初devise的，但它绝对是一个当前的用例。 （@BreakDS我希望这回答你的问题 – 这只是一个好处，如果你想要的话）
