我正尝试从Gulp
移至Webpack
。在Gulp
我的任务中,将所有文件和文件夹从/ static /文件夹复制到/ build /文件夹。怎么做Webpack
呢?我需要一些插件吗?
我正尝试从Gulp
移至Webpack
。在Gulp
我的任务中,将所有文件和文件夹从/ static /文件夹复制到/ build /文件夹。怎么做Webpack
呢?我需要一些插件吗?
Answers:
您无需复制任何内容,Webpack的工作原理与gulp不同。Webpack是一个模块捆绑程序,您在文件中引用的所有内容都将包括在内。您只需要为此指定一个加载程序。
因此,如果您写:
var myImage = require("./static/myImage.jpg");
Webpack首先将尝试将引用的文件解析为JavaScript(因为这是默认设置)。当然,那将失败。这就是为什么您需要为该文件类型指定加载程序。该文件 -或者URL装载机例如采用引用的文件,把它变成的WebPack的输出文件夹(这应该是build
你的情况),并返回混编网址该文件。
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" }
]
}
};
当然,您需要先安装文件加载器以使此工作。
使用文件加载器模块来请求资产是打算使用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' }
])
]
};
如果要复制静态文件,则可以通过以下方式使用文件加载器:
对于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文件所在的位置。
您可以对图像或其他内容进行相同的操作。上下文是探索的强大方法!
index.html
放入要创建的子目录_
(下划线),这是怎么回事?
main.js
正在导入static
文件夹中的所有内容:require.context("./static/", true, /^.*/);
以上建议是好的。但是,要尝试直接回答您的问题,我建议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",
...
要运行摘要:
npm run copy
最有可能您应该使用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')
我加载静态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
才能正常工作。
您可以在package.json中编写bash:
# package.json
{
"name": ...,
"version": ...,
"scripts": {
"build": "NODE_ENV=production npm run webpack && cp -v <this> <that> && echo ok",
...
}
}
"build": "webpack && xcopy images dist\\images\\ /S /Y && xcopy css dist\\css\\ /S /Y"
我也被困在这里。copy-webpack-plugin对我有用。
但是,在我的情况下,“ copy-webpack-plugin”不是必需的(我以后会学习)。
webpack忽略根路径
示例
<img src="/images/logo.png'>
因此,要在不使用“ copy-webpack-plugin”的情况下进行此项工作,请在路径中使用“〜”
<img src="~images/logo.png'>
“〜”告诉webpack将“图像”视为模块
注意:您可能必须在以下位置添加图片目录的父目录
resolve: {
modules: [
'parent-directory of images',
'node_modules'
]
}
webpack配置文件(在webpack 2中)允许您导出承诺链,只要最后一步返回webpack配置对象即可。请参阅Promise配置文档。从那里:
webpack现在支持从配置文件返回Promise。这允许在配置文件中进行异步处理。
您可以创建一个简单的递归复制功能来复制文件,并且仅在此之后触发webpack。例如:
module.exports = function(){
return copyTheFiles( inpath, outpath).then( result => {
return { entry: "..." } // Etc etc
} )
}