Webpack：如何使用webpack-dev-server编译，写入磁盘并提供静态内容（js / css） [英] Webpack: How to compile, write on disk and serve static content (js/css) using webpack-dev-server

问题描述

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

I want to build my js/css code, write it on disk and serve it using webpack-dev-server in a single command. I don't want to set-up another server for production mode. How do we do it? Sharing my webpack.config.js file content below:

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中使用的启动脚本：

Please find the start script used in package.json below:

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

我正在运行npm run start。请帮忙。

I am running "npm run start". Please help.

推荐答案

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

You can change your start script definition to this:

start：webpack --watch& webpack-dev-server --inline --progress --colors。

这会将webpack监视和重建过程发送到后台，这样您也可以在使用进行更改时热重新加载已修改的模块webpack-dev-server 。

This sends the webpack watch-and-rebuild process to the background so that you can also hot-reload your modified modules as you change them with webpack-dev-server.

编辑：

这些插件中的任何一个都可能做你想做的事：

Either of these plugins may do what you want:

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


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

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

这篇关于Webpack：如何使用webpack-dev-server编译，写入磁盘并提供静态内容（js / css）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！