Webpack^ 4在构建过程中未创建CSS文件

问题描述

创建一个“简单的” Webpack项目以赶上Webpack ^ 4的所有更改，但仅CSS代就有实际问题。

npm run build

"build": "webpack --mode production"仅创建一个其中包含CSS的main.js文件。

由于出现了持续的错误，我已经取出了MiniCssExtractPlugin.loader。我尝试了多种方法来添加Webpack 4的加载程序，甚至使用Webpack文档中的直接副本，我仍然遇到此拆分错误。

/Users/danielcrabbe/Learning/webpack/wp4-test-01/node_modules/mini-css-extract-plugin/dist/index.js:77
    const resource = this._identifier.split('!').pop();
                                      ^

TypeError: Cannot read property 'split' of undefined
    at CssModule.nameForCondition (/Users/danielcrabbe/Learning/webpack/wp4-test-01/node_modules/mini-css-extract-plugin/dist/index.js:77:39)

感觉就像我接近了，但显然做错了什么。任何帮助，不胜感激！

const path = require("path");
const nodeExternals = require("webpack-node-externals");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackMd5Hash = require("webpack-md5-hash");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  entry: { main: ["./src/index.js","./src/scss/main.scss"] },target: "node",externals: [nodeExternals()],module: {
    rules: [
      {
        test: /\.js$/,exclude: /node_modules/,use: {
          loader: "babel-loader",},{
        test: /\.scss$/,use: [
          {
            loader: MiniCssExtractPlugin.loader,options: {
              hmr: process.env.NODE_ENV === "development","css-loader","postcss-loader","sass-loader",],plugins: [
    new CleanWebpackPlugin("dist",{}),new MiniCssExtractPlugin({
      filename: "[name].css",chunkFilename: "[id].css",}),// new ExtractTextPlugin({
    //   filename: "style.[contenthash].css",// }),// new HtmlWebpackPlugin({
    //   inject: false,//   hash: true,//   template: "./src/index.html",//   filename: "index.html",// new WebpackMd5Hash(),output: {
    path: path.resolve(__dirname,"dist"),filename: "[name].js",};


{
   "name": "webpack-test","version": "1.0.0","description": "","main": "index.js","scripts": {
      "build": "webpack --mode production","dev": "webpack --mode development"
   },"author": "","license": "ISC","devDependencies": {
      "@babel/core": "^7.2.2","autoprefixer": "^9.4.3","babel-core": "^6.26.3","babel-loader": "^8.0.4","babel-preset-env": "^1.7.0","cache-loader": "^4.1.0","css-loader": "^4.3.0","extract-text-webpack-plugin": "^4.0.0-beta.0","html-webpack-plugin": "^3.2.0","mini-css-extract-plugin": "^0.5.0","node-sass": "^4.11.0","postcss-loader": "^3.0.0","resolve-url-loader": "^3.1.1","sass-loader": "^7.1.0","style-loader": "^1.2.1","webpack": "4.28","webpack-cli": "^3.1.2","webpack-node-externals": "^2.5.2"
   },"dependencies": {
      "clean-webpack-plugin": "^1.0.0","webpack-md5-hash": "^0.0.6"
   }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）