Question

entry: {
    vender: [
        'react',
        'react-dom',
        'eslint-plugin-react',
    ],
},

上面的代码段似乎是我的问题的原因。此代码示例是我的webpack.config.js文件的一部分。如果我为这个应用程序运行yarn build，它将删除我通过ExtractTextWebpackPlugin（我的代码中的ETP）创建的CSS文件。如果我注释掉上面的代码部分，那么在运行build之后，CSS文件就会出现在公共目录中。有人会碰巧知道如何解决这个问题。

const ETP = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const parts = require('./webpack.parts');
const path = require('path');
const webpack = require('webpack');
const glob = require('glob');

const PATHS = {
  public: path.join(__dirname, 'public'),
  src: path.join(__dirname, 'src'),
  styles: path.join(__dirname, 'src', 'scss'),
};

const options = {
  host: 'localhost',
  port: '8085',
};

const commonConfig = merge([
  {
    entry: PATHS.src,
    output: {
      path: PATHS.public,
      filename: '[name].bundle.js',
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Jason Ganz Portfolio',
        template: path.join(PATHS.src, 'index.html'),
      }),
      new OpenBrowserPlugin({
        url: `http://${options.host}:${options.port}`,
      }),
      new ETP('style.css'),
      new webpack.LoaderOptionsPlugin({
        options: {
          eslint: {
            failOnWarning: false,
            failOnError: true,
            fix: false,

            //       // Output to Jenkins compatible XML
            //       // outputReport: {
            //       //     filePath: 'checkstyle.xml',
            //       //     formatter: require('eslint/lib/formatters/checkstyle'),
            //       // },
          },
        },
      }),
      parts.purifyCSS({
        paths: glob.sync(`${PATHS.src}/**/*.js`, {nodir: true}),
      }),
    ],
  },
  parts.loadSASS(PATHS.styles),
  parts.loadJSX(),


]);

const productionConfig = merge([
  //Generates Source Maps for js files
  parts.generateSourceMaps({ type: 'source-map' }),
  {
    entry: {
      vender: [
        'react',
        'react-dom',
        'eslint-plugin-react',
      ],
    },
    plugins: [ new webpack.optimize.CommonsChunkPlugin({name: 'vendor'})],
  },
]);

const developmentConfig = merge([
  parts.devServer({
    host: options.host,
    port: options.port,
    path: PATHS.public,
  }),
  {
    output: {
      devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]',
    },
  },
  parts.generateSourceMaps({ type: 'cheap-module-eval-source-map' }),
]);

module.exports = (env) => {
  if(env == 'development') {
    return merge(commonConfig, developmentConfig);
  }

  return merge(commonConfig, productionConfig);
};

我的加载器和模块存储在一个单独的webpack.parts.js文件中，可以在下面看到。

const ETP = require('extract-text-webpack-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');

exports.devServer = ({host, port, path} = {})=> ({
  devServer: {
    compress: true,
    contentBase: path,
    historyApiFallback: true,
    host,
    port,
    overlay: {
      errors: true,
      warnings: true,
    },
    stats: 'errors-only',
  },
});

exports.generateSourceMaps = ({ type }) => ({
  devtool: type,
});

exports.loadCSS = () => ({
  module:{
    loaders: [{
      test: /\.css$/,
      loader: ['style-loader','css-loader'],
    }],
  },
});

exports.loadJSX = () => ({
  module:{
    loaders: [{
      test: /\.(js|jsx)$/,
      exclude: '/node_modules/',
      loader: 'babel-loader',
    }],
  },
});

exports.loadSASS = (path) => ({
  module: {
    loaders: [{
      test: /\.(css|sass|scss)$/,
      loader: ETP.extract({
        fallback: 'style-loader',
        use: 'css-loader!postcss-loader!sass-loader',
      }),
      include: path,
    }],
  },
});


exports.purifyCSS = ({ paths }) => (new PurifyCSSPlugin({paths}))

Answer 1

您正在输入属性

中写“vender”而不是“vendor”

Webpack中的供应商正在禁用我的CSS

1 个答案: