Question

我想创建一个包含路线，静态文件等的标准快递应用。而且我想使用Web Pack来配置我的静态文件（例如，在构建后获取最小化的CSS）。

因此，我创建了一些基本的Express应用程序，安装了Web Pack，但是关闭了某些功能，首先未应用CSS，（拒绝应用'http://localhost:3000/css/main.css'中的样式，因为它的MIME类型（'text / html' ）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。）尽管我按预期使用CSS-loader，其次我认为这是错误的，所以我希望有更多经验的人可以看一下代码，也许可以指导我找到解决此类“问题”的更好方法。

Webpack创建了捆绑包，运行快递服务器后，它实际上加载了页面，但正如我提到的那样，出现了问题。

我的webpack配置文件

const path = require('path');
const nodeExternals = require('webpack-node-externals');


module.exports = {
    entry: './app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    target: 'node',
    mode: 'development',
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },
    externals: [nodeExternals()],
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ['css-loader']
            },
        ]
    }
};

app.js文件

const path = require('path');

const express = require('express');
const bodyParser = require('body-parser');
const ejs = require("ejs").__express;
const app = express();

app.set('view engine', 'ejs');
app.set('views', 'views');
app.engine('ejs', ejs);

const shopRoutes = require('./routes/shop');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));


app.use(shopRoutes);

app.listen(3000, () => {
    console.log('I am running')
});

当视图引擎为ejs时，在Express应用程序中使用Webpack的正确方法是什么？

0 个答案: