diff --git a/demo/package.json b/demo/package.json
index 08b186d..ae4966e 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -96,8 +96,9 @@
    "sass": "^1.34.1",
    "sass-loader": "^12.0.0",
    "style-loader": "^2.0.0",
    "ts-loader": "^9.2.2",
    "webpack-node-externals": "^3.0.0",
    "typescript": "^4.2.3"
  },
  "dependencies": {
    "@electron/remote": "^1.1.0",
diff --git a/demo/webpack.dev_check.js b/demo/webpack.dev_check.js
new file mode 100644
index 0000000..3e7c784
--- /dev/null
+++ b/demo/webpack.dev_check.js
@@ -0,0 +1,12 @@
// 是否为开发环境
let is_dev = null;
// this is a `hack` for check env
if (process.env["WEBPACK_SERVE"] === 'true') {
    console.info("\n\n\nrunning under yarn start  [in dev mode]...\n\n");
    is_dev = true;
} else {
    console.info("\n\n\nrunning in production mode\n\n");
    is_dev = false;
}

module.exports = is_dev;
diff --git a/demo/webpack.main.config.js b/demo/webpack.main.config.js
index 2978247..aa7d683 100644
--- a/demo/webpack.main.config.js
+++ b/demo/webpack.main.config.js
@@ -1,5 +1,13 @@
const CopyPluginnodeExternals = require("copy-webpack-plugin");require('webpack-node-externals');

const is_dev = require('./webpack.dev_check');

let externals = {};
// for development [exclude all node_modules]
if (is_dev) {
    externals = [nodeExternals()];
}

module.exports = {
    target: 'electron-main',

@@ -11,11 +19,12 @@ module.exports = {
     * that runs in the main process.
     */
    entry: './src/index.ts',
    // Put your normal webpack index below here
    module:    {
        rules: require('./webpack.rules'),
    },
    resolve:   {
        extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
    },
    externals: externals,
};
diff --git a/demo/webpack.renderer.config.js b/demo/webpack.renderer.config.js
index 3151625..52f7366 100644
--- a/demo/webpack.renderer.config.js
+++ b/demo/webpack.renderer.config.js
@@ -1,14 +1,23 @@
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const nodeExternals = require('webpack-node-externals');

const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');

const is_dev = require('./webpack.dev_check');

rules.push({
    test: /\.css$/,
    use:  [{loader: 'style-loader'}, {loader: 'css-loader'}],
});

let externals = {};
// for development
if (is_dev) {
    externals = [nodeExternals({allowlist: ['bulma/css/bulma.css']})];
}

module.exports = {

    target: 'electron-renderer',

@@ -21,5 +30,6 @@ module.exports = {
    plugins: [...plugins, new NodePolyfillPlugin({excludeAliases: ['process']})],
    resolve: {
        extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
    },
    externals: externals,
};
diff --git a/demo/yarn.lock b/demo/yarn.lock
index ef3123d..e304d94 100644
--- a/demo/yarn.lock
+++ b/demo/yarn.lock
@@ -7317,8 +7317,13 @@ webpack-merge@^5.7.3:
  dependencies:
    clone-deep "^4.0.1"
    wildcard "^2.0.0"

webpack-node-externals@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz#1a3407c158d547a9feb4229a9e3385b7b60c9917"
  integrity sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==

webpack-sources@^2.3.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-2.3.0.tgz#9ed2de69b25143a4c18847586ad9eccb19278cfa"
  integrity sha512-WyOdtwSvOML1kbgtXbTDnEW0jkJ7hZr/bDByIwszhWd/4XX1A3XMkrbFMsuH4+/MfLlZCUzlAdg4r7jaGKEIgQ==