Webpack整合TS

Webpack整合TS

1. npm init -y生成package.json文件

2. cnpm i -D webpack webpack-cli typescript ts-loader(可以安装淘宝镜像npm install -g cnpm --registry=https://registry.npmmirror.com)

3. 在webpack.config.js中写入配置

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

4. 在tsconfig.json中写入配置

   {
       "compilerOptions": {
           "module": "es6",
           "target": "es6",
           "strict": true
       }
   }
   

5. 优化webpack项目

   npm i -D html-webpack-plugin

   自动生成html文件

   在webpack.config.js中添加代码

   const HTMLWebpackPlugin = require('html-webpack-plugin')
   
   module.exports = {
       //配置webpack插件
       plugins:[
           //用于自动生成html文件并引入相关资源
           new HTMLWebpackPlugin(),
       ]
   }
   

   cnpm i -D clean-webpack-plugin

   用于在新文件生成之前删除旧文件，

   在webpack.config.js中添加代码

   const {CleanWebpackPlugin}=require('clean-webpack-plugin')
   
   module.exports = {
       //配置webpack插件
       plugins:[
           new CleanWebpackPlugin()
       ]
   }
   

   让webpack知道ts文件也可以import

   在webpack.config.js中添加代码

   module.exports = {
       // 用来设置引入模块
       resolve: {
           extensions: ['.ts', '.js']
       }
   }
   

   cnpm i -D webpack-dev-server

   内置在webpack中的服务器，代码进行修改时可以自动进行跟新页面

   在package.json中添加

   "scripts": {
       "start": "webpack serve"
     },
   

6. 语法兼容性优化

   sudo cnpm i -D @babel/core @babel/preset-env babel-loader core-js

   在web pack.config.js中添加编译规则

   注意ts-loader放后面，后面的先执行，先进行ts转js，在考虑兼容性

   // 打包文件所在目录
   output: {
       //指定打包文件的目录
       path: path.resolve(__dirname, 'dist'),
       //打包后文件的名字
       filename: "bundle.js",
       //告诉webpack不使用箭头函数
       environment:{
           arrowFunction:false
       }
   },
   

   
   
   //指定加载的规则
   rules: [
       {
           //规则生效的文件匹配所有以ts结尾的
           test: /\.ts$/,
           //使用ts-loader处理
           use: [
               {
                   //指定加载器
                   loader:"babel-loader",
                   //设置babel
                   options:{
                       //指定预定义的环境
                       presets:[
                           [
                               // 指定环境的插件
                               "@babel/preset-env",
                               //配置信息
                               {
                                   //要兼容的目标浏览器
                                   targets:{
                                       "chrome":"58",
                                       "ie":"11"
                                   },
                                   //指定codejs版本
                                   "corejs":"3",
                                   //使用corejs的方式，usage为按需加载
                                   "useBuiltIns":"usage"
                               }
                           ]
                       ]
                   }
               },
               'ts-loader'
           ],
           //要排除文件
           exclude: /node_modules/
       }
   ]