Question

关于Webpack开发服务器如何模拟作为html文件依赖项的输出.js文件，我一直有个挥之不去的问题。当前的问题凸显了这种缺乏了解。

这里是public/admin.html

的一部分

<h1>admin.html</h1> // displays as expected
<div id="reactAdminDiv"></div>
<script src="adminArea.output.js"></script> // GET http://localhost:3000/adminArea.output.js net::ERR_ABORTED 404 (Not Found)

来自AdminAreaFull.tsx

ReactDOM.render(<AdminAreaFull />, document.getElementById("reactAdminDiv"));

还有我的webpack.config.js：

const webpackConfiguration = {
  entry : {
    productFlow : "./frontEnd/productFlow/index.tsx"
    , adminArea : "./adminArea/AdminAreaFull.tsx"
  }
  , output : {
    filename : "public/[name].output.js"
    , path : path.join(__dirname, "public")
  }
  , watch : true
  // , watchOptions : { aggregateTimeout : 300 }
  , devtool : 'inline-source-map'
  , mode : "development"
  , devServer : {
    port: 3000
    , contentBase : ['./public']
    , hot : true
    , historyApiFallback : true
  }
  , plugins : [
    new webpack.HotModuleReplacementPlugin(),
    new dotEnvWebpack
  ]
  , node : {
    fs: "empty" // for dotenv to work correctly
  }
  , resolve : { extensions : ['.ts', '.tsx', '.js'] }
  , module : {
      rules : [
        {
        test : /\.ts(x?)$/
        , use : {
          loader: 'awesome-typescript-loader'
        }
        , exclude : [/node_modules/, /outputScripts/, /\.dependabot/, /\.next/, /\.idea/, /lib/, /pages/, /\.dependabot/]
      }, {
        enforce : 'pre'
          , test : /\.js$/
          , loader : 'source-map-loader'
        }
      ]
  }
};

在终端上运行webpack-dev-server时

｢wds｣: Project is running at http://localhost:3000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/owner/PhpstormProjects/shopify/buyUsed/public
ℹ ｢wds｣: 404s will fallback to /index.html

我想我的输出设置不正确，或者devServer下可能配置错误。任何指针将不胜感激。

Answer 1

我认为您可以尝试为devServer设置不同的contentBase：尝试

contentBase: [path.join(__dirname, "public")]

Answer 2

修正

运行import random from itertools import count import matplotlib.pyplot as plt import pandas as pd from matplotlib.animation import FuncAnimation plt.style.use('fivethirtyeight') pathfile = "data_anim.csv" fig, ax = plt.subplots() lines = [ ax.plot([], [], marker="o", label='Channel 1')[0], # carefull here to get obj[0] because matplotlib.lines.Line2D is a list ax.plot([], [], marker="o", label='Channel 2')[0] ] plt.legend(loc='upper left') plt.tight_layout() def read_data(): " Function to read your dataframe and return values """ data = pd.read_csv(pathfile) x = data['x_value'] y1 = data['total_1'] y2 = data['total_2'] return x, y1, y2 def init(): """ Init your lines """ for line in lines: print(line) line.set_data([],[]) return lines def animate(i): """ Function to update data for your lines """ x, y1, y2 = read_data() lines[0].set_data(x[:i], y1[:i]) lines[1].set_data(x[:i], y2[:i]) ax.relim() # reset intern limits of the current axes ax.autoscale_view() return lines if __name__ == '__main__': ani = FuncAnimation( fig, animate, init_func=init, interval = 1000, blit=False # need to be on false to redraw and adapt axis each time ) plt.show()来构建捆绑文件。
重新运行npx webpack

它将从那里自动更新。重要的是，必须在使用webpack开发服务器之前生成输出文件

webpack-dev-server：找不到输出文件404

2 个答案: