Devlog

Let's update modification automatically in React using Webpack Watch attribute.

, ,

Let’s update modification automatically in React using Webpack Watch attribute.

add code below in webpack.config.js

1
watch: true

this attribution named watch is the function that can update bundle.js file automatically.

and belows is the totally code of webpack.config.js

before

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
module.exports = {
    entry: [
    './src/index.js'
    ],

    module: {
        rules: [
            {
                test: /\.(js|jsx|)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },

    output: {
    path: __dirname + '/public',
    filename: 'bundle.js'
    }
};

after

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
module.exports = {
    entry: [
    './src/index.js'
    ],

    module: {
        rules: [
            {
                test: /\.(js|jsx|)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },

    output: {
    path: __dirname + '/public',
    filename: 'bundle.js'
    },
    /////////////////////////////////////////////////////// START NEW CODE
    watch: true
    /////////////////////////////////////////////////////// END NEW CODE
};

Don’t forget to add comma between new code and previous thing.

then you can see the result below in the end when you use npm run build

1
npm run build
Share