配置webpack-server

cnpm i webpack-dev-server -S

  "name": "workpack",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "serve": "webpack serve --open"
  },

const webpack = require("webpack")
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const config ={
    entry:path.resolve(__dirname,'src/main.js'), // 入口文件
    output:{
        path:path.resolve(__dirname,'dist'),     // 出口文件
        filename:'[hash]-[name]-bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/i,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'workpack'
        }),
        new CleanWebpackPlugin()
    ],
    devServer:{
        contentBase: './dist',
    },
    mode:'development'    // 模式
}
module.exports = config;

npm run serve