Templates 使用ejs重建网页包开发服务器_Templates_Webpack_Ejs_Webpack Dev Server_Rebuild

Templates 使用ejs重建网页包开发服务器

templates webpack

Templates 使用ejs重建网页包开发服务器,templates,webpack,ejs,webpack-dev-server,rebuild,Templates,Webpack,Ejs,Webpack Dev Server,Rebuild,我正在将webpack dev server与此配置一起使用： import webpack from 'webpack'; import autoprefixer from 'autoprefixer'; import ExtractTextPlugin from 'extract-text-webpack-plugin'; import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; import Ht

我正在将webpack dev server与此配置一起使用：

import webpack from 'webpack';
import autoprefixer from 'autoprefixer';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const exports = {
    devtool: 'cheap-module-source-map',
    entry: {
        bundle: `${__dirname}/src/main.ejs`,
        commons: [
            'lodash',
            'webpack-dev-server/client?http://localhost:8090',
            'webpack/hot/only-dev-server'
        ]
    },
    module: {
        rules: [
            {
                test: /\.(js)?$/,
                include: `${__dirname}/src`,
                loader: 'babel-loader'
            }, {
                test: /\.(scss|css)$/,
                include: [
                    `${__dirname}/src`
                ],
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader', 'sass-loader']
                })
            },  {
                test: /\.(ejs)$/,
                include: `${__dirname}/src`,
                use: 'ejs-render-loader'
            }, {
                test: /\.(png|jpg|gif)$/,
                include: [
                    `${__dirname}/src`
                ],
                loader: 'file-loader'
            }, {
                test: /\.svg/,
                include: [
                    `${__dirname}/src`
                ],
                loader: 'file-loader?mimetype=image/svg+xml'
            }, {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                include: [
                    `${__dirname}/src`
                ],
                loader: 'file-loader?mimetype=application/font-woff'
            }, {
                test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                include: [
                    `${__dirname}/src`
                ],
                loader: 'file-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.ejs', '.scss']
    },
    output: {
        path: `${__dirname}/dist`,
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: `${__dirname}/dist`,
        publicPath: 'http://localhost:8090',
        hot: true,
        historyApiFallback: true,
        host: 'localhost',
        port: 8090,
        inline: true
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'commons',
            filename: 'commons.js',
            minChunks: Infinity

        }),
        new CaseSensitivePathsPlugin(),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [autoprefixer({
                    browsers: [
                        'last 2 Chrome versions',
                        'last 2 Firefox versions',
                        'last 2 edge versions',
                        'IE >= 9',
                        'Safari >= 7',
                        'iOS >= 7'
                    ]
                })]
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            hash: true,
            template: 'src/main.ejs'
        })
    ]
};

module.exports = exports;

我的

main.ejs

文件如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" />
    <title>Webpack App</title>
</head>
<body>
    <div id="app">
        <% include components/navigation/navigation.ejs %>
    </div>
</body>
</html>


网页包应用程序

情况是，当我的任何其他

.ejs

文件发生更改时（例如

components/navigation/navigation.ejs

，我在

main.ejs

中包含了

components/navigation.ejs

），webpack dev服务器不会重建，它只在我对

main.ejs

文件应用任何更改时重建。我在网上搜索了这个问题的解决方案，但没有成功。

在监视模式下运行它：

$webpack dev server--观看

或者在

webpack.config.js

中：

devServer:{
watchContentBase：是的，
}

我遇到了一个类似的问题，我找到了解决方案，我会让您知道。您找到解决方案了吗？不久前，我在搜索时只找到了一些信息，这只是.ejs扩展的问题，这是一个bug。尚未解决…此问题现在与.html扩展名有关。非常困惑