Webpack重新编译CSS但不更新

时间:2018-04-02 19:36:14

标签: javascript css webpack

使用webpack 4.1.1和webpack-dev-server我有以下webpack.dev.js文件

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


const src = path.resolve(__dirname, "../");
const build = path.resolve(__dirname, "../../build");
const components = path.resolve(__dirname, "../components");
const icons = path.resolve(__dirname, "../static/icons");
const images = path.resolve(__dirname, "../static/images");
const context = path.resolve(__dirname, 'src');

module.exports = {
  mode: 'development',
  entry: `${src}/index.js`,
  output: {
    filename: "bundle.js",
    path: build
  },
  resolve: {
    alias: {
      components: components,
      icons: icons,
      images: images
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      path: build
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        query: {
          plugins: [
            "transform-react-jsx",
            [
              "react-css-modules",
              {
                context
              }
            ]
          ]
        }
      },

      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader:'css-loader',
            options:{
              modules: true
            }
          }
        ]},
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
            },
          },
        ],
      },
      {
        test: /\.svg/,
        use: {
          loader: 'svg-url-loader',
          options: {}
        }
      }
    ]
  },
  
};

我的问题是,当我更新CSS文件时,我会看到终端,它表示它已成功编译,但是我没有看到浏览器中的更改。即使我直接导航到localhost:8080 / main.css,仍会显示旧的CSS文件。我可以让CSS成功重新编译的唯一方法是停止开发服务器并重新启动它。

FWIW,这是我的启动脚本: $ ./node_modules/.bin/webpack-dev-server --config ./src/config/webpack.dev.js --content-base build/ --content-base src/static

有人能告诉我我在这里缺少什么吗?

0 个答案:

没有答案