0

I use webpack to transpile the code.
I have the following requirements:

  • requirement1 - webpack needs to detect changes in the .css, .js files (without importing the .css file from the .js file) and automatically rebuild
  • requirement2 - An outer .html file should call an internal bundle.js function

I can achieve each of the requirements separately but not together.
What should to achieve these requirements at the same time?

Thanks

Setting for requirement1:
To achieve requirement1 I followed the instructions in here
With this setting:

  • If I change the .css file, webpack automatically rebuilds the code
  • But I can not access a function in bundle.js from an external .html

The webpack config file:

cat ~/avner/constructionOverlay/code/meshlabjs/branches/meshlabjs_avnerV1/webpack/webpack.config.js
...
module.exports = {
    context: path.resolve('js/dir1/'),

    // option1 - webback detects changes in the .css file, 
    //           but an internal bundle.js function can be called from the outside via e.g. lib1.func1()
    entry:{
        index: [
            './main.js',
            "../../css/style.css"
        ]
    },

    output: {
        path: path.resolve('build/lib'),
        publicPath: 'build',
        filename: 'bundle.js',
        library: "lib1",
        libraryTarget: "umd",
    },
...

Setting for requirement2:
To achieve requirement2 I followed the instructions in here

With this setting:

  • I can access a function in bundle.js from an external .html
  • But if I change the .css file, webpack does not automatically rebuild.

The webpack config file:

cat ~/avner/constructionOverlay/code/meshlabjs/branches/meshlabjs_avnerV1/webpack/webpack.config.js
...
module.exports = {
    context: path.resolve('js/dir1/'),

    // option2 - webback does not detect changes in the .css file
    //           but an internal bundle.js function can be called from the outside via e.g. lib1.func1()
    entry: './main.js',

    output: {
        path: path.resolve('build/lib'),
        publicPath: 'build',
        filename: 'bundle.js',
        library: "lib1",
        libraryTarget: "umd",
    },
...
Avner Moshkovitz
  • 1,138
  • 1
  • 18
  • 35

1 Answers1

0

I followed this tutorial to create multiple entries (it creates an unused bundle file: css.bundle.js)

With the following setting (option3), I can achieve the 2 requirements together.
(note the changes to the entry, and output.filename fields).

cat ~/avner/constructionOverlay/code/meshlabjs/branches/meshlabjs_avnerV1/webpack/webpack.config.js
...
module.exports = {
    context: path.resolve('js/dir1/'),


    // option3 - webback detects changes in the .css file, and
    //           an internal bundle.js function can be called from the outside via e.g. lib1.func1()
    entry: {
        app: './main.js',
        css: "../../css/style.css"
    },
    
    output: {
        // the output file bundle.js is placed in the path "build/dir1/"
        path: path.resolve('build/dir1'),
        publicPath: 'build',
        filename: "./[name].bundle.js" ,
        library: "lib1",
        libraryTarget: "umd",
    },
Avner Moshkovitz
  • 1,138
  • 1
  • 18
  • 35