如何使用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

  • about.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 /例如文件名「main.js」的文件夾不會被複制，但如果它被命名爲「main-js.js」，則它會被複制到我的dist文件夾中，並且我無法從插件/文件夾複製文件。我無法理解這一點。我嘗試了所有可能的解決方案，我可以通過stackoverflow，github和類似的網站，但沒有任何幫助。另外我發現webpack非常混亂。在轉移到webpack之前，我一直在使用gulp，我發現它更有幫助。我遇到了webpack並希望瞭解它，但我發現它非常困難。如果你們能幫我弄清楚這一點，那會很棒。謝謝！

Answer 1

嘗試使用Copy Webpack Plugin以便在文件夾之間複製文件。

我不知道你想複製js文件的原因，webpack像樹依賴關係解析器一樣工作，所以它應該獲得（樹的）入口點並創建一個具有整個依賴關係樹的包。