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

10 回答

• 155

  假设您所有的静态资产都位于根级别的“静态”文件夹中，并且您希望将它们复制到维护子文件夹结构的构建文件夹，然后在您的条目文件中）

  //index.js or index.jsx
  
  require.context("!!file?name=[path][name].[ext]&context=./static!../static/", true, /^\.\/.*\.*/);
  

  回复于 2024-04-25T10:20:01+08:00
• 423

  你不需要复制周围的东西，webpack的工作方式与gulp不同 . Webpack是一个模块捆绑器，您将在文件中引用所有内容 . 你只需要指定一个加载器 .

  所以，如果你写：

  var myImage = require("./static/myImage.jpg");
  

  Webpack将首先尝试将引用的文件解析为JavaScript（因为's the default). Of course, that will fail. That'为什么需要为该文件类型指定加载器 . 例如file或url-loader获取引用的文件，将其放入webpack的输出文件夹（应该是在你的情况下 build ）并返回该文件的散列URL .

  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" }
          ]
      }
  };
  

  当然，您需要先安装文件加载器才能使其正常工作 .

  回复于 2024-04-25T10:20:01+08:00
• 4

  前面提到的 copy-webpack-plugin 带来的一个优点是，我想要使用无用的引用来混乱我的javascript包文件，我只想在正确的位置发出文件 . 我没有't found any other way to do this in webpack. Admittedly it'不是最初为webpack设计的，但它只是一个好处，如果你想要的话）

  回复于 2024-04-25T10:20:01+08:00
• 1

  很可能你应该使用在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')
  

  回复于 2024-04-25T10:20:01+08:00
• 1

  你可以在package.json中编写bash：

  # package.json
  {
    "name": ...,
    "version": ...,
    "scripts": {
      "build": "NODE_ENV=production npm run webpack && cp -v <this> <that> && echo ok",
      ...
    }
  }
  

  回复于 2024-04-25T10:20:01+08:00
• 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文件的位置有关 .

  你可以用图像或其他任何东西做同样的事情 . 上下文是一个有趣的探索方法！

  回复于 2024-04-25T10:20:01+08:00
• 1

  以上建议很好 . 但是为了尝试直接回答你的问题，我建议在 package.json 中定义的脚本中使用 cpy-cli .

  此示例需要 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",
  ...
  

  运行sript：

  npm run copy

  回复于 2024-04-25T10:20:01+08:00
• 7

  webpack配置文件（在webpack 2中）允许您导出promise链，只要最后一步返回webpack配置对象 . See promise configuration docs . 从那里：

  webpack现在支持从配置文件中返回Promise . 这允许在配置文件中执行异步处理 .

  您可以创建一个简单的递归复制功能来复制您的文件，并且只有在触发了webpack之后 . 例如 . ：

  module.exports = function(){
      return copyTheFiles( inpath, outpath).then( result => {
          return { entry: "..." } // Etc etc
      } )
  }
  

  回复于 2024-04-25T10:20:01+08:00
• 5

  我也被困在这里 . copy-webpack-plugin为我工作 .

  但是，在我的情况下，我不需要'copy-webpack-plugin'（我后来才知道） .

  webpack忽略根路径
  例

  <img src="/images/logo.png'>
  

  因此，要在不使用'copy-webpack-plugin'的情况下完成这项工作，请在路径中使用'〜'

  <img src="~images/logo.png'>
  

  '〜'告诉webpack将'images'视为一个模块

  注意：您可能必须添加images目录的父目录

  resolve: {
      modules: [
          'parent-directory of images',
          'node_modules'
      ]
  }
  

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

  回复于 2024-04-25T10:20:01+08:00
• 51

  使用文件加载器模块寻求资产是webpack的使用方式（source） . 但是，如果您需要更大的灵活性或想要更清晰的界面，您还可以使用我的 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' }
          ])
      ]
  };
  

  回复于 2024-04-25T10:20:01+08:00