自定义开发服务器_1_使用webpack_dev_middleware

参照官网教程，配置了一个自定义开发服务器，使用 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')
})