如何复制静态文件与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' ] } 

访问https://vuejs-templates.github.io/webpack/static.html

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我希望这回答你的问题 – 这只是一个好处,如果你想要的话)