I am new to webpack and attempting to learn it. I have been trying to copy my vendor js files and custom jquery scripts from src to dist using webpack. I have tried but I couldn't find any way.

So this is how my folder structure is:

• Project_root_folder

  • node_modules/
  • package.json
  • src/
  • app/
    • app.js
  • img/
    • img1.png
  • css/
    • main.scss

  • js/

    • custom_slick.js
    • main.js
    • plugins/
    • jquery.min.js
    • slick.min.js

  • index.pug

  • about.pug

  • contact.pug

  • dist/

  • webpack.config.js

My webpack.config file

        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 file

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$/));

Also when I run this config file, I noticed that only the script files with a suffix "-js" get copied and not any other js files included in js/ folder for example filename "main.js" doesn't get copied but if it were named "main-js.js" then it gets copied into my dist folder, and I am unable to copyfiles from plugins/ folder. I am unable to understand this.

I have tried every possible solution I could e across over Stack Overflow, GitHub and similar websites but none were helpful. Also I found webpack to be extremely confusing. Before moving to webpack, I had been using Gulp which I found a lot more helpful. I came across webpack and want to learn it but I am finding it extremely difficult.

I am new to webpack and attempting to learn it. I have been trying to copy my vendor js files and custom jquery scripts from src to dist using webpack. I have tried but I couldn't find any way.

So this is how my folder structure is:

• Project_root_folder

  • node_modules/
  • package.json
  • src/
  • app/
    • app.js
  • img/
    • img1.png
  • css/
    • main.scss

  • js/

    • custom_slick.js
    • main.js
    • plugins/
    • jquery.min.js
    • slick.min.js

  • index.pug

  • about.pug

  • contact.pug

  • dist/

  • webpack.config.js

My webpack.config file

        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 file

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$/));

Also when I run this config file, I noticed that only the script files with a suffix "-js" get copied and not any other js files included in js/ folder for example filename "main.js" doesn't get copied but if it were named "main-js.js" then it gets copied into my dist folder, and I am unable to copyfiles from plugins/ folder. I am unable to understand this.

I have tried every possible solution I could e across over Stack Overflow, GitHub and similar websites but none were helpful. Also I found webpack to be extremely confusing. Before moving to webpack, I had been using Gulp which I found a lot more helpful. I came across webpack and want to learn it but I am finding it extremely difficult.

• javascript
• jquery
• webpack

1 Answer 1

Try to use Copy Webpack Plugin in order to copy files between folders.

I'm not sure the reason why you want to copy js files, webpack works like a tree dependency solver, so it should get an entry point (of the tree) and create a bundle that has the entire tree of dependencies.