webpack打包TS

简介: webpack打包TS
  1. webpack打包
    先生成package.json文件
npm init

下载依赖包

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

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:[
      {
        // test指定规则生效的文件
        // 指定以ts结尾的文件
        test:/\.ts$/,
        // 要使用的loader
        use:"ts-loader",
        // 要排除的文件
        exclude:/node_modules/
      }
    ]
  }
}

创建tsconfig.json文件

tsc --init
 配置相关信息
{
   
  "compilerOptions": {
   
    "target": "es5",                   
    "module": "ES2015",
      "strict":"true"
  }
}

1.1 html插件
html-webpack-plugin

1.2 webpack-dev-server
实时打包文件,如果入口文件发生变化,会重新自动打包文件

webpack-dev-server

"start": "webpack serve --open chrome.exe"

启动webpack的服务器,并同时打开谷歌浏览器

1.3 clean-webpack-plugin
每一次编译前,先把dist目录自动清空,然后将新文件放进去,这样就能确保dist文件里面的文件都是最新的,避免有旧文件的存在。

由于每次打包生成的js代码的语法都是最新的,很可能不兼容一些语法。

所以需要一个工具将代码改为不同的,来兼容更多的浏览器。

1.4 安装babel相关的东西

npm i-D @babel/core @babel/preset-env babel-loader core-js

加载器的顺序是从后往前加载编译

1.5 配置文件的总的内容

//*  引入一个包,用来拼接路径字符串
const path=require("path")
// * 引入html插件 这个插件的作用是自动生成html文件,并引入相关资源
const HTMLWebpackPlugin=require("html-webpack-plugin")
// * 
const {CleanWebpackPlugin}=require("clean-webpack-plugin");
//*  webpack中的所有配置信息都应该写在module.exports中
module.exports={
  //指定入口文件
  entry:"./src/index.ts",
  // 指定打包文件所在位置
  output:{
    // 指定打包文件的目录
    path:path.resolve(__dirname,"dist"),
    // 打包后的文件
    filename:"bundle.js",
    environment:{
      arrowFunction:false
    }
  },
  // 指定webpack打包时要使用的模块
  module:{
    //指定要加载的规则
    rules:[
      {
        // test指定规则生效的文件
        // 指定以ts结尾的文件
        test:/\.ts$/,
        // 要使用的loader
        use:[
          // 配置babel
          {
            // 指定加载器
           loader:"babel-loader" ,
          //  设置babel
          options:{
            // 设置预定义的环境
            presets:[
              [
                // 指定环境的插件
                "@babel/preset-env",
                // 配置信息
                {
                  // 要兼容的目标浏览器
                  targets:{
                    "chrome":"82",//需要兼容浏览器的88版本
                    "ie":"11"
                  },
                  // 指定corejs的版本
                  "corejs":"3",
                  // 使用corejs的方式
                  "useBuiltIns":"usage",//usage按需加载
                }
              ]
            ]
          }
        },
        "ts-loader"],
        // 要排除的文件
        exclude:/node_modules/
      }
    ]
  },
  // 配置webpack的插件
  plugins:[
    new HTMLWebpackPlugin({
      // title:"这是一个自定义的title"

      // template是设置html页面的模板是哪个,再生成的index.html是根据模板来生成的
      template:"./src/index.html"
    }),
    new CleanWebpackPlugin()
  ],
  mode:"production",
  // 用来设置引用模块
  resolve:{
    extensions:[".ts",".js"]
  }
}
相关文章
|
9天前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
25 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
10天前
|
缓存
webpack 打包多页面应用
webpack 打包多页面应用
|
22天前
webpack 打包多页面应用
webpack 打包多页面应用
|
1月前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
68 13
|
8天前
|
JavaScript 前端开发
手写一个简易bundler打包工具带你了解Webpack原理
该文章通过手写一个简易的打包工具bundler,帮助读者理解Webpack的工作原理,包括模块解析、依赖关系构建、转换源代码以及生成最终输出文件的整个流程。
|
2月前
|
缓存 前端开发 JavaScript
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
32 1
|
2月前
|
前端开发 JavaScript 开发者
Angular与Webpack协同优化:打造生产级别的打包配置——详解从基础设置到高级代码拆分和插件使用
【8月更文挑战第31天】在现代前端开发中,优化应用性能和加载时间至关重要,尤其是对于使用Angular框架的项目。本文通过代码示例详细展示了如何配置Webpack,以实现生产级别的打包优化。从基础配置到生产环境设置、代码拆分,再到使用加载器与插件,每个步骤都旨在提升应用效率,确保快速加载和稳定运行。通过这些配置,开发者能更好地控制资源打包,充分发挥Webpack的强大功能。
38 0
|
2月前
|
前端开发 开发者
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。本文阐述 DefinePlugin 的原理、用法及案例,包括安装配置、具体示例(如动态加载资源、配置接口地址)和注意事项,帮助开发者更好地利用此插件优化项目。
54 0
|
2月前
webpack——打包去除console
webpack——打包去除console
28 0
|
3月前
|
缓存 JSON 前端开发
Webpack打包优化实践
【7月更文挑战第17天】Webpack的打包优化是一个持续的过程,需要开发者根据项目的实际情况选择合适的优化策略。通过拆分代码、压缩代码、使用Tree Shaking、优化加载器配置、利用缓存以及进行性能分析,我们可以有效提升Webpack的打包效率和应用的加载
下一篇
无影云桌面