Webpack生成将css构建为空文件

Question

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

如果我使用webpack-dev-server运行应用程序然后我的CSS应用。

webpack.config.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.common.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(),
  ],
};

webpack.prod.js

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

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

index.jsx

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')
);

index.scss

html,
body,
#root {
  height: 100%;
  overflow: auto;
  font-size: 14px;
  background-color: red;
}

我使用"build": "yarn clean && cross-env NODE_ENV=prod webpack -p --env.env=prod", 执行构建

这会在我的dist static/styles.some-random-hash.min.css中生成一个文件，但此文件不包含从index.scss文件生成的CSS。

我使用以下依赖项

"dependencies": {
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "cors": "^2.8.4",
    "dotenv": "^6.0.0",
    "express": "^4.16.3",
    "express-static-gzip": "^0.3.2",
    "helmet": "^3.12.1",
    "history": "^3.0.0",
    "jwt-decode": "^2.2.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-loadable": "^5.4.0",
    "react-redux": "^5.0.7",
    "react-router": "^3.2.0",
    "react-router-redux": "^4.0.8",
    "redux": "^4.0.0",
    "redux-saga": "^0.16.0",
    "reselect": "^3.0.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "compression-webpack-plugin": "^1.1.11",
    "concurrently": "^3.5.1",
    "cross-env": "^5.2.0",
    "css-loader": "^0.28.11",
    "dotenv-webpack": "^1.5.7",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.0",
    "nodemon": "^1.17.5",
    "rimraf": "^2.6.2",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.6",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.3"
  }

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(),
  ],
};