ts 入门笔记 webpack打包

1. 在终端输入 npm init -y 初始化一个package.json 配置文件
2. 输入 npm i -D webpack webpack-cli typescript ts-loader

webpack-cli ：webpack 的命令行工具，可以通过命令行来使用webpack
ts-loader: webpack的加载器
可以整合webpack和typescript

会出现 node_modules 文件夹

3. 新建webpack.config.js 文件设置配置信息

配置包含：
a) entry 指定入口文件
b) output 指定打包文件所在目录（包含path 指定打包后的目录、filename 打包后文件的文件名、environment 告诉webpack 使不使用箭头函数）
c) module 指定webpack打包时要使用的模块（包含rules指定要加载的规则（exclude 要排除的文件、test 指定的规则时生效的文件、use 配置各种loader））
d) plugins 配置webpack插件， 例如： HTMLWebpackPlugin、CleanWebpackPlugin…
e) resolve 用来设置引用模块， 例如： extensions

注：
1. loader
模块转换器，比如把 sass 转成 css。配置了相关资源的 loader，我们就可以直接在程序中用 import 的方式引入非 js 资源。loader 能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中。
2. html-webpack-plugin
2.1 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题。
2.2 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
3. clean-webpack-plugin
每次打包时，删除上次打包的残留文件，保证打出的包整洁，非必须
4. extensions
在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。resolve.extensions 用于配置在尝试过程中用到的后缀列表，默认是：

extensions: ['.js', '.json']

也就是说当遇到 require(’./data’) 这样的导入语句时，Webpack 会先去寻找 ./data.js 文件，如果该文件不存在就去寻找 ./data.json 文件， 如果还是找不到就报错。

假如你想让 Webpack 优先使用目录下的 TypeScript 文件，可以这样配置：

extensions: ['.ts', '.js', '.json']

4. 新建 tsconfig.json 文件
   设置 compilerOptions

demo地址： https://download.csdn.net/download/sylvia_0815/21889743