webpackを使ってsrcからdistにスクリプトファイルをコピーするには

Question

私は実際にwebpackを学習し、それを習得しようとしています。私はベンダーjsファイルとカスタムjqueryスクリプトをwebpackを使ってsrcからdistにコピーしようとしていました。私は試みましたが、私は決して見つけることができませんでした。 これが私のフォルダ構造がどのようにある：

• Project_root_folder

  • node_modules/
  • package.json
  • のsrc/
  • アプリ/
    • app.js
  • IMG/
    • img1.png
  • CSS/
    • main.scss

  • JS/

    • custom_slick.js
    about.pug
    • main.js
    • プラグイン/
    • jquery.min.js
    • slick.min.js

  • index.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はツリー依存ソルバのように動作しますので、（ツリーの）エントリポイントを取得して、 。