刚刚写上的代码因为用上了热替换，所以只需要webpack打包，然后webpack-dev-server就可以直接打开相对应的页面

这是实现较为简单的打包，我对这个也不是特别的了解，就把代码直接给你写上，如果不懂就查阅webpack的官网一一对应这去看，就可以明白以下代码的意思，然后进行较为简单的打包，毕竟慢慢来，由简入繁

// webpack.config.js

const webpack = require('webpack')

const htmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')

module.exports = {

    entry: './entry.js', //入口文件

    output: {// 出口文件

        filename: "bundle.js",

        path: __dirname+'/dist'

    },

    module: {

        rules: [

            {test:/\.js$/, use: ["babel-loader"]},

            {test: /\.css$/, use: ["style-loader", "css-loader"]}

        ]

    },

    plugins: [

        new HtmlWebpackPlugin({

            template: "./index.html"

        }),

        new webpack.HotModuleReplacementPlugin() //热替换

    ],

    devSever: {

        contentBase: __dirname,

        port: 8080,

        open: true

    }

}