Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack only one entry point?

Tags:

webpack

I have two entry points for my webpack.config.js and so far it does what I expect in terms of building two separate files. Is there a way for me to run the webpack command and have it build only ONE of those entry points instead of both? For example, if I only make changes to files in teh second entry point, I don't want too have to wait for the first entry point to build as well. Here's my webpack.config.js

var webpack = require('webpack');
var CleanPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {app:'./src/Main.js',theme:'./src/Theme.js'},

  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[id].[hash].bundle.js',
  path: 'build',
    publicPath: '/corp/build/'
  },
  plugins: [
    /*
        // This plugin minifies all the Javascript code of the final bundle
        new webpack.optimize.UglifyJsPlugin({
            mangle:   true,
            compress: {
                warnings: false, // Suppress uglification warnings
            },
        }),
    */
        new webpack.optimize.CommonsChunkPlugin({
            name:      'main', // Move dependencies to our main file
            children:  true, // Look for common dependencies in all children,
            minChunks: 2, // How many times a dependency must come up before being extracted
        })
  ],
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' },
      { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]},
      { test: /\.(jpg|gif|png|eot|woff|svg|ttf)(\?.*)?$/, loader: "file-loader" }
    ]
  }
}

I tried running webpack --entry theme but I get the error ERROR in Entry module not found: Error: Cannot resolve module 'theme' in /var/www/html/corp

like image 791
John Avatar asked Nov 26 '16 13:11

John


People also ask

How do you get multiple entry points on webpack?

webpack.config.js module. exports = { entry: { main: './path/to/my/entry/file. js', }, }; We can also pass an array of file paths to the entry property which creates what is known as a "multi-main entry".

What is the default entry point in webpack?

By default, every entry chunk stores all the modules that it uses. With dependOn option you can share the modules from one entry chunk to another: module. exports = { //... entry: { app: { import: './app.

Does webpack automatically minify?

Webpack v4+ will minify your code by default in production mode .

What are 4 core concept of webpack?

There are four basic concepts in webpack: entry , output , modules and plug-ins . These configurations are added in webpack.


1 Answers

You can make 2 separate Webpack config,

  1. First with DLL Plugin For Theme entry point
  2. In second bundle You can reference prebuilt theme via DLL Reference Plugin

and then you can run

webpack --config _first.config_ && webpack --watch --config _second.config

Any change in main code will not affect prebuilt theme bundle

https://robertknight.me.uk/posts/webpack-dll-plugins/

https://webpack.js.org/plugins/dll-plugin/

like image 91
anuj kosambi Avatar answered Oct 09 '22 17:10

anuj kosambi