webpack编译成功但提取文本插件没有导出内容答案

【问题标题】：webpack compiled successfully but extract text plugin no export contentwebpack编译成功但提取文本插件没有导出内容
【发布时间】：2017-07-19 12:40:55
【问题描述】：

这是我的 webpack 配置：

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})]
};

并且 webpack 编译成功

但是我找不到 dist.css 文件，在 Everything 软件搜索结果中也找不到。

在此之前唯一奇怪的是webpack错误说找不到Extract Text Plugin的模块，但是我用npm install本地安装后，它就解决了。

webpack 的其他部分工作正常，即使是现在，当我修改 js 时，它会 livereload 以显示正确的 js 文件的页面。

如果有人可以帮助我，谢谢。

【问题讨论】：

标签： webpack webpack-dev-server extract-text-plugin extracttextwebpackplugin

【解决方案1】：

webpack-dev-server 将文件保存在内存中。您可以在 package.json 中添加另一个脚本，而无需 webpack-dev-server。

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

并且不要使用像webpack-dev-server/client?http://localhost:8081 这样的条目。使用对象属性。 https://webpack.js.org/configuration/dev-server/

【讨论】：

感谢您的好回答，它完全有效。我想问的另一件事是，现在每次在 webpack dev server livereload 之后，Dist.css 仍然是旧的，没有更新源文件，但是浏览器中的页面已经更新了 css 文件。就像，我将高度从 100px 更改为 200px，在 Chrome 中检查说它在 dist.css xx 行中是 200px，但在真正的 dist.css 文件中，它仍然是 100px，除非我终止服务并手动使用 webpack，是那也是因为 webpack-dev-server 将文件保存在内存中？
@FadeocKhaos 你摆脱了webpack-dev-server/client?http://localhost:8081 吗？尝试删除 dist 并在没有dev server 的情况下再次调用它。