第一步：创建一个文件夹，在该文件夹目录下初始化，并安装webpack 和 webpack-cli到开发依赖

    1. # 初始化
    2. npm init -y
    3. # 安装webpack 和 webpack-cli

    第二步：创建src目录，放置我们的源码，目录结构如下：

    1. |--------src
    2.         |--------hello2019.js
    3.       |--------index.js
    4.       |--------world2019.js

    三个javascript文件内容如下

    1. // hello2019.js
    2. module.export = 'hello';
    3. // world2019.js
    4. module.export = 'world';
    5. // index.js
    6. const hello require('./hello2019');
    7. const world require('./world2019');
    9. console.log(`${hello} ${world}`);

    第三步：打开package.json文件，然后添加scripts字段

    1. "scripts":{
    2.     "bulid":"webpack"
    3. }

    第四步：在项目目录下执行npm run bulid
    执行成功，index.js文件被打包到了dist文件夹下了，同时提示我们默认使用了production mode，即生产环境，打开dist/main.js，里面的代码是被压缩过的

    第五步：继续修改package.json，添加scripts

    1. "scripts":{ //webpack 的打包环境有production和development两种,
    2.                       //分别对应生产环境和开发环境,生产环境默认配置压缩
    3.     "dev":"webpack --mode development",
    4.   "bulid":"webpack --mode production"
    5. }

    第六步：执行npm run dev ，这次文件没被压缩，也不报warning

    第七步：修改打包输出目录
    Webpack默认入口文件时src/index.js，默认输出目录时dist/main.js，修改package.json文件，来修改默认输出目录

    1. "scripts":{
    2.     "dev":"webpack --mode development --output ./output/main.js",
    3.   "bulid":"webpack --mode production --output ./output/main.js"
    4. }

    可以使用npm scripts 修改默认打包的入口文件（src/index）

    1. "scripts":{
    2.     //开发环境的默认打包入口修改成了/src/dev/index
    3.   "dev":"webpack --mode development ./src/dev/index --output ./output/main.js",
    4.   "bulid":"webpack --mode production --output ./output/main.js"
    5. }

    第八步：使用loader来做ES6语法转换（为了兼容一些不能识别ES6语法的浏览器）
    通过使用Babel来转换ES6语法，Babel是JavaScript的一个编译器，能够将ES6+语法转换为ES5语法，保证浏览器兼容性。Loader是Webpack中一个重要的概念，通过Loader我们可以做一些与文件自身属性相关的操作，比如语法转换，这个Loader依赖@babel/core和@babel/preset-env

    1. npm i @babel/core babel-loader @babel/preset-env --save-dev //安装@babel/core 和@babel/preset-env

    第九步：在项目根目录下，创建一个babel的配置文件.babelrc，内容如下

    1. {
    2.     "presets":["@babel/preset-env"]
    3. }

    第十步：有了babel-loader就可以使用webpack命令的—module-bind，来指定对于对应的文件需要经过怎样的Loader处理，继续修改package.json

    1. "scripts":{
    2.     //开发环境的默认打包入口修改成了/src/dev/index
    3.   "dev":"webpack --mode development ./src/dev/index --module-bind js=babel-loader --output ./output/main.js",
    4.   "bulid":"webpack --mode production --output ./output/main.js"
    5. }

    第十一步：运行npm run dev 看output/main.js文件，就是转换后的ES5语法了

    Tips:
    1.当项目逐渐变大或者使用生产环境打包的时候，Webpack的编译事件会边长，可以通过参数让编译的输出内容带有进度和颜色：webpack —progress —colors
    2.Webpack 的配置比较复杂，很容易出错，如哦出问题，会打印一些简单的错误信息，我们还可以通过参数 —display-error-details 来打印错误详情：webpack —display-error-details
    3.如果不想每次修改模块后都重新编译，那么可以启动监听模式，开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的：webpack —watch
    4.webpack-cli支持两个快捷选项：-d 和 -p ,分别代表一些常用的开发环境和生产环境的打包
    5.日常用的较多的选项：
    （1） -config 指定一个Webpack配置文件的路径
    （2）-mode 指定打包环境的mode，取值为development和production
    （3）-json 输出mode打包结果，可以使用webpack —json->state.json方式将打包结果输出到指定的文件
    （4）-progress 显示webpack打包进度
    （5）-watch, -W: watch 模式打包，监控文件变化之后重新开始打包
    （6）-color, —colors/- no-color ,—no-colors：控制台输出的内容是否开启颜色；
    （7）-hot：开启Hot Module Replacement模式
    （8）-profile：会详细的输出每个环境用的时间，方便排查打包速度