webpack-dev-server 配置多页面之后不能正常更新页面是为什么?

发布于 2022-09-05 22:41:02 字数 2515 浏览 8 评论 0

问题出现在改为多页面应用。entry和out 都对应的多个文件。
webpack-dev-server 启动后修改文件。
webpage提示
webpack: Compiled successfully.

webpack 配置如下

var webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var DEV = process.env.DEV;
var cwd = process.cwd();
var globby = require('globby');
var files = globby.sync(['**/pages/*'], {
  cwd: cwd + '/app'
});
var entry = {
  // vendor: []
};
files.forEach((item) => {
  entry[item + '/index'] = ['./app/' + item + '/index.js'];
});
console.log(entry);
module.exports = {
  // 页面入口文件配置
  context: cwd,
  entry,
  output: {
    path: path.resolve(__dirname, './public/build'),
    publicPath: path.resolve(__dirname, './public/build'),
    filename: '[name].js',
    chunkFilename: '[chunkhash].js'
  },
  resolve: {
    extensions: [
      '.js', '.jsx'
    ],
    alias: {
      components: path.join(__dirname, 'app/components'),
      utils: path.join(__dirname, 'app/utils'),
      style: path.join(__dirname, 'app/style'),
      pages: path.join(__dirname, 'app/pages')
    }
  },
  externals: {
    'react': 'window.React',
    'react-dom': 'window.ReactDOM',
    'reqwest': 'window.reqwest'
  },
  module: {
    // 加载器配置
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: [
            'es2015', "react"
          ],
          plugins: [
            [
              "import", {
                "libraryName": "antd",
                "style": true, // or 'css'
              }
            ]
          ]
        }
      }, {
        test: /\.css$/,
        // loader: 'style-loader!css-loader'
        loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader!postcss-loader'})
      }, {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'less-loader']
        })
      }, {
        test: /.(png)|(jpg)$/,
        loader: "url-loader?limit=50000"
      }
    ]
  },
  // devtool: '#eval-source-map', 插件项
  devServer: {
    contentBase: path.join(__dirname, "./public/"),
    host: 'localhost',
    port: 9090,
    inline: true,
    hot: false,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ExtractTextPlugin('./style/main.css'),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('dev')
      }
    })
  ]
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文