webpack之ts打包

tsconfig.json配置

javascript 复制代码
 // 是否对js文件进行编译,默认false
    "allowJs": true,
    // 是否检查js代码是否符合语法规范,默认false(引入的外部文件有可能语法有问题)
    "checkJs": true,

allowJs和checkJs基本是同时出现,因为有了allowJs 这个检查,相对应的就要检查语法规范;

checkJs基本是false,因为在项目使用中,可能会引用外部文件,不能确定引入的文件的语法是否符合规范;

webpack配置

项目初始化

javascript 复制代码
npm -init -y

生成package.json

下载构建工具

下载开发依赖 webpack

配置webpack相关

创建webpack.config.js文件

javascript 复制代码
// 引入一个包
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:[
            {
                // 指定的规则生效的文件
                test: /\.ts$/, // 匹配所有.css结尾的文件
                use:['ts-loader'], // 应用的loader
                exclude: /node_modules/ // 排除node_modules中的文件
            }
        ]
    },
}

创建tsconfig.json文件

javascript 复制代码
tsc --init

配置package.json打包命令行

javascript 复制代码
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

html-webpack-plugin

html生成

下载依赖

javascript 复制代码
npm i -D html-webpack-plugin

webpack.config.js中配置

javascript 复制代码
const HTMLWebPackPlugin = require('html-webpack-plugin')
  plugins: [
        // ��件:在 webpack 构建流程中的特定时机注入额外功能
        new HTMLWebPackPlugin({
          template:"./src/index.html", // ���模板路径
        })
    ],

webpack-dev-server

安装webpack-dev-server依赖,监听项目改动,实时更新

javascript 复制代码
npm i -D webpack-dev-server

修改package.json

~~ "serve": "webpack server --open chrome.exe"~~

javascript 复制代码
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack server --open --mode production"
  },

clean-webpack-plugin

每次打包时,先清空dist文件,再创建

javascript 复制代码
// 引入clean-webpack-plugin来清除dist文件夹中的所有内容
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
plugins: [
        new CleanWebpackPlugin(), // ���清除dist文件夹中的所有内容
        // ��件:在 webpack 构建流程中的特定时机注入额外功能
        new HTMLWebPackPlugin({
            title:"网页标题", // ���模板的标题
            template:"./src/index.html", // ���模板路径
        })
    ],

引入模块

javascript 复制代码
resolve:{
        extensions: ['.ts', '.js'] // ��� webpack 如何��找模块
    }

babel相关依赖

javascript 复制代码
npm i -D @babel/core @babel/preset-env babel-loader core-js
  • @babel/preset-env:写的代码,兼容不同浏览器
  • babel-loader 结合
  • core-js

兼容ie浏览器

打包的代码包含箭头函数处理

javascript 复制代码
environment:{
            // 定义在 webpack 构建期间可以修改的环境变量
            // NODE_ENV: process.env.NODE_ENV
            arrowFunction: false, // 关闭��头函数的返回值��号
        }

打包

javascript 复制代码
npm run build

简单记个笔记

相关推荐
独立开阀者_FwtCoder4 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士5 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明5 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金9201410 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius11 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku12 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
蛋黄蛋黄16 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙17 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端
猩猩程序员19 分钟前
Rust 1.88 稳定支持裸函数:更安全简洁的汇编函数写法
前端
艾克马斯奎普特20 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范