首页 文章

Webpack dev-server - 如何使用更新的资产提供静态文件？

提问于
浏览 次
2

所以我的问题是，当我去 http://localhost:8080/webpack-dev-server/ 时，我可以让webpack提供目录列表 . 如果我修改了dev服务器路径，那么它不会对bundle进行任何更改 .

我想要一个非常简单的设置 . 把应用程序中的所有内容，执行js变换，然后在dist中提供 . index.html 如何适合它？

我有以下目录结构：

app
  index.js
dist
  bundle.js
index.html
webpack.config.js

在webpack.config里面我有这个：

const path = require('path')

module.exports = {
    entry: './app/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '.',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /(node_modules)/,
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
    }
}

我将此解释为“在index.js中启动捆绑包，在使用babel-loader将所有js文件转换为 bundle.js 之后将其转换为 dist/ . 然后在开发服务器上，从该dist文件夹中提供js内容并进行压缩 . ”

我的脱节是了解 index.html 如何发挥作用 . 我咨询过： https://webpack.js.org/configuration/dev-server/#devserver .

我可以将 contentBase 路径更改为 . ，它不会显示目录列表，但它不会更新捆绑包 .

tldr:

如何启用开发服务器指向 index.html 但是提供更新的资产？

最后，想通了 .

const path = require('path')

module.exports = {
    entry: './app/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /(node_modules)/,
            }
        ]
    },
    devServer: {
        contentBase: 'dist',
    }
}

我喜欢说我有一个顿悟，但我只是垃圾邮件，直到它工作 .

javascript webpack webpack-dev-server

1 回答

  • 3

    如果 contentBase 是 ./dist ，则预期该目录中存在 index.html . 它基本上是 webpack-dev-server 将查找静态文件（HTML，图像等）的目录 .

    它没有用于捆绑; output.path 是（AFAIK）甚至不被 webpack-dev-server 使用，因为它从内存构建并提供捆绑包 . 唯一需要的是 output.filename 和 output.publicPath （虽然我相信后者对于Webpack v2也是可选的，但它会尝试确定一个公共路径本身），用于通过URL确定可以请求包 .

    回复于

相关问题