Question

我正在尝试在我的webpack项目中使用ExtractTextPlugin。这是我的webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
   entry: './src/index.tsx',
   output: {
      path: path.resolve(__dirname, "build"),
      filename: 'bundle.js'
   },
   module: {
      rules: [
         {
            test: /\.tsx?$/,
            loader: "awesome-typescript-loader"
         },
         {
            enforce: "pre",
            test: /\.js$/,
            loader: "source-map-loader"
         },
         {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
               use: [
                  {
                     loader: "css-loader",
                     options: {
                        minimize: true
                     }
                  },
                  "sass-loader"
               ]
            })
         }
      ]
   },
   plugins: [
      new HtmlWebpackPlugin({
         template: "./index.html"
      }),
      new ExtractTextPlugin("style.css")
   ],
   devtool: "source-map",
   resolve: {
      extensions: ["js", "ts", "tsx", "*"] 
   }
}

这是package.json

{
  "name": "react-ts-todo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0"
  },
  "devDependencies": {
    "@types/react": "^16.1.0",
    "@types/react-dom": "^16.0.4",
    "awesome-typescript-loader": "^5.0.0-1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^3.1.0",
    "node-sass": "^4.8.3",
    "sass-loader": "^6.0.7",
    "source-map-loader": "^0.2.3",
    "typescript": "^2.8.1",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  }
}

但是当我npm start时，我收到了错误

[at-loader] Using typescript@2.8.1 from typescript and "tsconfig.json" from /Users/user1/IdeaProjects/react-ts-todo/tsconfig.json.
/Users/user1/IdeaProjects/react-ts-todo/node_modules/webpack/lib/Chunk.js:468
        throw new Error(
        ^
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/Users/user1/IdeaProjects/react-ts-todo/node_modules/webpack/lib/Chunk.js:468:9)
    at /Users/user1/IdeaProjects/react-ts-todo/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)
    at /Users/user1/IdeaProjects/react-ts-todo/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/user1/IdeaProjects/react-ts-todo/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/user1/IdeaProjects/react-ts-todo/node_modules/tapable/lib/Hook.js:35:21)

Answer 1

行。我在这里的对话中找到了答案

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701

显然，ExtractTextPlugin无法使用最新版本的webpack。

我用mini-css-extract-plugin替换了该插件，问题得到了解决。

工作webpack.config.js和package.json是

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
   entry: './src/index.tsx',
   output: {
      path: path.resolve(__dirname, "build"),
      filename: 'bundle.js'
   },
   module: {
      rules: [
         {
            test: /\.tsx?$/,
            loader: "awesome-typescript-loader"
         },
         {
            enforce: "pre",
            test: /\.js$/,
            loader: "source-map-loader"
         },
         {
            test: /\.scss$/,
            use: [
               MiniCssExtractPlugin.loader,
               {
                 loader: "css-loader",
                 options: {
                   modules: true,
                   sourceMap: true,
                   importLoader: 2
                 }
               },
               "sass-loader"
            ]
         }
      ]
   },
   plugins: [
      new HtmlWebpackPlugin({
         template: "./index.html"
      }),
      new MiniCssExtractPlugin({
         filename: "style.css",
         chunkFilename: "[id].css"
      })
   ],
   devtool: "source-map",
   resolve: {
      extensions: ["js", "ts", "tsx", "*"] 
   }
}

的package.json

{
  "name": "react-ts-todo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.3.0",
    "react-dom": "^16.3.0"
  },
  "devDependencies": {
    "@types/react": "^16.1.0",
    "@types/react-dom": "^16.0.4",
    "awesome-typescript-loader": "^5.0.0-1",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.1.0",
    "mini-css-extract-plugin": "^0.4.0",
    "node-sass": "^4.8.3",
    "sass-loader": "^6.0.7",
    "source-map-loader": "^0.2.3",
    "typescript": "^2.8.1",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  }
}

Answer 2

如上所述“知道不多” - 最新版本的Webpack（目前为4.5.0）。

我设法让它与下面列出的版本一起使用：

webpack-dev-server@2.11.1 webpack@3.10.0

此外还有一个alpha版本的插件，可以通过运行来安装： npm i -D extract-text-webpack-plugin @ next

链接到alpha github页面：https://github.com/webpack-contrib/extract-text-webpack-plugin/releases/tag/v4.0.0-alpha.0

无法使ExtractTextPlugin在typescript项目中工作

2 个答案: