How do i prevent a .js file being bundled by webpack

Question

Hi I am currently using webpack to bundle my project files into a single file. However, I do not want webpack to bundle my config.js file where all my config is set. I would like to this remain separate in the output folder but not sure out to achieve this.

my current setup is

//index.js file
#!/usr/bin/env node
'use strict';
let config = require('config.js);
let read = require('read.js);
console.log('i am running through command line');

//read.js file
'use strict'
console.log('read a text file');

//config.js 
'use strict';
module.exports = {
name: 'test'
}

//webpack.config.js
let webpack = require('webpack');
let path = require('path');
let fs = require('fs');

let nodeModules = {};
fs.readdirSync('node_modules')
.filter(function (x) {
    return [ '.bin' ].indexOf(x) === -1;
})
.forEach(function (mod) {
    nodeModules[mod] = 'commonjs ' + mod;
});

module.exports = {
entry: [ 'babel-polyfill', './index.js' ],
target: 'node',
node: {
    __dirname: true
},
output: {
    path: path.join(__dirname, 'webpack_bundle'),
    filename: '[name].js',
    libraryTarget: 'commonjs'
},
module: {
    loaders: [
        {
            test: /\.js$/,
            loader: 'shebang-loader'
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                presets: [ 'es2015' ]
            }
        } ]
},
resolve: {
    extensions: [ '.js' ]
},
plugins: [
    new webpack.BannerPlugin({banner: '#!/usr/bin/env node', raw: true 
})
]
,
    externals: nodeModules
};

Note: I have significantly simplified the code example for brevity

Currently when i run the webpack command i get a folder webpack_bundle which contains an index.js file - the index.js file includes the dependencies config.js and read.js. However, what i would like is for the read.js dependency to be bundled into the index.js file but the config.js dependency to stay external in a separate file which gets required by the bundled webpack output. So the folder webpack_bundle should contain two files after running the webpack command - index.js and config.js. I have already tried to modify the externals by adding the following key value to the externals object config: './config.js' but this did not work. I also created an extra entrypoint by specifying config.js as the entrypoint but this also did not work. I can't figure this out and the webpack docs are not that clear on how to achieve this. Please help!

Use exclude in loader array documented here https://webpack.github.io/docs/configuration.html#module-loaders — Vinod Louis, Apr 12 '17 at 11:38
I tried your suggestion but this does not achieve what im aiming for — Dev, Apr 12 '17 at 11:53

Jérémie L · Accepted Answer · 2017-04-12T12:41:25.830

7

If you want your config in a separate bundle, you can create a split point, by importing dynamically your config.js file with require.ensure:

require.ensure([], function() {
  let config = require('./config.js');
});

Your config will then be in a separate bundle.

Documentation about Code splitting (warning: Webpack 1.x is deprecated).
Documentation about Code Splitting (Webpack 2).

Edit:

If you don't want your config file to be bundled by Webpack, I think you can use IgnorePlugin:

module.exports = {
  //...
  plugins: [new webpack.IgnorePlugin(/^\.\/config\.js$/)]
}

And use copy-webpack-plugin to copy your config.js file.

edited Apr 12 '17 at 12:41

answered Apr 12 '17 at 12:01

Jérémie L

770
4
14

1

thanks but this is not what i want to achieve, although i want a separate file I dont want a separate bundle which has been processed by webpack, i want the config.js file to stay as is with no modification to it. so essentially i just want webpack to ignore the file but retain the require call to it. – Dev Apr 12 '17 at 12:31
I edited my answer. I suggest you to test the IgnorePlugin plugin. – Jérémie L Apr 12 '17 at 12:42
i have tried the ignore plugin as per your suggestion but the file still gets included by webpack and it is not ignored :( – Dev Apr 12 '17 at 13:24
1

Hi actually the ignore plugin has worked! i used `new webpack.IgnorePlugin(/config/)` and this has produced the result i wanted - it has ignore the file now i'll try the copy-webpack-plugin to get the file into the right directory. many thanks. – Dev Apr 12 '17 at 13:49
2

Setting Webpack to ignore the file and copying it will not work, I have tested it. When you set Webpack to ignore the config file, that's what it will do, so it will not find the file when you run the application on the browser, even after copying it manually as you specified. If you have something like `const config = require('../config.js')` in any place of your application, the browser will throw an error: `Uncaught Error: Cannot find module '../config'`. – Alexandre V. Dec 01 '19 at 20:38

How do i prevent a .js file being bundled by webpack

1 Answers1