将配置文件复制到 webpack 中的 dist 目录答案

【问题标题】：Copy a config file to the dist directory in webpack将配置文件复制到 webpack 中的 dist 目录
【发布时间】：2016-08-24 15:24:16
【问题描述】：

我想从 webpack 的 entry 或 output 目录之外复制一个文件。我需要有一个与捆绑包完全分离的属性文件。

所以我有这个结构：

/project
   /config
     properties.js
   /dist
     bundle.js
     webpack-created-index.html
   /src
     index.html-with-custom-script-tag
     ...source files and folder here

我想让我的 webpack.config 复制那个源代码控制的配置文件夹（不摆弄它的内容），所以我的 dist 文件夹看起来像这样：

/dist
  /config
    properties.js
  bundle.js
  webpack-created-index.html

我希望能够让我的 webpack 创建的 index.html 像这样加载该 properties.js 文件：

<script type="text/javascript" src="../config/properties.js"></script>

我的浏览器显示 404，即使我将 <script> 标记中的相对路径更改为退出 dist 并遍历文件系统，直到到达 src 中的 config 文件夹。

我的 webpack.config.js 入口/输出如下：

   config.entry = {
     app: './src/app.js'
   };

   config.output = {
     path: __dirname + '/dist',
     publicPath: 'http://localhost:8080/',
     filename: '[name].bundle.js'
   };

是否可以使用 webpack 来执行此操作，或者我需要引入诸如 gulp 或节点脚本之类的东西来执行此操作？我的强烈偏好是使用 webpack 完成此任务，而不必使用外部脚本或库使构建变得复杂。

【问题讨论】：

你找到了使用 webpack 配置本身的解决方案？

标签： webpack

【解决方案1】：

您可以使用节点模块 cpy-cli。

npm install cpy-cli

将src文件夹内的所有.html文件复制到dist并保留路径结构

cpy '**/*.html' '../dist/' --cwd=src --parents

我有一个简单的脚本来处理它

"copy-files": "cpy \"**/index.html\" favicon.ico \"../dist\" --cwd=src --parents"

要自动注入文件，请使用html-webpack-plugin

npm install html-webpack-plugin --save-dev