Question

Webpack在保存它们时不会重新编译任何部分文件，除非我在主文件（index.ejs）上点击“保存”。其他所有内容都按预期工作，但我不知道如何使我的部分重新编译整个应用程序。我正在使用webpack-dev-server进行开发，并使用ejs-webpack-loader用于ejs编译。

package.json：

"scripts": {
    "watch": "webpack --env.NODE_ENV=development --watch --progress --hide-modules",
    "start": "webpack-dev-server --env.NODE_ENV=development --open",
    "build": "webpack --env.NODE_ENV=production --env.production --progress"
  }
"devDependencies": {
    ...
    "ejs-webpack-loader": "^2.2.2",
    "webpack": "^4.41.2",
    "webpack-dev-server": "^3.9.0",
    ...
  }

webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = env => {
    return {
        entry: './src/app.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'app.min.js'
        },
        mode: env.NODE_ENV,
        devServer: {
            contentBase: './dist',
        },
        module: {
            rules: [
                {
                    test: /\.ejs$/,
                    use: [
                        {
                            loader: "ejs-webpack-loader",
                            options: {
                                data: { },
                                htmlmin: env.production
                            }
                        }
                    ]
                },
                {
                    test: /\.js$/,
                    exclude: '/node_modules/',
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    test: /\.s[ac]ss$/i,
                    use: [
                        'style-loader',
                        'css-loader',
                        'sass-loader'
                    ]
                }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({
                'process.env': {
                    'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
                },

            }),
            new HtmlWebpackPlugin({
                template: '!!ejs-webpack-loader!src/index.ejs'
            })
        ]
    }
};

index.ejs：

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Used listing</title>
    </head>

    <body>
        <div class="main container-fluid">
            <% include ./toolbar %>

            <div class="main-content">
                <div class="row">
                    <div class="col col-2">
                        <% include ./sidebar %>
                    </div>

                    <div class="col col-10">
                        <% include ./listing %>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

部分是纯HTML格式的ejs文件。

编辑： 我尝试了以下解决方案，但未成功：webpack-dev-server rebuild with ejs

保存部分文件（ejs）时，Webpack不会重新编译

0 个答案: