Разделите ресурсы на пакеты в Production с Webpack - PullRequest
Новая
       17

Разделите ресурсы на пакеты в Production с Webpack

0 голосов
/ 08 июля 2019

Я вижу почти на каждом производственном веб-сайте, созданном в React (или почти во всех других фреймворках), что в HTML-сайт вставлены разделенные css и js-пакеты.

Я использую Webpack 4 с этой конфигурацией: 

module.exports = {
    entry: "./src/client/index.js",
    output: {
        path: outputPath,
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }, {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    devServer: {
        port: 3000,
        open: true,
        proxy: {
            '/api': 'http://localhost:8080'
        }
    },
    plugins: [
        new CleanWebpackPlugin([outputPath]),
        new HtmlWebPackPlugin({
            template: "./public/index.html"
        })
    ]
};

Но когда я создаю свой внешний интерфейс и обслуживаю его в Express, мои стили CSS помечаются <style></style> и также включаются в файл main.js. Как отделить CSS, JS и другие ресурсы друг от друга (bundle.css, bundle.js, img / image1.png и т. Д.) Вместо вставки CSS и преобразования изображений в формат base64?

1 Ответ

0 голосов
/ 08 июля 2019

Чтобы создать новый файл для css, удалите style-loader и добавьте https://github.com/webpack-contrib/mini-css-extract-plugin

Чтобы сделать то же самое с файлами, удалите url-loader и замените его на file-loader

...