如何配置 webpack 自动检测 .css 文件的变化，同时导出内部的 bundle.js 函数 [英] How to configure webpack to automatically detect changes in .css file, and also export internal bundle.js function

问题描述

我使用 webpack 来转译代码.
我有以下要求:

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

• requirement1 - webpack 需要检测 .css、.js 文件中的变化(无需从 .js 文件导入 .css 文件)并自动重建
• requirement2 - 外部 .html 文件应调用内部 bundle.js 函数

我可以单独实现每个要求，但不能一起实现.
同时满足这些要求应该怎么做?

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

谢谢

需求1的设置:
为了达到要求 1，我按照 这里
使用此设置:

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

• 如果我更改了 .css 文件，webpack 会自动重新构建代码
• 但我无法从外部 .html 访问 bundle.js 中的函数

webpack 配置文件:

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

---

需求2的设置:
为了达到要求 2，我按照 这里

使用此设置:

• 我可以从外部 .html 访问 bundle.js 中的函数
• 但是如果我更改 .css 文件，webpack 不会自动重建.

webpack 配置文件:

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

推荐答案

我关注了 this 教程创建多个条目(它创建一个未使用的包文件:css.bundle.js)

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

通过以下设置(选项3)，我可以同时实现2个要求.
(注意对 entry 和 output.filename 字段的更改).

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

这篇关于如何配置 webpack 自动检测 .css 文件的变化，同时导出内部的 bundle.js 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！