TypeScript基础:webpack打包-02

一、webpack基本配置

1、新建项目工程，使用npm生成package.sjon

npm init -y 

生成package.sjon配置文件

2、继续安装使用webpack所需要的一些依赖

输入命令

npm i -D webpack webpack-cli typescript ts-loder

如果ts-loder报如下404错误，可以最后安装，执行如下命令 npm install ts-loader --save-dev

npm install ts-loader --save-dev

如下即安装完成

//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",
  "devDependencies": {
    "ts-loader": "^9.5.1",
    "typescript": "^5.4.5",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4"
  }
}

3、创建webpack配置文件webpack.config.js

webpack.config.js基本的配置信息

//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打包时要使用的模块
    module: {
        //指定要加载的规则
        rules: [
            {
                //test指定规则生效的文件，通过正则表达式去匹配这个文件名字
                test: /.ts$/,
                //意思是我用ts-loader去处理以ts结尾的文件
                use: 'ts-loader',
                //要排除的文件
                exclude: /node_modules/,
            }
        ]
    }
}

4、配置TS编译规范，根目录创建tsconfig.json文件

//tsconfig.json

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

5、配置打包，編輯package.json

"scripts": {
  "test": "echo "Error:  no test specified" && exit 1",
  "build": "webpack" //添加打包命令
},

6、對項目打包。執行npm run build

注意：dist包已经出来了，但提示报错信息如下 解决办法:在webpack.config.js中添加mode属性,再次打包即可

module.exports = {
    mode:'development',
    ....
 }

二、运行文件配置

1、安装webpack插件html-webpack-plugin

npm i -D html-webpack-plugin

安装成功之后package.json文件就多了一个选项了 然后进入webpack.config.js引入这个插件设置

const path = require('path');//帮助我们拼接路径
//引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //指定入口文件
    entry: './src/index.ts',
    //指定打包文件所在的目录
    output: {
      ...
    },
   //配置webpack插件
    plugins:[
       new  HTMLWebpackPlugin(),//作用：自动生成html文件
    ]
}

再次執行npm run build，dist目录下多了个index.html文件 自定义配置文件，修改标题，在plugins中操作

plugins:[
       new  HTMLWebpackPlugin({
        // 自定义配置
        title:'测试标题'
       }),
    ]

2、安装webpack插件npm i -D webpack-dev-server

//webpack的开发服务
npm i -D webpack-dev-server

安装成功之后在package.json文件scripts对象中设置start命令

  "scripts": {
     ...
     "start": "webpack-dev-server"
  },

執行npm start 点击地址访问即可

3、安装webpack插件npm i -D clean-webpack-plugin

npm i -D clean-webpack-plugin

作用：它的作用就是用來清除dist目录的,避免出现旧文件 引入插件

//webpack.config.js

// 引入html插件
const {CleanwebpackPlugin} = require('clean-webpack-plugin')

plugins:[
  new  CleanwebpackPlugin(),
]

再次執行npm run build,其实看不出啥太大变化。

4、webpack模块配置

创建一个m1.ts文件

//m1.ts

export const  hi = '你好';

在index.ts中引入

//index.ts

import {hi} from "./m1";

function sum(a:number,b:number):number{
    return a + b;
}
console.log(sum(123,456));
console.log(hi);

执行npm run build会出现报错 报错原因：m1.ts是一个模块，拓展名是ts，在webpack里面默认情况下他不知道你的这个ts是可以作为模块使用的，就是不知道哪些文件可以被引入。需要进入webpack.config.js文件进行配置

//webpack.config.js

//用來设置引用模块
resolve: {
    extensions: ['.ts', '.tsx', '.js']
}

再执行npm run build，就不会报错了 ts-part3代码