1). 下载依赖包
    yarn add -D webpack webpack-cli
    yarn add -D html-webpack-plugin
    yarn add -D webpack-dev-server
    yarn add -D babel-loader @babel/core @babel/preset-env
    yarn add -D css-loader style-loader
    yarn add -D [email protected] [email protected]

2). webpack的基本配置: webpack.config.js
    module.exports = {
      mode: 'production|development'
      entry: {

      },
      output: {

      },
      module: {
        rules: [

        ]
      },
      plugins: [

      ],
      devServer: {

      },
      devtool: ''
    }

3). 区分使用生产环境与开发环境
    使用生产环境:
        npm run build   ==> webpack
        1). 在内存中进行编译打包, 生成内存中的打包文件
        2). 保存到本地(在本地生成打包文件)   ===> 此时还不能通过浏览器来访问, 需要启动服务器运行
    使用开发环境
        npm run dev   ==> webpack-dev-server
        1). 在内存中进行编译打包, 生成内存中的打包文件
        2). 启动服务器, 运行内存中的打包文件   ===> 可以通过浏览器虚拟路径访问