Javascript Webpack：如何使用WebpackDevServer编译、在磁盘上写入和提供静态内容（js/css）

我想构建我的js/css代码，将其写入磁盘，并在一个命令中使用webpack dev server为其提供服务。我不想为生产模式设置另一台服务器。我们怎么做？在下面共享我的webpack.config.js文件内容：

module.exports = {
watch: true,
entry: [
    './src/index.js'
],
output: {
    path: __dirname +'/dist/',
    publicPath: '/dist/',
    filename: 'bundle.js'
},
module: {
    loaders: [
        {
            exclude:/(node_modules)/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
},
devServer: {
    historyApiFallback: true,
    contentBase: './'
}
};

请在下面找到package.json中使用的启动脚本：

"start": "webpack-dev-server --progress --colors"

---

我正在运行“npm运行启动”。请提供帮助。

您可以将

开始

脚本定义更改为：

“开始”：“webpack--watch&webpack dev server--inline--progress--colors”

这会将webpack watch and rebuild过程发送到后台，以便在使用

webpack dev server

更改修改后的模块时，也可以对其进行热加载

编辑：

这两个插件中的任何一个都可以实现您想要的功能：

webpack dev server使用“虚拟”Express服务器与Sock.js结合，模拟在您的计算机上运行的服务器。关于编译，webpack dev server在检测到代码更改时会重新编译

包。但是，这种重新编译是从内存中进行的，而不是从项目的
build
目录（或者，在您的例子中是
dist
目录）进行的。从：

使用此配置，webpack dev server将为
build
文件夹中的静态文件提供服务。它将监视您的源文件，并在更改包时重新编译包

关于写入磁盘，webpack dev server不会这样做。上面写的部分内容解决了这一问题。此外，请注意以下内容，也请参见网页文档：

此修改后的捆绑包从内存中以
publicPath
中指定的相对路径提供（请参见API）。它不会写入您配置的
输出
目录。如果捆绑包已存在于同一URL路径，则内存中的捆绑包优先（默认情况下）

要写入磁盘，请使用普通的网页包模块。当然，正如您的问题所暗示的，每次更改后手动重新编译都是乏味的。要解决这个问题，请包括
watch
标志。从终端，您可以执行以下命令：

$ webpack --watch

不过，我更喜欢将其委托给NPM脚本。请注意，下面的
-w
标志等同于写入
--watch

// NPM `scripts` field:
"watch": "webpack -w"

如果您希望在运行webpack dev server的同时重新编译更改并将其写入输出目录，则可以添加其他NPM脚本，如下所示：

"scripts": {
  "serve": "npm run watch && npm run start",
  "start": "webpack-dev-server --progress --colors",
  "watch": "webpack -w"
}

然后，在终端中，只需执行
$npm run serve
即可完成此操作




如果您对自动重新加载的附加便利感兴趣，可以通过在Webpack配置文件的plugins字段中定义以下内容来实现：

new webpack.HotModuleReplacementPlugin()

注意：这可能需要对Babel进行额外的配置设置。如果我是你，我会从你的babel加载器中取出
查询
字段，并将你的babel配置委托给一个外部
.babelrc
文件。与热重新加载兼容的好方法可能如下所示：

{
  "presets": ["env", "es2015", "react"],
  "plugins": ["react-hot-loader/babel"]
}




另一方面，我创建了一个框架，用于轻松启动具有所需结构的项目。具体地说，这可能是我们感兴趣的。特别是，它采用了Webpack 2，并包括其他构建工具，如Babel（用于transpilation）、ESLint（语法检查器），以及对CSS/Sass和各种其他文件格式的支持。
新的Webpack开发服务器是，它支持
writeToDisk
选项

devServer: {
  writeToDisk: true
}

webpack dev server从内存中提供文件，您可以用替换webpack dev server，它使用webpack的监视功能，将编译的文件写入磁盘并用于服务。
我认为只有在我调用start时它才会工作。热重新加载是否将文件再次写入磁盘？基本上，我想给webpack开发服务器提供一个磁盘写入功能。@JVM是的，
webpack--watch
命令在每次文件更改时将文件写入/dist，而开发服务器重新加载更新的src文件。@JVM-Hm，实际上，我遇到了这个插件。他们使用此插件链接到一个工作的网页包配置，将包写入磁盘：。我知道这些插件。我正在寻找最简单和最短的方法（对第三方nom包的最小依赖）来运行基于Web包的react项目。你的第一个方法对我有用。谢谢然而，我认为我们应该为生产构建使用一个单独的脚本“

。注意——我认为这应该行得通。但是，我认为如果在package.json中包含

--hot

标志，以及在webpack配置中包含

new webpack.HotModuleReplacementPlugin（）

，则不会起作用。只需添加一个即可使用——热，它的工作方式这是值得选择的答案。