ts总结 之 webpack打包

其他内容
ts中的类型
编译选项
webpack打包
类

1.wepack的简单使用

• 快速初始化项目
  npm init -y
• 安装依赖
  npm i -D webpack webpack-cli typescript ts-loader
  ts-loader 用于将ts和webpack整合到一起
• 在package.json中加上build命令"build": "webpack",
• 执行npm run build即可进行编译打包

2.用到的插件

• html-webpack-plugin ：自动生成html文件
• clean-webpack-plugin ：用来清除上一次编译后产生的文件

webpack.config.js下
  // 配置webpack的插件
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      // title:'这是一个自定义的title'
      template: "./src/index.html"
    }),
  ],

• webpack-dev-server：代码修改后浏览器自动更新

package.json下
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open  "
  },

3.用到的loader

• 处理ts文件：使用babel-loader、ts-loader
  babel-loader应该在ts-loader上面，因为loader是从下往上编译的，需要先把ts转为 js，再使用babel-loader将ECMAScript 2015+ 代码转换为向后兼容的 js 代码
  设置要排除的文件 exclude: /node_modules/
• 处理less文件：使用style-loader、css-loader、postcss-loader、less-loader
  默认webpack是只解析js代码的
  less-loader：用于处理编译 .less 文件，将其转为 css文件代码
  postcss-loader：处理浏览器之间css的兼容性问题，给css加前缀
  css-loader：是解析css文件中的@import和url语句，处理css-modules，并将结果作为一个js模块返回
  style-loader：将css-loader解析后的内容挂载到html页面当中

4.文件代码

webpack.config.js：

// 引入一个包
const path = require('path')
// 自动创建html，并引入相关资源
const HTMLWebpackPlugin = require('html-webpack-plugin')
// clean
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  // 指定入口文件
  entry: './src/index.ts',
  // 指定打包文件所在目录
  output: {
    // 指定打包文件的目录
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js",
    // 配置打包环境
    environment: {
      // 告诉webpack不要用箭头函数
      arrowFunction: false
    }
  },
  mode: "development",
  // 指定webpack打包时要使用的模块
  module: {
    // 指定加载的规则
    rules: [
      {
        // test指定规则生效的文件
        test: /\.ts$/,
        // 要使用的loader
        use: [
          {
            // 配置babel
            loader: "babel-loader",
            // 设置Babel
            options: {
              // 设置预定义的环境
              presets: [
                [
                  // 指定环境的插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    // 要兼容的目标浏览器
                    targets: {
                      "chrome": "58",
                      "ie": "11"
                    },
                    // 指定corejs的版本
                    "corejs": "3",
                    // 使用corehs的方式"usage" --按需加载
                    "useBuiltIns": "usage"
                  }
                ]
              ]
            }
          },
          'ts-loader',
        ],
        // 要排除的文件
        exclude: /node_modules/
      }
    ]
  },
  // 配置webpack的插件
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      // title:'这是一个自定义的title'
      template: "./src/index.html"
    }),
  ],
  // 用来设置引用模块
  resolve: {
    extensions: ['.ts', '.js']
  }
}

package.json：

{
  "name": "part3",
  "version": "1.0.0",
  "description": "`npm i -D webpack webpack-cli typescript ts-loader`\r  - ts-loader 用于将ts和webpack整合到一起",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open  "
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "core-js": "^3.21.1",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.5",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "dependencies": {
    "clean-webpack-plugin": "^4.0.0"
  }
}