Question

我想从webpack的entry或output目录中复制一个文件。我需要一个与bundle完全分离的属性文件。

所以我有这个结构：

/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并遍历文件系统，直到它到达config文件夹在src。

我的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实现此目的，而不必使用外部脚本或库使构建复杂化。

Answer 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

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

1 个答案: