如何复制静态文件以使用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.jsmodule.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 nodevar 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

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

使用webpack构建多页应用
背景随着react, vue, angular 三大前端框架在前端领域地位的稳固,SPA应用正在被应用到越来越多的项目之中.然而在某些特殊的应用场景之中,则需要使用到传统的多页应用.在使用webpa ...
ASP.NET Core 中文文档第三章原理（3）静态文件处理
原文:Working with Static Files 作者:Rick Anderson 翻译:刘怡(AlexLEWIS) 校对:谢炀(kiler398).许登洋(Seay).孟帅洋(书缘) 静态文 ...
Django模板、配置文件、静态文件及案例实现（创建模板、设置模板查找路径、模板接收视图传入的数据、模板处理数据、BASE_DIR、DEBUG、本地语言与时区、App应用配置）
1.Django模板网站如何向客户端返回一个漂亮的页面呢? 漂亮的页面需要html.css.js. 可以把这一堆字段串全都写到视图中, 作为HttpResponse()的参数,响应给客户端. 存在的 ...
[Django]APP级别的静态文件处理
2019独角兽企业重金招聘Python工程师标准>>> 转载自 limodou的学习记录 [Django]APP级别的静态文件处理静态文件在 django 中并不是非常简单的事情. ...
Django静态文件处理、中间件及Admin站点
Django静态文件处理.中间件及Admin站点文章目录 Django静态文件处理.中间件及Admin站点一.静态文件 1.简介 2.示例 3.配置静态文件二.中间件 1.简介 2.示例 3.异 ...
python 静态文件以及一个项目框架
在网上浏览网页,由于现在网速也快了,大概你很少注意网页中那些所谓的静态文件.怎么找出来静态文件呢? 查看一个网页: 上图中,查看其源码,打开<head>,发现里面有不少<script ...
ASP.NET Core：静态文件
在Web开发中,如js脚本.css样式.图片等的静态文件通常占据了很大一部分.ASP.NET Core提供了三个中间件来处理这种针对静态文件的请求.利用它们我们不经可以将物理文件发布为通过http请求 ...
Django/静态文件/apps配置/模型/数据库/shell
一.debug和basedir 1.debug 2.basedir 当前文件的上一级的上一级绝对路径:/root/PycharmProjects/bookmanage # Build paths in ...
【Android 安装包优化】使用 lib7zr.a 静态库处理压缩文件 ( 交叉编译 lib7zr.a 静态库 | 安卓工程导入静态库 | 配置 CMakeLists.txt 构建脚本 )
文章目录一.修改 7zr 交叉编译脚本 Android.mk 二.完整的 7zr 交叉编译脚本 Android.mk 三.交叉编译 lib7zr.a 静态库四.Android Studio 导入 ...

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

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

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

最新文章

热门文章