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 watch-and-rebuild 过程发送到后台，以便您还可以在使用 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

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