Webpack-dev-server 不重建包

标签 webpack-dev-server webpack-4 hot-module-replacement

非常奇怪的时刻。 我有:

webpack.hmr.config.js

// webpack.hmr.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');

const commonExportsObject = require('./webpack.common.config');
const commonEnv = commonExportsObject.commonEnv;
const path = require('path');

module.exports = {
  devtool: 'eval-source-map',
  mode: 'development',

  entry: [
    'babel-polyfill',
    'react-hot-loader/patch',
    './src/index',
  ],

  output: {
    path: path.join(__dirname, '/build/'),
    filename: 'main.js',
    publicPath: '/',
  },
  
  resolve: {
    modules: [
      path.join(__dirname, './src'),
      'node_modules',
    ],
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        loaders: [
          {
            loader: 'babel-loader',
            options: {
              babelrc: false,
              presets: ['react', ['es2015', { modules: false }], 'stage-3'],
              plugins: ['react-hot-loader/babel', 'transform-class-properties'],
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpg|gif|eot|ttf|woff|woff2|svg).*$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ],
  },

  plugins: [
    new WebpackChunkHash({ algorithm: 'md5' }),
    new HtmlWebpackPlugin({
      inject: 'body',
      filename: 'index.html',
      template: './src/index.html',
    }),
    new webpack.DefinePlugin({
      'process.env': Object.assign({}, commonEnv),
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],

  optimization: {
    namedModules: true,
    noEmitOnErrors: true,
  },
};

server-hmr.js

//server-hmr.js
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');

const config = require('./webpack.hmr.config');

const options = {
  noInfo: true,
  compress: true,
  contentBase: 'build',
  historyApiFallback: true,
  hot: true,
  port: 3000,
  host: 127.0.0.1,
  proxy: [{
    context: ['/api', '/static', '/temp_admin'],
    target: 'http://127.0.0.1:8000/',
    secure: false,
  }],
};

WebpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);

new WebpackDevServer(compiler, options).listen(3000, '127.0.0.1', (err) => {
  if (err) {
    console.error(err);
  }
});

运行它:node server-hmr.js

在控制台中: -[HMR] 等待来自 WDS 的更新信号... -[WDS] 启用热模块更换。

我更改了一些文件,但没有重建包。 (它很少起作用 о_О - 文件是相同的)。

我不知道为什么,请帮忙。有什么想法吗?

节点 - 8.9.1, "webpack-dev-server": "^3.1.5", "webpack": "^4.16.3",

最佳答案

需要更多内存:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

关于Webpack-dev-server 不重建包,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51622851/

相关文章:

reactjs - 无法让 Webpack 2 HMR React 工作

javascript - Safari 中带有商店模式的 HMR 奇怪行为 - Vue2

typescript - IE 11 - 抛出 'webpackJsonp' 未定义

javascript - 使用 webpack [request] 魔术注释将动态模块捆绑在一起

ruby-on-rails - 使用 webpack dev server 和 rails server 进行 webpack 热重载

npm - 在 monorepo 中的多个应用程序之间共享组件时如何处理共享依赖项

javascript - 使用 Vue 和 webpack Hook HMR

springboot + webpack 开发服务器,重建后不会更改 localhost 捆绑文件

Webpack 开发服务器引导两次

webpack - Less-Loader : Import URLs are being treated as relative URLs, 没有传递 --relative-url 选项