Home  >  Q&A  >  body text

javascript - webpack packages reactjs project css separation

Because the packaging volume is too large, use extract-text-webpack-plugin to extract the css into a separate file,

{
// test: /\.scss|css$/i,
test: /\.scss$/i,
use: ExtractTextPlugin.extract({
  fallback: "style-loader",
  use: [{
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
        minimize: true,
        sourceMap: true,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
    "resolve-url-loader",
    "sass-loader?sourceMap"
  ]
})
},

But we hope to only package the public css into a vendor.css, just like js packaging, there is a vendor.js.

For example, if detail.scss is added to the news details page component, it will also be packaged by the ExtractTextPlugin plug-in. Not this one

What we want.

某草草某草草2688 days ago901

reply all(1)I'll reply

  • typecho

    typecho2017-07-05 10:39:20

    Webpack configures multiple entries

    entry: {
        index: [
            'index.js',
            'index.scss'
        ],
        detail: [
            'detail.js',
            'detail.scss'
        ],
        vendor: [
            'react',
            'react-dom',
            'common.css'
        ]
    }

    reply
    0
  • Cancelreply