build "module.exports = (__webpack_require__(73))(48)" code into css fle

[taikongfeizhu]

when use extract-text-webpack-plugin@4.0.0-beta.0 with webpackv4.1.1, the options set

new ExtractTextPlugin({
      filename: `css/[name].[contenthash:12].css`,
      allChunks: true
})

willl build "module.exports = (webpack_require(73))(48)" code into the css file.

[xueyou2000]

me too,
我也是.

extract-text-webpack-plugin 完成了它的任务, webpack4推荐mini-css-extract-plugin

[marc0n3]

me too, webpack 4.5.0.
Same behavior with this plugin and mini-css-extract-plugin...
As soon as I add a dynamic import to my project, Jscript of the dynamic module is added to all css

[Sebazzz]

Same issue here.

[taikongfeizhu]

I write the demo with wepback4.5 + mini-css-extract-plugin，look this repos：webpack4 demo

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

 optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true, // set to true if you want JS source maps,
        uglifyOptions: {
          warnings: false
        }
      }),
      new OptimizeCSSAssetsPlugin({})
    ],
    splitChunks:{
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'initial',
          priority: -10,
          reuseExistingChunk: false,
          test: /node_modules\/(.*)\.js/
        },
        styles: {
          name: 'styles',
          test: /\.(scss|css)$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    }
  },

module: {
    rules: [
      {
        test: /\.scss|css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader?sourceMap",
          "resolve-url-loader",
          "sass-loader?sourceMap"
        ]
      }
    ]
}

[martynchamberlin]

Same issue here. What a Wild West Webpack 4.x is...

[jharris4]

I just hit this issue as well. In the output CSS I'm seeing the following:

function webpackContext(req) {
	var id = webpackContextResolve(req);
	var module = __webpack_require__(id);
	return module;
}
function webpackContextResolve(req) {
	var id = map[req];
	if(!(id + 1)) { // check for number or string
		var e = new Error('Cannot find module "' + req + '".');
		e.code = 'MODULE_NOT_FOUND';
		throw e;
	}
	return id;
}
webpackContext.keys = function webpackContextKeys() {
	return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = 251;.navigation-container .navbar {
    padding: 0;
}

[martynchamberlin]

For what it’s worth I ended up going with MiniCssExtractPlugin instead. Works great in Webpack 4 and gets the job done until this is supported in-house with Webpack 5.

[azz1123]

I write the demo with wepback4.5 + mini-css-extract-plugin，look this repos：webpack4 demo

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

 optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true, // set to true if you want JS source maps,
        uglifyOptions: {
          warnings: false
        }
      }),
      new OptimizeCSSAssetsPlugin({})
    ],
    splitChunks:{
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'initial',
          priority: -10,
          reuseExistingChunk: false,
          test: /node_modules\/(.*)\.js/
        },
        styles: {
          name: 'styles',
          test: /\.(scss|css)$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    }
  },

module: {
    rules: [
      {
        test: /\.scss|css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader?sourceMap",
          "resolve-url-loader",
          "sass-loader?sourceMap"
        ]
      }
    ]
}

用了你的配置 这里报错是为什么ERROR in ./src/routes/Home/App.less
Module build failed (from ./node_modules/_mini-css-extract-plugin@0.4.3@mini-css-extract-plugin/dist/loader.js):
ReferenceError: window is not defined

[alexander-akait]

DEPRECATED
Please use: https://github.com/webpack-contrib/mini-css-extract-plugin