Search code examples
webpackwebpack-dev-serverextract-text-pluginextracttextwebpackplugin

webpack compiled successfully but extract text plugin no export content

Here is my webpack config:

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

module.exports = {
  entry: {
    index: [
      "webpack-dev-server/client?http://localhost:8081",
      "./components/index.js"
    ]
  },
  output: {
    filename: './build/dist.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract(
          {
            fallback: "style-loader",
            use: {
              loader: "css-loader",
              options: {
                modules: true,
                localIdentName: "[path][name]__[local]--[hash:base64:5]"
              }
            },
          }
        )
      }
    ]
  },
  plugins: [new ExtractTextPlugin("./build/dist.css", {allChunks: true})]
};

And webpack complied successfully enter image description here

But I can not find the dist.css file, nor I can find it in Everything software searching result.

The only weird thing before this is that webpack error says can not find module of Extract Text Plugin, but after I install it with npm install locally, it is solved.

The other parts of webpack works fine, even now, when I modify js and it will livereload to present page with right js file as it should be.

Thanks if anyone can help me.

Solution

  • webpack-dev-server saves files in memery. You can add another script in package.json without webpack-dev-server.

      "scripts": {
      "build-dev": "webpack --config ./dev.webpack.js"
  }

    And don't use entry like this webpack-dev-server/client?http://localhost:8081. Use object property. https://webpack.js.org/configuration/dev-server/