如何使用Webpack將腳本文件從src復制到dist

Question

我是webpack的新手，正在嘗試學習它。 我一直在嘗試使用webpack將供應商js文件和自定義jquery腳本從src復制到dist。 我已經嘗試過，但找不到任何方法。

這就是我的文件夾結構：

• Project_root_folder

  • node_modules /
  • package.json
  • src /
  • 應用/
    • app.js
  • img /
    • img1.png
  • CSS /
    • main.scss

  • js /

    • custom_slick.js
    • main.js
    • 插件/
    • jquery.min.js
    • slick.min.js

  • index.pug

  • 關於.pug

  • contact.pug

  • dist /

  • 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
      ]
    }

App.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

嘗試使用“ 復制Webpack插件 ”以在文件夾之間復制文件。

我不確定為什么要復制js文件的原因，webpack的工作原理類似於樹依賴解決程序，因此它應該獲取（樹的）入口點並創建具有整個依賴樹的包。