Webpack:如何使用webpack-dev-server编译,写入磁盘并提供静态内容(js/css)

Question

我想构建我的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 run start".请帮忙.

Answer 1

对于webpack-dev-server v4.0.0+，使用devMiddleware ：

devServer: {
  devMiddleware: {
    writeToDisk: true
  }
}

Answer 2

新的webpack-dev-server已发布,它支持writeToDisk选项.

devServer: {
  writeToDisk: true
}

Answer 3

您可以将start脚本定义更改为:

"start": "webpack --watch & webpack-dev-server --inline --progress --colors".

这会将webpack监视和重建过程发送到后台,以便您可以在更改模块时对其进行热重新加载webpack-dev-server.

编辑:

这些插件中的任何一个都可以做你想要的:

• https://github.com/gajus/write-file-webpack-plugin
• https://github.com/FormidableLabs/webpack-disk-plugin

Answer 4

webpack-dev-server使用"虚拟"Express服务器与Sock.js一起模拟在您的计算机上运行的服务器.关于编译,webpack-dev-server会bundle在检测到代码更改时重新编译.但是,重新编译是从内存中提供的,而不是项目的build目录(或者,在您的情况下,是dist目录).来自文档:

使用此配置,webpack-dev-server将提供文件build夹中的静态文件.它将监视您的源文件,并在更改时重新编译该包.

关于写入磁盘,webpack-dev-server不会这样做.这部分是通过上面的内容解决的.另外,请注意以下内容,也来自Webpack文档:

此修改的包在内存中以指定的相对路径提供publicPath(请参阅API).它不会写入您配置的output目录.如果捆绑包已存在于同一URL路径中,则内存中的捆绑包优先(默认情况下).

要写入磁盘,请使用普通的webpack模块.当然,正如您的问题所暗示的那样,每次更改后的手动重新编译都是乏味的.要解决这个问题,请加上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的其他配置设置.如果我是你,我会query从您的babel加载器取出该字段,而是将您的Babel配置委托给外部.babelrc文件.与热重新加载兼容的好用程序可能如下所示:

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

另外,我已经创建了一个样板仓库,可以轻松地启动具有所需结构的项目.具体而言,Webpack配置可能是感兴趣的.特别是,它使用Webpack 2并包括其他构建工具,如Babel(用于转换),ESLint(语法检查器)以及对CSS/Sass和各种其他文件格式的支持.