初始化项目
- package.json
下载构建工具
- 命令行
编写webpack配置文件
- webpack.config.js
指定ts的编译规范
- tsconfig.json
打包
- "build":"webpack"
- 命令行
自动生成HTML文件
内置服务器webpack-dev-server
清除dist目录
设置引用模块 resolve:{}
- webpack.config.js
bable
安装Less依赖
- webpack.config.js中添加规则

初始化项目

npm init -y
进行初始化，这句话的作用在项目下生成package.json

package.json

package.json就是来管理我们的项目

{
    "name " : "part3" ,
  "version" : "1.0.0"，
  "description" : ""，
  "main" : "index.js"，
  "scripts " : {
        "test" : "echo \ "Error: no test specified\ " &&     exit 1"}，
    "keywords" : [],
  "author": ""，
  "license" : "ISC"
}

下载构建工具

安装webpack所需依赖

命令行

npm i -D webpack webpack-cli typescript ts-loader
cnpm i -D webpack webpack-cli typescript ts-loader

-D

全称：—save-dev
表示现在所安装的都是开发依赖

查看package.json中是否多了 "devDependencies"

{
  "name": "snakes",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.2.3",
    "typescript": "^4.3.4",
    "webpack": "^5.39.1",
    "webpack-cli": "^4.7.2"
  }
}

node_modules

而且根目录会多出一个node_modules的文件夹

webpack

构建工具

webpack-cli

webpack的命令行工具

webpack-dev-server

webpack的开发服务器

typescript

ts编译器

ts-loader

webpack的加载器
可以把webpack和typescript进行整合，让其变成一体的

编写webpack配置文件

webpack.config.js

// 引入一个包
const path = require('path');

// webpack中的所有的配置信息都应该写在module.exports中

module.exports = {
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包后的目录
        // path:"./dist",
        path:path.resolve(__dirname,"dist"),
        // 打包后文件的名字
        filename:"bundle.js"
    },
    // 指定webpack打包时使用的模块loader
    module:{
        // 指定loader要加载的规则
        rules:[
            {
                // test指定的是规则生效的文件
                test:/\.ts$/,
                // 表示匹配以ts结尾的所有文件
                // 要使用的loader
                use:"ts-loader",
                // 要排除的文件夹
                exclude:/node_modules/
            }
        ]
    }
}

`const path require('path');`

这是nodejs里面的模块
作用是帮助我们拼接路径

`module.exports = {}`

webpack中的所有的配置信息都应该写在module.exports = {}中

`entry:"./src/index.ts",`

指定入口文件
指定主文件是谁，从哪里执行
通常把文件放在源码目录src下

`output:{},`

文件打包输出到一个指定的位置
指定打包文件所在的目录

`path:path.resolve(__dirname,"dist")`

指定打包后的目录

`filename:"bundle.js",`

打包后文件的名字

`module:{},`

TS文件执行需要编译，也就是TS需要编译成js，如何去编译，这时候就要用到module:{},
指定webpack打包时用的loader（模块）

`rules:[],`

指定loader要加载的规则

`test:/\.ts$/,`

test指定的是规则生效的文件
表示匹配以ts结尾的所有文件

`use:'ts-loader',`

要使用的loader
和上一句结合就是用ts-loader处理ts结尾的文件

`exclude:/node_modules/,`

要排除的文件夹

指定ts的编译规范

tsconfig.json

根目录下建立tsconfig.json

{
    "exclude": [
        "node_modules",
    ],
    "compileroptions" : {
        "module " : "ES2015",
      "target" : "ES2015",
      "strict" : true
    }
}

打包

`"build":"webpack"`

package.json中要加入"build":"webpack"

{
  "name": "snakes",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.2.3",
    "typescript": "^4.3.4",
    "webpack": "^5.39.1",
    "webpack-cli": "^4.7.2"
  }
}

命令行

npm run build

出现下面提示说明成功

./src/index.ts 15 bytes [built] [code generated]
webpack 5.6.0 compiled successfully in 3087 ms

自动生成HTML文件

命令行

npm i -D html-webpack-plugin
cnpm i -D html-webpack-plugin

安装后"devDependencies"会多出"html-webpack-plugin": "^5.3.1",这个配置选项

{
  "name": "snakes",
  "version": "1.0.0",
  "description": " ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "private": true,
  "devDependencies": {
    "html-webpack-plugin": "^5.3.1",
    "ts-loader": "^9.2.3",
    "typescript": "^4.3.4",
    "webpack": "^5.39.1",
    "webpack-cli": "^4.7.2"
  }
}

配置插件

然后回到webpack.config.js中对插件进行配置

引入HTML插件

// 引入一个包
const path = require('path');
//引入HTML插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// webpack中的所有的配置信息都应该写在module.exports中

module.exports = {
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包后的目录
        // path:"./dist",
        path:path.resolve(__dirname,"dist"),
        // 打包后文件的名字
        filename:"bundle.js"
    },
    // 指定webpack打包时使用的模块loader
    module:{
        // 指定loader要加载的规则
        rules:[
            {
                // test指定的是规则生效的文件
                test:/\.ts$/,
                // 表示匹配以ts结尾的所有文件
                // 要使用的loader
                use:"ts-loader",
                // 要排除的文件夹
                exclude:/node_modules/
            }
        ]
    }
}

配置webpack插件

33-35行
注册之后这个插件就生效了
它的效果就是自动生成HTML文件并且引入相关的资源

// 引入一个包
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
// webpack中的所有的配置信息都应该写在module.exports中

module.exports = {
    mode:'development',
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包后的目录
        // path:"./dist",
        path:path.resolve(__dirname,"dist"),
        // 打包后文件的名字
        filename:"bundle.js"
    },
    // 指定webpack打包时使用的模块loader
    module:{
        // 指定loader要加载的规则
        rules:[
            {
                // test指定的是规则生效的文件
                test:/\.ts$/,
                // 表示匹配以ts结尾的所有文件
                // 要使用的loader
                use:"ts-loader",
                // 要排除的文件夹
                exclude:/node_modules/
            }
        ]
    },
    // 配置webpack插件
    plugins:[
        new HTMLWebpackPlugin(),
    ]
};

自定义HTMLWebpackPlugin插件

// 引入一个包
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
// webpack中的所有的配置信息都应该写在module.exports中

module.exports = {
    mode:'development',
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包后的目录
        // path:"./dist",
        path:path.resolve(__dirname,"dist"),
        // 打包后文件的名字
        filename:"bundle.js"
    },
    // 指定webpack打包时使用的模块loader
    module:{
        // 指定loader要加载的规则
        rules:[
            {
                // test指定的是规则生效的文件
                test:/\.ts$/,
                // 表示匹配以ts结尾的所有文件
                // 要使用的loader
                use:"ts-loader",
                // 要排除的文件夹
                exclude:/node_modules/
            }
        ]
    },
    // 配置webpack插件
    plugins:[
        new HTMLWebpackPlugin({
            title:"自定义title"
        }),
    ]
};

设置模板

当时当网页比较复杂，而希望网页也有一定的结构
它会根据我们写的生成对应的HTML文件
我们需要做的就是提供网页模板

// 引入一个包
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
// webpack中的所有的配置信息都应该写在module.exports中

module.exports = {
    mode:'development',
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包后的目录
        // path:"./dist",
        path:path.resolve(__dirname,"dist"),
        // 打包后文件的名字
        filename:"bundle.js"
    },
    // 指定webpack打包时使用的模块loader
    module:{
        // 指定loader要加载的规则
        rules:[
            {
                // test指定的是规则生效的文件
                test:/\.ts$/,
                // 表示匹配以ts结尾的所有文件
                // 要使用的loader
                use:"ts-loader",
                // 要排除的文件夹
                exclude:/node_modules/
            }
        ]
    },
    // 配置webpack插件
    plugins:[
        new HTMLWebpackPlugin({
            // title:"自定义title"
            template:"./src/index.html"
        }),
    ]
};

内置服务器webpack-dev-server

安装一个内置服务器
解决想要在浏览器访问网页的问题

安装

npm i -D webpack-dev-server
cnpm i -D webpack-dev-server

"devDependencies"中多出了"webpack-dev-server": "^3.11.2"

  "devDependencies": {
    "html-webpack-plugin": "^5.3.1",
    "ts-loader": "^9.2.3",
    "typescript": "^4.3.4",
    "webpack": "^5.39.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }

引入

安装后在package.json中加入"start": "webpack server --open chrome.exe"

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack",
    "start": "webpack server --open chrome.exe"
  },

执行命令

npm start

{
  "name": "snakes",
  "version": "1.0.0",
  "description": " ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack server --open chrome"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "private": true,
  "devDependencies": {
    "html-webpack-plugin": "^5.3.1",
    "ts-loader": "^9.2.3",
    "typescript": "^4.3.4",
    "webpack": "^5.39.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

清除dist目录

编译前会把dist目录自动清空，然后把新文件放进去
这样可以确保dist文件是当前最新的，避免有就文件的情况

安装插件

npm i -D clean-webpack-plugin
cnpm i -D clean-webpack-plugin

  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "html-webpack-plugin": "^5.3.1",
    "ts-loader": "^9.2.3",
    "typescript": "^4.3.4",
    "webpack": "^5.39.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }

引入

安装后在webpack.config.js中引入clean插件

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

注册

然后在plugins中注册一下

webpack.config.js

// 引入一个包
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// webpack中的所有的配置信息都应该写在module.exports中

module.exports = {
    mode:'development',
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包后的目录
        // path:"./dist",
        path:path.resolve(__dirname,"dist"),
        // 打包后文件的名字
        filename:"bundle.js"
    },
    // 指定webpack打包时使用的模块loader
    module:{
        // 指定loader要加载的规则
        rules:[
            {
                // test指定的是规则生效的文件
                test:/\.ts$/,
                // 表示匹配以ts结尾的所有文件
                // 要使用的loader
                use:"ts-loader",
                // 要排除的文件夹
                exclude:/node_modules/
            }
        ]
    },
    // 配置webpack插件
    plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title:"自定义title"
            template:"./src/index.html"
        }),
    ]
};

设置引用模块 resolve:{}

有的时候webpack不知道哪些文件要被引入

用来设置引用模块
告诉webpack哪些文件能作为模块被引用

webpack.config.js

// 引入一个包
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// webpack中的所有的配置信息都应该写在module.exports中

module.exports = {
    mode:'development',
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包后的目录
        // path:"./dist",
        path:path.resolve(__dirname,"dist"),
        // 打包后文件的名字
        filename:"bundle.js"
    },
    // 指定webpack打包时使用的模块loader
    module:{
        // 指定loader要加载的规则
        rules:[
            {
                // test指定的是规则生效的文件
                test:/\.ts$/,
                // 表示匹配以ts结尾的所有文件
                // 要使用的loader
                use:"ts-loader",
                // 要排除的文件夹
                exclude:/node_modules/
            }
        ]
    },
    // 配置webpack插件
    plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title:"自定义title"
            template:"./src/index.html"
        }),
    ],
    resolve:{
        extensions:['.ts','.js']
    }
};

bable

点击查看【bilibili】
也是单独的打包工具
可以和webpack一起使用
目前生成的js代码还是新的，这时候需要有新工具解析成不同的版本以兼容不同的浏览器
这个功能和TS的tsconfig.json中的的target是一样的
但是还有一些功能是TS中不具备的

TS只是做一些语法的转换
但是对于一些复杂的功能，比如ES6里新增的技术，promise，光通过语法的转换是转不过去的，这时候就需要babel来解决

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

语法转换
通过 Polyfill 方式在目标环境中添加缺失的特性（通过第三方 polyfill 模块，例如 core-js，实现）
源码转换 (codemods)
下载安装
npm i -D @babel/core @babel/preset-env babel-loader core-js
cnpm i -D @babel/core @babel/preset-env babel-loader core-js
npm uninstall @babel/core @babel/preset-env babel-loader core-js
@babel/core
@babel/preset-env
预置了各种不同的环境
babel-loader
babel和webpack做一个结合的工具
core-js
js的一个运行环境
可以让老版本浏览器用到新标准的技术

配置babel

新增了一个加载器（loader）
在module中之前用一个加载器，现在用两个
把use改成一个数组
目的就是告诉你我要使用两个加载器

ts-loader写在后边，因为加载器的执行顺序是从后往前
先用ts-loader把ts代码转换成js，然后再用bable把新版本的js转换成旧版的js

因为bable-loader带着复杂的配置信息，所以这个加载器要写复杂些，写成对象

webpack.config.js

// 引入一个包
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// webpack中的所有的配置信息都应该写在module.exports中

module.exports = {
    mode:'development',
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包后的目录
        // path:"./dist",
        path:path.resolve(__dirname,"dist"),
        // 打包后文件的名字
        filename:"bundle.js"
    },
    // 指定webpack打包时使用的模块loader
    module:{
        // 指定loader要加载的规则
        rules:[
            {
                // test指定的是规则生效的文件
                test:/\.ts$/,
                // 表示匹配以ts结尾的所有文件
                // 要使用的loader
                use:[
                    // 配置bable
                    {
                        // 指定加载器
                        loader:"babel-loader",
                        // 设置babel
                        options:{
                            // 设置预定义的环境
                            presets:[
                                // 指定环境的插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    targets:{
                                        // 要兼容的目标浏览器
                                        "chrome":"58",
                                        "ie":"11"
                                    },
                                    // 指定corejs的版本
                                    "corejs":"3",
                                    // 使用corejs的方式,"useage"表示按需加载
                                    "useBuiltIns":"useage"
                                }
                            ]
                        }
                    },
                    "ts-loader"
                ],
                // 要排除的文件夹
                exclude:/node_modules/
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin(),
    ],
    resolve:{
        extensions:['.ts','.js']
    }
};

`loader:"babel-loader",`

指定加载器

options:{}

设置选项

presets:[]

设置预定义的环境

“@bable/preset-env”,

指定环境的插件

targets:{}

要兼容的目标浏览器

“corejs”:”3”

指定corejs的版本

“useBuiltIns”:”useage”

使用corejs的方式，useage表示按需加载

设置不使用箭头函数

webpack.config.js

并且在webpack.config.js中设置不使用箭头函数以兼容IE11

// 引入一个包
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// webpack中的所有的配置信息都应该写在module.exports中

module.exports = {
    mode:'development',
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包后的目录
        // path:"./dist",
        path:path.resolve(__dirname,"dist"),
        // 打包后文件的名字
        filename:"bundle.js",
        environment:{
            arrowFunction:false
        }
    },
    // 指定webpack打包时使用的模块loader
    module:{
        // 指定loader要加载的规则
        rules:[
            {
                // test指定的是规则生效的文件
                test:/\.ts$/,
                // 表示匹配以ts结尾的所有文件
                // 要使用的loader
                use:[
                    // 配置bable
                    {
                        // 指定加载器
                        loader:"babel-loader",
                        // 设置babel
                        options:{
                            // 设置预定义的环境
                            presets:[
                                // 指定环境的插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    targets:{
                                        // 要兼容的目标浏览器
                                        "chrome":"58",
                                        "ie":"11"
                                    },
                                    // 指定corejs的版本
                                    "corejs":"3",
                                    // 使用corejs的方式,"useage"表示按需加载
                                    "useBuiltIns":"useage"
                                }
                            ]
                        }
                    },
                    "ts-loader"
                ],
                // 要排除的文件夹
                exclude:/node_modules/
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin(),
    ],
    resolve:{
        extensions:['.ts','.js']
    }
};

上述搭建环境只考虑到了TS的情况，只是解决了TS转换为js的问题
实际上写项目的时候还有图片，css等web资源
需要在webpack中引入一些css插件，使得webpack可以对css代码进行处理

现在使用CSS都是用的预处理语言，像less，sass，stylus

安装Less依赖

npm i -D less less-loader css-loader style-loader

webpack.config.js中添加规则

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

/*/ 配置webpack打包ts代码

初始化项目

package.json

下载构建工具

命令行

-D

node_modules

webpack

webpack-cli

webpack-dev-server

typescript

ts-loader

编写webpack配置文件

webpack.config.js

const path require('path');

module.exports = {}

entry:"./src/index.ts",

output:{},

path:path.resolve(__dirname,"dist")

filename:"bundle.js",

module:{},

rules:[],

test:/\.ts$/,

use:'ts-loader',

exclude:/node_modules/,

指定ts的编译规范

tsconfig.json

打包

"build":"webpack"

命令行

自动生成HTML文件

命令行

配置插件

引入HTML插件

配置webpack插件

自定义HTMLWebpackPlugin插件

设置模板

内置服务器webpack-dev-server

安装

引入

执行命令

清除dist目录

安装插件

引入

注册

webpack.config.js

设置引用模块 resolve:{}

webpack.config.js

bable

下载安装

@babel/core

@babel/preset-env

babel-loader

core-js

配置babel

webpack.config.js

loader:"babel-loader",

options:{}

presets:[]

“@bable/preset-env”,

targets:{}

“corejs”:”3”

“useBuiltIns”:”useage”

设置不使用箭头函数

webpack.config.js

安装Less依赖

webpack.config.js中添加规则

`const path require('path');`

`module.exports = {}`

`entry:"./src/index.ts",`

`output:{},`

`path:path.resolve(__dirname,"dist")`

`filename:"bundle.js",`

`module:{},`

`rules:[],`

`test:/\.ts$/,`

`use:'ts-loader',`

`exclude:/node_modules/,`

`"build":"webpack"`

`@babel/core`

`@babel/preset-env`

`babel-loader`

`core-js`

`loader:"babel-loader",`