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屋!