How to use the extract-css-chunks-webpack-plugin.extract function in extract-css-chunks-webpack-plugin

To help you get started, we’ve selected a few extract-css-chunks-webpack-plugin examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github sebastian-software / edge / packages / edge-boilerplate / webpack / builder.js View on Github external
use: [
            cacheLoader,
            {
              loader: "babel-loader",
              options: {
                ...(isProduction ? productionBabelOptions : developmentBabelOptions),
                babelrc: false
              }
            }
          ].filter(Boolean)
        },

        // Use either
        {
          test: postcssFiles,
          use: isClient ? ExtractCssChunks.extract({
            use: [
              cacheLoader,
              {
                loader: "css-loader",
                options: cssLoaderOptions
              },
              postCSSLoaderRule
            ].filter(Boolean)
          }) : [
            cacheLoader,
            {
              loader: "css-loader/locals",
              options: cssLoaderOptions
            },
            postCSSLoaderRule
          ].filter(Boolean)
github faceyspacey / flush-chunks-boilerplate / webpack / client.prod.js View on Github external
}
              ]
            ]
          }
        }
      },
      // remove above babel-loader and uncomment this if you are rendering the
      // server with Babel and not using "css-modules-transform" in .babelrc:
      // {
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   use: 'babel-loader',
      // },
      {
        test: /\.css$/,
        use: ExtractCssChunks.extract({
          use: 'css-loader?modules&localIdentName=[name]__[local]--[hash:base64:5]'
        })
      }
    ]
  },
  plugins: [
    new ExtractCssChunks(),
    new webpack.HashedModuleIdsPlugin(), // only needed when server built with webpack
    new webpack.optimize.CommonsChunkPlugin({
      names: ['bootstrap'], // needed to put webpack bootstrap code before chunks
      filename: '[name].[chunkhash].js',
      minChunks: Infinity
    }),
    new StatsPlugin('stats.json'),

    new webpack.DefinePlugin({
github faceyspacey / redux-first-router-demo / webpack / client.dev.js View on Github external
output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: path.resolve(__dirname, '../buildClient'),
    publicPath: '/static/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ExtractCssChunks.extract({
          use: {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          }
        })
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.css']
  },
  plugins: [
    new WriteFilePlugin(), // used so you can see what chunks are produced in dev
github faceyspacey / flush-chunks-boilerplate / webpack / client.dev.js View on Github external
}
              ]
            ]
          }
        }
      },
      // remove above and uncomment this if you are not using
      // "css-modules-transform" in .babelrc:
      // {
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   use: 'babel-loader',
      // },
      {
        test: /\.css$/,
        use: ExtractCssChunks.extract({
          use: 'css-loader?modules&localIdentName=[name]__[local]--[hash:base64:5]'
        })
      }
    ]
  },
  plugins: [
    new ExtractCssChunks(),
    new webpack.NamedModulesPlugin(), // only needed when server built with webpack
    new webpack.optimize.CommonsChunkPlugin({
      names: ['bootstrap'], // needed to put webpack bootstrap code before chunks
      filename: '[name].js',
      minChunks: Infinity
    }),

    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
github timkindberg / egghead-universal-component / 01_minimum_required_config / webpack / client.dev.js View on Github external
// REQUIRED: webpackHotServerMiddleware is expecting two webpack configs,
  // one with a name 'client', one with a name 'server'.
  name: 'client',
  // Target browsers for our client config
  target: 'web',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        // REQUIRED: Extract css files into their own chunks
        use: ExtractCssChunks.extract({
          use: 'css-loader'
        })
      }
    ]
  },
  devtool: 'eval',
  entry: path.resolve(__dirname, '../src/index.js'),
  output: {
    // REQUIRED: file and chunk names should match
    filename: '[name].js',
    chunkFilename: '[name].js',
    // REQUIRED: where to write files to
    path: path.resolve(__dirname, '../buildClient'),
    // REQUIRED: where files will be served from
    publicPath: '/static/'
  },
github strues / boldr / packages / tools / src / createWebpackConfig.js View on Github external
].filter(Boolean),
              })
            : [
                cacheLoaderRule,
                {
                  loader: require.resolve('css-loader/locals'),
                  options: cssLoaderOptions,
                },
                postCSSLoaderRule,
              ].filter(Boolean),
        },
        {
          test: /\.scss$/,
          include: SRC_DIR,
          use: _IS_CLIENT_
            ? ExtractCssChunks.extract({
                use: [
                  cacheLoaderRule,
                  {
                    loader: require.resolve('css-loader'),
                    options: cssLoaderSassOptions,
                  },
                  postCSSLoaderRule,
                  sassLoaderRule,
                ].filter(Boolean),
              })
            : [
                cacheLoaderRule,
                {
                  loader: require.resolve('css-loader/locals'),
                  options: cssLoaderSassOptions,
                },
github cescoferraro / react-boil / internal / webpack / loaders.js View on Github external
const CLIENT_LOADERS = (env)=>{
    let loader = [
	{ test: /\.tsx?$/, exclude: /node_modules/, loader: "awesome-typescript-loader" ,
          options: {
              sourceMap: true, 
              useCache: true, 
              useBabel: false 
          }
},
	{
	    test: /\.css$/,
	    use: ExtractCssChunks.extract({
		use: {
		    loader: 'css-loader',
		    options: {
			modules: true,
			localIdentName: '[name]__[local]--[hash:base64:5]'
		    }
		}
	    })
	}
    ]
    return {rules:loader}
};
github lakshyaranganath / pwa / webpack.client.js View on Github external
publicPath: __PWA_PUBLIC_PATH__,
    filename: isProd ? 'js/[name].[chunkhash:8].js' : 'js/[name].js',
    chunkFilename: isProd ? 'js/[name].[chunkhash:8].js' : 'js/[name].js',
  },

  resolve: {
    alias: {
      react: 'preact-compat',
      'react-dom': 'preact-compat',
    },
  },

  module: {
    rules: isProd ? [
      { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] },
      { test: /\.css$/, loader: ExtractCssChunks.extract({ use: [{ loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'] }) },
      { test: /\.(gif|png|jpe?g|svg|ico)$/i, use: [{ loader: 'file-loader', options: { name: 'images/[name].[hash:8].[ext]' } }] },
      { test: /\.(woff(2)?|ttf|otf|eot)(\?[a-z0-9=&.]+)?$/, use: [{ loader: 'url-loader', options: { limit: 1000, name: 'fonts/[name].[hash:8].[ext]' } }] },
    ] : [
      { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] },
      { test: /\.css$/, use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'] },
      { test: /\.(gif|png|jpe?g|svg|ico)$/i, use: [{ loader: 'file-loader', options: { name: 'images/[name].[ext]' } }] },
      { test: /\.(woff(2)?|ttf|otf|eot)(\?[a-z0-9=&.]+)?$/, use: [{ loader: 'url-loader', options: { limit: 1000, name: 'fonts/[name].[ext]' } }] },
    ],
  },

  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new CleanWebpackPlugin(['./build/client']),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': isProd ? '"production"' : '"development"',
github timkindberg / egghead-universal-component / XX_full_mvp / webpack / client.dev.js View on Github external
output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: path.resolve(__dirname, '../buildClient'),
    publicPath: '/static/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.styl$/,
        use: ExtractCssChunks.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                modules: true,
                localIdentName: '[name]__[local]--[hash:base64:5]'
              }
            },
            {
              loader: 'stylus-loader'
            }
          ]
        })
      }
    ]
  },
github faceyspacey / redux-first-router-demo / webpack / client.prod.js View on Github external
output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, '../buildClient'),
    publicPath: '/static/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ExtractCssChunks.extract({
          use: {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          }
        })
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.css']
  },
  plugins: [
    new StatsPlugin('stats.json'),

extract-css-chunks-webpack-plugin

Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4 + SSR

MIT
Latest version published 8 months ago

Package Health Score

70 / 100
Full package analysis