Question

当我为生产构建我的反应应用程序时，会创建一个css文件，但它是空的。当我运行应用程序时，我可以看到没有CSS存在，它甚至没有与JS捆绑在一起。

如果我使用@php if(isset($selectedCondCheckbox)) { if($selectedCondCheckbox =='discount_on_total_amount_of_shipping') { echo "checked=checked"; }}@endphp运行应用程序，则会应用我的CSS。

webpack.config.js

webpack-dev-server

webpack.common.js

const buildValidations = require('./config/build-validations');
const commonConfig = require('./config/webpack/webpack.common');

const webpackMerge = require('webpack-merge');
const addons = (/* string | string[] */ addonsArg) => {
  let addons = [...[addonsArg]].filter(Boolean); // If addons is undefined, filter it out

  return addons.map(addonName => require(`./webpack.${addonName}.js`));
};

module.exports = env => {
  if (!env) {
    throw new Error(buildValidations.ERR_NO_ENV_FLAG);
  }
  const envConfig = require(`./config/webpack/webpack.${env.env}.js`);

  const mergedConfig = webpackMerge(
    commonConfig,
    envConfig,
    ...addons(env.addons)
  );

  return mergedConfig;
};

webpack.prod.js

const commonPaths = require('../common-paths');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
  context: commonPaths.appPath,
  entry: ['babel-polyfill', './index.jsx'],
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      { test: /\.(jsx?)$/, exclude: /node_modules/, use: ['babel-loader'] },
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        use: 'file-loader?name=assets/[name].[hash].[ext]',
      },
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          test: 'vendor',
          name: 'vendor',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Web App',
      template: commonPaths.projectRoot + '/public/index.html',
      inject: 'body',
    }),

    new ExtractTextPlugin({
      filename: 'static/styles.[hash].min.css',
      allChunks: true,
    }),

    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.js$|\.css$/,
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: process.env.NODE_ENV === 'prod',
    }),
    new Dotenv(),
  ],
};

index.jsx

const commonPaths = require('../common-paths');

module.exports = {
  devtool: 'none',
  mode: 'production',
  output: {
    filename: 'static/[name].[hash].min.js',
    path: commonPaths.outputPath,
  },
};

index.scss

import React, { Fragment } from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { useRouterHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import createBrowserHistory from 'history/lib/createBrowserHistory';

import store from './store';
import Router from './routes';

const historyConfig = { basename: '/foo' };
const browserHistory = useRouterHistory(createBrowserHistory)(historyConfig);
const history = syncHistoryWithStore(browserHistory, store);

import './index.scss';

render(
  <Provider store={store}>
    <Fragment>
      <Router history={history} />
    </Fragment>
  </Provider>,
  document.getElementById('root')
);

我使用执行构建 html, body, #root { height: 100%; overflow: auto; font-size: 14px; background-color: red; }

这会在我的dist "build": "yarn clean && cross-env NODE_ENV=prod webpack -p --env.env=prod",中生成一个文件，但此文件不包含从static/styles.some-random-hash.min.css文件生成的CSS。

我正在使用以下依赖项

index.scss

Answer 1

所以我已经转移到mini-css-extract-plugin，现在正在工作......

const commonPaths = require('../common-paths');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const Dotenv = require('dotenv-webpack');

module.exports = {
  context: commonPaths.appPath,
  entry: ['babel-polyfill', './index.jsx'],
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      { test: /\.(jsx?)$/, exclude: /node_modules/, use: ['babel-loader'] },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          process.env.NODE_ENV !== 'prod'
            ? 'style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        use: 'file-loader?name=assets/[name].[hash].[ext]',
      },
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          test: 'vendor',
          name: 'vendor',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Web App',
      template: commonPaths.projectRoot + '/public/index.html',
      inject: 'body',
    }),

    new MiniCssExtractPlugin({
      filename: 'static/[name].[hash].css',
      chunkFilename: 'static/[id].[hash].css',
    }),

    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.js$|\.css$/,
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: process.env.NODE_ENV === 'prod',
    }),

    new OptimizeCSSAssetsPlugin({}),
    new Dotenv(),
  ],
};

Webpack生成将css构建为空文件

1 个答案: