0

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.

GLPease
  • 545
  • 1
  • 8
  • 19

1 Answers1

1

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/

Stanislav Mayorov
  • 4,298
  • 5
  • 21
  • 44
  • Thanks for the nice answer, it totally works. One another thing I would like to ask about, that now everytime after webpack dev server livereload, the Dist.css is still the old one without updating with the source files, but the page in browser has updated the css file. Like, I change a height from 100px to 200px, inspection in Chrome says it is 200px in dist.css xx line, but in the real dist.css file, it is still 100px, unless I end the service and use webpack manually, is that also because the webpack-dev-server saves files in memory? – GLPease Jul 20 '17 at 01:11
  • @FadeocKhaos did you get rid of `webpack-dev-server/client?http://localhost:8081`? try to delete dist and invoke it again without `dev server`. – Stanislav Mayorov Jul 20 '17 at 06:58