Одна точка входа, но разделение CSS на основе импортированных файлов CSS - PullRequest
Новая
       9

Одна точка входа, но разделение CSS на основе импортированных файлов CSS

0 голосов
/ 28 июня 2019

Я работаю над проектом WordPress с использованием Gutenberg, и в этом проекте есть одна точка входа JS в конфигурации Webpack с именем editor.

При попытке установить зависимости несколько компонентов импортируют файлы SCSS, которые будутбыть названным либо editor.scss, либо styles.scss, в зависимости от того, нацелены ли они на фронтэнд сайта или на редактор на бэкенде.

Я изо всех сил пытаюсь понять, как это можно сделать, используя одну записьнастройка точки, как я, Webpack объединяет все CSS, которые имеют отношение к редактору в одном файле, и все CSS, относящиеся к веб-интерфейсу в отдельном файле.

Я пробовал следующую конфигурацию, но яочевидно, что что-то не так, поскольку на выходе все еще один CSS-файл, названный в соответствии с объявленной точкой входа. 

/**
 * This file defines the configuration that is used for the production build.
 */
const { join } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const externals = require('./externals');

/**
 * Theme production build configuration.
 */
module.exports = {
  mode: 'production',
  devtool: 'hidden-source-map',
  context: process.cwd(),

  // Clean up build output
  stats: {
    all: false,
    assets: true,
    colors: true,
    errors: true,
    performance: true,
    timings: true,
    warnings: true
  },

  // Permit importing @wordpress/* packages.
  externals,

  // Optimize output bundle.
  optimization: {
    minimize: true,
    noEmitOnErrors: true
  },

  // Specify where the code comes from.
  entry: {
    editor: join(process.cwd(), 'src', 'index.js')
  },
  output: {
    pathinfo: false,
    path: join(process.cwd(), 'build'),
    filename: '[name].js'
  },

  module: {
    strictExportPresence: true,
    rules: [
      {
        // Process JS with Babel.
        test: /\.js$/,
        include: [join(process.cwd(), 'src')],
        loader: require.resolve('babel-loader')
      },
      {
        test: /styles\.s?css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              filename: 'styles.style.css',
              hmr: process.env.NODE_ENV === 'development'
            }
          },
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /editor\.s?css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              filename: 'editor.style.css',
              hmr: process.env.NODE_ENV === 'development'
            }
          },
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].style.css',
      chunkFilename: '[id].css'
    })
  ]
};

Спасибо!

1 Ответ

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

Попробуйте с этим конфигом, чтобы увидеть, работает ли он для вас 

const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

process.traceDeprecation = true;

module.exports = {
    entry: {
        ...
    },
    output: {
        path: path.resolve(__dirname, "wwwroot/dist"),
        filename: "[name].js",
        publicPath: "/dist/"
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
    ],
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }
};

Полный источник можно найти здесь

...