CODEWITHSUNDEEP
javascriptangularjswebpack
Sameer
Sameer

Reputation: 3526

How to bundle assets folder fully - webpack

I am building a Web Application using MEAN stack.

I am using webpack to bundle my files.

In my project, I have two folders called 1.public/assets (in this assets folder I have separate folders called CSS, js, etc.. which contains various js and CSS.

and I have a folder called 2.client (in this I have my AngularJs code like controllers.js, services.js)

I am using webpack to bundle my client code.

const path = require('path');
const glob = require('glob');
const CleanWebpackPlugin = require('clean-webpack-plugin');
// const CopyWebpackPlugin = require('copy-webpack-plugin');


const outputDirectory = 'dist';

module.exports = {
  mode: 'development',
  target: 'web',
  entry: {
    app: glob.sync('./client/*.js'),
  },
  output: {
    path: path.resolve(__dirname, outputDirectory),
    filename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['env', 'stage-0'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
        loader: 'url-loader?limit=100000',
      },
    ],
  },
  devServer: {
    port: 3005,
    open: false,
    disableHostCheck: true,
    proxy: {
      '/': 'http://localhost:8005',
    },
  },
  plugins: [
    new CleanWebpackPlugin([outputDirectory]),
    // new CopyWebpackPlugin([
    //   { from: 'public/assets' },
    // ]),
  ],

};

I am just bundling my client folder and compiling that into app.bundle.js, How to compile assets?

NOTE: I am using AngularJs v1.

Upvotes: 0

Views: 1495

Answers (1)

Bryan
Bryan

Reputation: 697

Webpack starts from each entry point (you could have more than one entry point) and creates a dependency graph. Files/assets are added to the dependency graph when you have imported them into your application through the use of require and import statements.

What is not clear in your question is the relationship between your client folder and your public/assets folder, and whether they are linked. However, if none of the files in your client folder depend upon (require, import) any of the assets in your public/assets folder then they won't be in webpack's dependency graph, and therefore won't be transpiled and bundled.

Upvotes: 2

Related Questions