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