Question

我具有以下项目结构：

root
|_app
| |_index.html
|_dist
| |_js
| | |_app.js
| |_styles
|   |_app.css
|_src
| |_js
| | |_models
| | | |_model.ts
| | |_app.ts
| |_styles
|   |_normalize.css
|   |_style.scss
|_package.json
|_webpack.config.js

当前，我的Webpack配置确实将SCSS转换为CSS并将其复制到dist文件夹。它与JS文件的功能相同（尽管当前不会将.ts编译为.js，但IDE会处理它）。

在我的index.html文件中，我具有以下CSS和JS声明：

<link rel="stylesheet" href="../dist/styles/app.css">
<script src="../dist/js/app.js" type="text/javascript"></script>

这是我的Webpack配置：

module.exports = {
    context: path.resolve(__dirname, 'src'),

    entry: {
        app: [
        './js/app.js',
        ],
    },

    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '../'
    },

    devServer: {
        contentBase: './app'
    },

   ...
}

当我的应用程序文件夹位于src文件夹中时，它工作正常。但是，一旦我将其移到根文件夹并相应地更改了devServer配置，浏览器就找不到CSS和JS。我经常收到此错误，例如：

Loading failed for the <script> with source “http://localhost:8080/dist/js/app.js”.

无论我尝试了什么（更改devServer contentBase，更改html中的JS和CSS路径等），它都无法加载index.html或加载它，但是找不到CSS和JS文件。

我需要进行哪些更改才能使其正常工作？

Answer 1

在WDS为您提供捆绑软件的浏览器中查看。通常，path对于js和css文件是相同的，并且filename确定每个输出包的名称。

此示例可以帮助您前进：

output: {
  path: path.resolve(__dirname, 'public/assets'),
  filename: '[name].js',
  publicPath: 'http://localhost:8080/assets/'
}

阅读output configuration以获得更多信息，并检查您是否正在使用sass和ts装载机。

无法使用Webpack DevServer接收我的js和CSS文件

1 个答案: