哪个是Webpack的最佳模板引擎？

Question

我已经安装了带把手的Webpack，这真是麻烦。我必须解决很多问题，最终没有使用一些Webpacks不错的插件。例如dev-server中的hotModuleReplacement。

还有其他模板引擎可以更好地与Webpack一起使用吗？使用把手，这很hacky ...

Answer 1

中的hotModuleReplacement

为了使把手与Express应用程序一起使用，我付出了很多努力。我与对我有用的东西分享：

客户端的Webpackconfig：

const path = require("path");
const webpack = require('webpack');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const HandlebarsPlugin = require("handlebars-webpack-plugin");

module.exports = {
    entry: {
        main: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', './assets/js/main.js'],
        index: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', './assets/js/index.js']
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        filename: 'public/[name].js'
    },
    watch: true,
    mode: 'development',
    target: 'web',
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
            {
                test: /\.html$/,
                use: [{loader: "html-loader"}]
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./views/index.hbs",
            filename: "./public/index.hbs",
            chunks: ['index']
        }),
        new HtmlWebPackPlugin({
            template: "./views/error.hbs",
            filename: "./public/error.hbs"
        }),
        new HtmlWebPackPlugin({
            template: "./views/layout.hbs",
            filename: "./public/layout.hbs",
            chunks: ['main']
        }),
        // Make the handlebars file build for partials (components element)
        new HandlebarsPlugin({
            // path to hbs entry file(s). Also supports nested directories if write path.join(process.cwd(), "app", "src", "**", "*.hbs"),
            entry: path.join(process.cwd(), "views", "partials", "*.hbs"),
            // output path and filename(s). This should lie within the webpacks output-folder
            // if ommited, the input filepath stripped of its extension will be used
            output: path.join(process.cwd(), "dist/public/partials", "[name].hbs"),
            // you can als add a [path] variable, which will emit the files with their relative path, like
            // output: path.join(process.cwd(), "build", [path], "[name].html"),
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
}

服务器的webpack.config：

const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
module.exports = {
    entry: {
        server: './src/index.js', // must be in src directory to be build
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        filename: '[name].js'
    },
    mode: 'development',
    target: 'node',
    node: {
        console: true,
        // Need this when working with express, otherwise the build fails
        __dirname: false,   // if you don't put this is, __dirname
        __filename: false,  // and __filename return blank or /
    },
    externals: [nodeExternals()], // Need this to avoid error when working with Express
    module: {
        rules: [
            {
                // Transpiles ES6-8 into ES5
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
}

服务器文件的摘录：

const router = require("./router.js");
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var sassMiddleware = require('node-sass-middleware');
const hbs = require( 'express-handlebars' );
// webpack
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const configWebpack = require('../webpack.config.js');
const configWebpackServer = require('../webpack.server.config.js');


const app = express(),
    compiler = webpack(configWebpack);
// Must match the directory that webpack build
// Indicate the layout and partials directories
app.engine( 'hbs', hbs( {
  extname: 'hbs',
  defaultLayout: 'layout',
  layoutsDir: __dirname + '/public/',
  partialsDir: __dirname + '/public/partials/'
} ) );

// view engine setup, must match the directory that webpack build
app.set('views', path.join(__dirname, 'public'));
app.set('view engine', 'hbs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(sassMiddleware({
  src: path.join(__dirname, 'public'),
  dest: path.join(__dirname, 'public'),
  indentedSyntax: true, // true = .sass and false = .scss
  sourceMap: true
}));

app.use(webpackDevMiddleware(compiler, {
  publicPath: configWebpack.output.publicPath
}));
app.use(webpackHotMiddleware(compiler));
app.use(express.static(path.join(__dirname, 'public')));
app.use(router);

[...]

示例：路由器

const express = require('express');
const router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index', { title: 'test' });
});

/* GET users listing. */
router.get('/', function(req, res, next) {
    res.send('respond with a resource');
});

module.exports = router;

views / index / index.hbs（在服务器中）

{{> name_of_a_partial }} // If needed, must be in a directory views/partials/ 
<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>