1.//项目初始化，生成package.json文件来管理项目
    image.png
    2.安装webpack所需要的依赖（npm/cnpm安装）
    image.png
    image.png

    3.webpack.config.json配置文件
    image.png
    4.tsconfig.json ts的配置文件
    image.png
    5.修改package.json
    image.png
    6.npm run build 执行webpack
    image.png//成功

    7.安装webpack插件：自动生成html文件
    cnpm i -D html-webpack-plugin
    image.pngimage.png
    8.webpack开发服务器：cnpm i -D webpack-dev-server
    想在浏览器访问网站：服务器和项目有关联，当改动代码能自动重新构建，浏览器能自动刷新
    相当于在项目里安装一个内置的服务器，可以让项目在这个服务器直接运行，可以根据项目的改变去自动刷新
    image.png//添加“start”命令，启动内置服务器，用谷歌浏览器打开页面
    执行npm start命令，启动webpack内置服务器，自动弹出Chrom打开页面
    image.png//Live Reloading enabled.是实时更新的意思
    9.CleanWebpackPlugin
    编译的时候，不会删除原来的文件，编译新生成的文件会覆盖掉原来的文件
    每次编译前会将dist目录先清空，然后新文件放进去，这样就可以确保dist文件夹里的文件都是最新的
    这个插件和HTMLWebpackPlugin差不多，cnpm i -D clean-webpack-plugin，这条命令的作用就是清空dist目录下的文件
    image.pngimage.png
    10.模块问题：
    向外暴露一个变量，在别的地方引入这个，但是在webpack中不知道哪些文件可以作为模块使用
    所以要做一个配置告诉webpack哪些文件可以作为模块使用
    image.png
    11.引入loader加载器（打包工具），让代码转化成更多版本，兼容更多浏览器
    其中ts可以在tsconfig.json里面用target配置，编译转换成的es版本等等，但是这些仅仅是一些语法转换，有些功能复杂一点的（Promise……）是ts不具备的。
    新语法转换成旧语法，将新的类、对象，在旧浏览器不支持的，可以通过一些方式让他支持
    1）安装依赖：cnpm i -D @babel/core @babel/preset-env babel-loader core-js
    @babel/preset-env预先设置环境，不同浏览器
    babel-loader babel和webpack做结合
    core-js 是js运行环境，模拟运行js环境，让老版本浏览器用到到新标准技术
    2）修改配置
    这个加载器也是要对test生效，对ts文件生效的，所以在use，换成数组，里面有两个加载器
    因为加载器的执行顺序是从后往前执行，所以ts-loader写在后面先将ts代码转成js，然后再用babel转换js版本
    编译流：ts先去找ts-loader转换成js，然后js再找babel转换js版本
    image.png
    ie11里面没有promise，corejs里面有自己实现的promise，所以引入项目就可以用了，但是也不一定可以在ie11上用
    image.pngimage.pngimage.png//因为编译完用的是箭头函数，（（）=>{}）立即执行，创建了一个作用域，为了避免代码之间互相产生干扰，但是箭头函数ie不支持。
    image.png//但是手动写的箭头函数就可以编译成普通函数
    而webpack自带的，打包自动生成的是立即执行函数，没有经过babel，也没有经过ts-loading，证明webpack最新版本有些功能也不兼容ie。怎么办？修改配置文件：在webpage.config.js文件中，在output中设置即可；
    image.pngimage.pngimage.png