webpack之typescript打包学习基础1

---

前言

针对 ts 不借助框架的情况，使用 webpack 打包 ts

---

一、新建一个目录，作为项目文件夹

二、安装typescript，如果已经安装就跳过

1.查看是否安装

tsc -v

2.如果未安装，建议全局安装

npm install -g typescript

三、 初始化项目、生成tsconfig.json，确保在项目根目录下

1. 初始化项目

npm init -y

2. 生成tsconfig.json

tsc --init

看到目录下存在了 tsconfig.json，打开基本修改一下

// 这默认是注释了，可以打开
"moduleResolution": "node"
其他的选择默认即可，我们的这个小目标只是让项目运行起来

四、安装 webpack，webpack 不需要全局安装

npm install --save-dev webpack webpack-cli

五、安装 ts-loader，webpack只对js有效，因此我们需要把ts转化为js，需要用到该包

npm install --save-dev ts-loader

六、配置webpack

完成上述一系列，我们需要配置webpack让它为我们工作了。

七、在根目录，项目根下面新建文件webpack.config.js， 启动webpack对时候回去执行

⚠ 注意： 打包的入口文件 entry

const path = require('path');  // node自带包
module.exports = {
  entry:'./modules.ts',   // 打包对入口文件，期望打包对文件入口
  output:{
    filename:'test.js',   // 输出文件名称
    path:path.resolve(__dirname,'dist')  //获取输出路径
  },
  mode: 'development',   // 整个mode 可以不要，模式是生产坏境就是压缩好对，这里配置开发坏境方便看生成对代码
  module:{
  rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/
    }]
  },
  resolve: {
    extensions: ['.ts']      // 解析对文件格式
  },
}

八、修改 package.json

webpack 配置文件处理好之后还不能友好的打包，要修改packge.json 文件，用脚步打包 scripts 这一段

"scripts": {
    "test": "webpack"    // test 可以换成自己喜欢的比如build 等等
 },

test 可以换成自己喜欢的比如build 等等，这样配置后 webpack 就会自动去找到，webpack.config.js 然后开始工作

九、运行

npm run test

⚠ 提示： 如果想简单运行，可自建 html 文件引入生成的 test.js，打开 html 文件