参照官网教程,配置了一个自定义开发服务器,使用 node 和webpack-dev-server插件。
要点:不能在webpack.config.js中设置devServer字段,必须把它提出来,放到server.js文件中,设置为options:
const options = { contentBase:'./dist', hot: true, host: 'localhost', open: 'Chrome' };
1,必备依赖,使用npm/yarn安装即可,见下图:package.json:
"dependencies": { "webpack": "^5.10.0", "webpack-cli": "^4.2.0", "webpack-dev-server": "^3.11.0" }
2,配置一个webpack.config.js文件:
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode:'development', entry:'./src/index.js', devtool:'inline-source-map', output:{ filename:'bundle.js', path:path.resolve(__dirname, 'dist'), publicPath:'/' }, plugins:[ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title:'Hot Module Replacement', }) ] }
3,配置server.js文件:
const webpack = require('webpack'); const webpackDevServer = require('webpack-dev-server'); const config = require('./webpack.config.js'); const compiler = webpack(config); const options = { contentBase:'./dist', hot: true, host: 'localhost', open: 'Chrome' }; webpackDevServer.addDevServerEntrypoints(config,options); const server = new webpackDevServer(compiler, options); server.listen(5000,'localhost',()=>{ console.log('dev server listening on port 5000') })