代码之家 › 专栏 › 技术社区 › Igor Chernega

Web包开发服务器无法加载资源

webpack-dev-server webpack

Igor Chernega · 技术社区 · 6 年前

问题是我犯了这个错误 Failed to load resource: the server responded with a status of 404 (Not Found) 当我使用Web包开发服务器时。但是如果我只是构建项目,那么我就可以运行我的 index.html 并得到了预期的结果。我的项目结构是:

public/
  index.html
  assets/
src/
  index.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>PBWA</title>
</head>
<body>
  <div id="root"></div>
</body>
<script src="assets/bundle.js"></script>
</html>

以下是网页包配置文件

网页包。常见的js公司

const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  plugins: [
    new CleanWebpackPlugin(['assets'])
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public/assets')
  }
}

网页包。开发人员js

const merge = require('webpack-merge')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  devtool: 'inline-source-map',
  devServer: { contentBase: './public' }
})

网页包。产品js

const merge = require('webpack-merge')
const common = require('./webpack.common.js')
const webpack = require('webpack')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = merge(common, {
  devtool: 'source-map',
  plugins: [
    new UglifyJSPlugin({ sourceMap: true }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
})

所以当我跑步的时候 webpack-dev-server --open --config webpack.dev.js 然后我得到了错误。当我跑步的时候 webpack --config webpack.prod.js 然后 open index.html 一切都很好。我的问题是为什么Web包开发服务器的行为如此奇怪?我错过了什么?

1 回复 | 直到 6 年前

Igor Chernega 6 年前

好的,问题解决了。由于webpack dev服务器实际上并没有在项目树中创建任何文件,而是直接将它们加载到内存中,所以我们没有得到 bundle.js 在我们的 assets devServer 在开发模式中,我们将其设置为 contentBase 属性,用于告诉服务器从何处提供内容。但默认情况下,捆绑文件将在浏览器中的 publicPath 这就是 / 默认情况下。据我们所知为此,我们需要告诉webpack更改其默认值并分配 /assets/ 到 公共路径 的属性 开发服务器 选项。最后,下面是解决问题的代码:

在网页包中。开发人员js

...

devServer: {
  publicPath: "/assets/", // here's the change
  contentBase: path.join(__dirname, 'public')
}

...

推荐文章

Guillaume Harari · 根据开发或产品环境加载css

6 年前

Max Silva · 无法使用vuejs2和webpack嵌入自定义字体

6 年前

Fered · Npm、Dev dependecy或dependecy,当使用webpack等将所有内容打包到一个脚本中时?

6 年前

Carlo · 如何使用Webpack 4仅在某些模块中导入jQuery?

6 年前

zh-mskl9 · Pug+Web包开发服务器

6 年前

Mizlul · 无法解析“css加载程序!”!自动刷新器加载程序'

6 年前

Aleksandr Gvozdev · 模拟'fs。readdirSync`节点。无递归的js

6 年前

jonnyg · 如何在docker文件中获取我可用的docker环境变量?(使用React/JS/webpack)

6 年前

Boris K · 将Extract Text Webpack插件与Vue CLI 3配合使用

6 年前

IsraGab · 使用webpack从angularjs模块加载特定指令

6 年前