如何使用 webpack 将脚本文件从 src 复制到 dist

Question

我是 webpack 的新手，正在尝试学习它。我一直在尝试使用 webpack 将供应商 js 文件和自定义 jquery 脚本从 src 复制到 dist。我已经尝试过，但找不到任何方法。

这就是我的文件夹结构：

• 项目根文件夹

  • 节点模块/
  • 包.json
  • 源代码/
  • 应用程序/
    • 应用程序.js
  • 图像/
    • img1.png
  • CSS/
    • 主文件

  • js/

    • 定制_slick.js
    • main.js
    • 插件/
    • jquery.min.js
    • slick.min.js

  • 索引.pug

  • 关于.pug

  • 联系方式.pug

  • 距离/

  • webpack.config.js

我的 webpack.config 文件

        var path = require("path"),
        src = path.resolve(__dirname, "src"),
        dist = path.resolve(__dirname, "dist"),
        webpack = require("webpack"),
        HtmlWebpackPlugin = require("html-webpack-plugin"),
        HtmlWebpackPugPlugin = require('html-webpack-pug-plugin'),
        ExtractTextPlugin = require("extract-text-webpack-plugin"),

        extractPlugin = new ExtractTextPlugin({
          filename: "css/main.css"
        });

    module.exports = {
      entry: src + "/app/app.js",
      output: {
        path: dist,
        filename: "bundle.js",
        publicPath: "/"
      },
      module: {
        rules: [
        {                                                                               //Convert .pug to .html
          test: /\.pug$/,
          loaders: ['file-loader?name=[name].html', 'pug-html-loader?pretty&exports=false']
        },
        {
          test: /\.scss$/,                                   //convert .scss to .css
          use: extractPlugin.extract({
            use: ["css-loader", "sass-loader?minimize=true"]
          })
        },
        {
          test: /..\js\$\.js$/,                   // move all .js files in js folder
          use: [
            {
              loader: "file-loader",
              options: {
                name: "[name].js",
                outputPath: "js/"
              }
            }
          ]
        },
        {
          test: /..\js\plugins\.js$/,
          use: [
                 {
                    loader: "file-loader",
                    options: {
                    name: "js/plugins/[name].js",
                    outputPath: "js/plugins/"
                    }
                 }
              ]
          }
        ]
      },
      plugins: [
        extractPlugin
      ]
    }

应用程序.js 文件

import '../css/main.scss';

require.context('../js/', true, /\.js$/);                 //require all js files in js folder
require.context('../js/plugins/', true, /\.js$/);        // all js files in plugins folder which is inside js folder

function requirAll (r) { r.keys().forEach(r); }
requireAll(require.context('../', true, /\.pug$/));

另外，当我运行此配置文件时，我注意到只有带有后缀“-js”的脚本文件被复制，而不是 js/ 文件夹中包含的任何其他 js 文件，例如文件名“main.js”不会被复制，但如果它被命名为“main-js.js”，然后它被复制到我的 dist 文件夹中，并且我无法从 plugins/ 文件夹中复制文件。我无法理解这一点。

我已经尝试了在 Stack Overflow、GitHub 和类似网站上找到的所有可能的解决方案，但没有一个有帮助。我还发现 webpack 非常令人困惑。在转向 webpack 之前，我一直在使用 Gulp，我发现它更有帮助。我遇到了 webpack 并想学习它，但我发现它非常困难。

Answer 1

尝试使用Copy Webpack Plugin在文件夹之间复制文件。

我不确定你想要复制 js 文件的原因，webpack 的工作原理就像一个树依赖解算器，所以它应该获取一个（树的）入口点并创建一个具有整个依赖树的包。