How to configure webpack to automatically detect changes in .css file, and also export internal bundle.js function

问题

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",
    },
...

回答1:

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",
    },

来源：https://stackoverflow.com/questions/65673922/how-to-configure-webpack-to-automatically-detect-changes-in-css-file-and-also

标签

Webpack