使用 Webpack + TypeScript 来创建项目【持续更新】

已于 2022-10-28 15:37:30 修改
阅读量713 收藏
点赞数 1
分类专栏： Webpack TypeScript 文章标签： webpack typescript javascript
于 2022-10-26 16:27:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42168187/article/details/127534898
版权

第一步、安装nodejs；

第二步、创建项目文件夹，在该项目下执行npm init命令；

第三步、执行npm i -D webpack webpack-cli typescript ts-loader命令，导入项目所需依赖；

第四步、在根目录下创建webpack.config.js文件，引入webpack相关配置，在package.json文件中加入脚本"build": "webpack"；

// 引入依赖
const path = require('path');

// webpack所有配置信息
module.exports = {
  // 是否压缩  development - 不压缩  production - 压缩
  mode: 'development',
  // 文件入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定什么类型的文件
        test: /\.ts$/,
        // 要使用的loader
        use: 'ts-loader',
        // 要排除的文件(夹)
        exclude: /node-modules/
      }
    ]
  }
}

第五步、在根目录下创建tsconfig.json文件，写入tsconfig相关配置；

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

第六步、在根目录下创建src文件夹，存放项目全部资源；

第七步、执行npm i -D html-webpack-plugin ，引入html-webpack-plugin插件来创建HTML入口文件，接着在webpack.config.js文件中引入该插件；

// 引入依赖
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin'); // 生成HTML入口文件

// webpack所有配置信息
module.exports = {
  // 是否压缩  development - 不压缩  production - 压缩
  mode: 'development',
  // 文件入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定什么类型的文件
        test: /\.ts$/,
        // 要使用的loader
        use: 'ts-loader',
        // 要排除的文件（夹）
        exclude: /node-modules/
      }
    ]
  },

  plugins: [
    new HTMLWebpackPlugin({
      title: "自定义HTML文件的Title"
    }),
  ],
}

第八步、执行npm i -D webpack-dev-server，引入webpack-dev-server插件来帮助项目热启动，在package.json文件中加入脚本"start": "webpack serve --open chrome.exe"；

第九步、执行npm i -D clean-webpack-plugin，引入clean-webpack-plugin插件来帮助项目每次执行webpack打包前先清空打包输出文件夹dist，接着在webpack.config.js中引用该插件；

// 引入依赖
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin'); // 生成HTML入口文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');// 清空dist

// webpack所有配置信息
module.exports = {
  // 是否压缩  development - 不压缩  production - 压缩
  mode: 'development',
  // 文件入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定什么类型的文件
        test: /\.ts$/,
        // 要使用的loader
        use: 'ts-loader',
        // 要排除的文件（夹）
        exclude: /node-modules/
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: "自定义HTML文件的Title"
    }),
  ],
}

第十步、在webpack.config.js文件中解决在打包时找不到js和ts模块文件；

// 引入依赖
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin'); // 生成HTML入口文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 清空dist

// webpack所有配置信息
module.exports = {
  // 是否压缩  development - 不压缩  production - 压缩
  mode: 'development',
  // 文件入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定什么类型的文件
        test: /\.ts$/,
        // 要使用的loader
        use: 'ts-loader',
        // 要排除的文件（夹）
        exclude: /node-modules/
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: "自定义HTML文件的Title"
    }),
  ],

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

第十一步，执行npm i -D @babel/core @babel/preset-env babel-loader core-js，安装babel所需的依赖，并在webpack.config.js文件中配置babel和corejs；

// 引入依赖
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin'); // 生成HTML入口文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 清空dist

// webpack所有配置信息
module.exports = {
  // 是否压缩  development - 不压缩  production - 压缩
  mode: 'development',
  // 文件入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js",
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定什么类型的文件
        test: /\.ts$/,
        // 要使用的loader
        use: [
          {
            // 指定加载器
            loader: 'babel-loader',
            options: {
              // 设置预定义的环境
              presets: [
                [
                  // 指定环境的插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    targets: {
                      "chrome": "100",
                      "ie": "11",
                    },
                    // 指定corejs的版本
                    "corejs": "3",
                    // 使用corejs的方式 "usage" 表示按需加载
                    "useBuiltIns": "usage",
                  }
                ]
              ]
            }
          },
          'ts-loader'// 先将ts转化成js，再用babel将js转化
        ],
        // 要排除的文件（夹）
        exclude: /node-modules/
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: "自定义HTML文件的Title"
    }),
  ],

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

第十二步，在webpack.config.js文件中配置，使webpack在打包时不使用箭头函数（兼容IE）。

// 引入依赖
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin'); // 生成HTML入口文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 清空dist

// webpack所有配置信息
module.exports = {
  // 是否压缩  development - 不压缩  production - 压缩
  mode: 'development',
  // 文件入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js",
    // 让webpack兼容IE11， 不使用箭头函数
    environment: {
      arrowFunction: false, // 箭头函数
    }
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定什么类型的文件
        test: /\.ts$/,
        // 要使用的loader
        use: [
          {
            // 指定加载器
            loader: 'babel-loader',
            options: {
              // 设置预定义的环境
              presets: [
                [
                  // 指定环境的插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    targets: {
                      "chrome": "100",
                      "ie": "11",
                    },
                    // 指定corejs的版本
                    "corejs": "3",
                    // 使用corejs的方式 "usage" 表示按需加载
                    "useBuiltIns": "usage",
                  }
                ]
              ]
            }
          },
          'ts-loader'// 先将ts转化成js，再用babel将js转化
        ],
        // 要排除的文件（夹）
        exclude: /node-modules/
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: "自定义HTML文件的Title"
    }),
  ],

  // 用来设置引用的模块
  resolve: {
    extensions: ['.ts', '.js'],
  }
}
Alert.GoSt
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
typescript-创建项目(二)
菜鸡，轻喷
06-10 481
devServer参数配置 注意
前端性能优化六十一：纯typescript项目npm打包webpack安装
m0_68635815的博客
02-13 136
在借助ts-loader打包处理TS时,会依赖一个配置文件tsconfig.json文件。
《TypeScript》一文入门Webpack构建工程化项目
Oliver尹的博客
11-04 209
简介 在现代的项目开发往往是Vue，React做工程化的构建，即使用到TypeScript也是集成在框架里，而基础的编译，使用到的loader都是框架已经弄好了，为了更好的理解这里面的相关知识，自己尝试一下，还是很有必要的。 ​ 目标 使用Webpack+TypeScript搭建一个项目，并可以使用使用命令进行编译。 ​ 构建项目 创建项目文件夹 随便找个目录，创建一个文件夹，这个文件夹就是以后的项目文件夹。 ​ 安装NodeJS 如果没有安装过node，先到NodeJS官网下载安装包，下载成功后，点击下一
TypeScript 学习笔记 第二部分 webpack 创建typescript项目
YUELEI118的博客
11-21 557
webpack 创建typescript项目，用于学习typescript语言
TypeScript环境搭建
一起coding，一起嗨。
12-08 911
前置条件：本地node环境正常node官网node测试命令node -v。
typescript项目创建及运行
jxbook的博客
12-03 962
创建一个typescript项目，运行且无法使用tsc命令
本地搭建typescript项目流程
lmj0920的博客
07-15 1043
本地搭建ts练习项目流程
monotypo：用于Webpack + TypeScript的Monorepo管理样板和工具链
02-10
- 使用代码审查和持续集成/持续部署(CI/CD)来保证代码质量和一致性。 总之，Monotypo是为那些希望利用Monorepo模式，同时享受Webpack和TypeScript带来的优势的开发团队量身打造的。通过合理地利用Monotypo，你可以...
Egg+React+TypeScript+AntMoble记账本项目
06-30
在本项目中，“Egg+React+TypeScript+AntMoble记账本项目”是一个结合了多种技术的前端与后端应用，旨在构建一个功能完善的记账本应用。以下是这个项目涉及的关键技术及其详细说明： 1. **Egg.js**： Egg.js 是一...
基于 Vue3 + Typescript + Vite3 + Pinia2 的王者荣耀后台管理系统源码.zip
11-29
Vite3 是由Vue.js作者尤雨溪创建的一个新型前端构建工具，它的核心思想是“按需编译”，相较于传统的Webpack，Vite在开发环境提供了更快的热更新和模块导入速度。Vite3进一步提升了性能，优化了配置，使得项目初始化...
一个初始项目使创建一个TypeScript库非常容易
08-10
一个初始项目，使创建一个TypeScript库非常容易
react-typescript-webpack:react-typescript-webpack
04-14
在这个项目"react-typescript-webpack"中，开发者结合了这三个强大的工具，以创建高效、类型安全且可维护的前端应用。 React是Facebook开发的一个用于构建用户界面的JavaScript库，它专注于视图层，让开发者能够...
template-Electron-React-TypeScript:基础项目，webpack 打包 electron、react、TypeScript
04-16
这个模板提供了使用Webpack进行打包的配置，使得开发者能够方便地整合这三者来创建桌面应用程序。 首先，我们要理解Electron。Electron是由GitHub开发的一个开源框架，它允许使用Web技术（如HTML、CSS和JavaScript...
创建typescript项目
jatter的技术博客
05-01 1605
#cd 一个目录 npm init #初始化 npm install typescript --save-dev   #创建目录结构  projectRoot ├── src │   ├── file1.js │   └── file2.js ├── built └── tsconfig.json   #配置文件tsconfig.json {     "compil...
使用webpack搭建TypeScript环境
chengxuyuan3629的博客
10-16 1033
使用Webpack搭建环境
VsCode下新建TypeScript项目
include_mecc的博客
07-23 4093
VsCode下新建TypeScript项目前提安装typescript安装ts-node创建项目在vscode运行项目 前提 需要先安装npm 安装typescript npm install -g typescript 命令框cmd,输入 tsc -v后，显示了版本信息后，就说明安装成功 tsc -v Version 3.2.2 注意：如果提示tsc不是内部命令，原因大部分是因为node_global的系统配置路径出错了 安装ts-node npm install -g ts-node 命令框cm
【node+ts】搭建node+typescript项目
weixin_45696837的博客
07-15 2629
【node+ts】搭建node+typescript项目
【TypeScript】介绍和环境搭建的详细步骤
m0_71485750的博客
08-15 2812
GitHub说法： TypeScript is a superset of JavaScript that compiles to clean JavaScript output.TypeScript官网： TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.这两个地方的意思是差不多的, 翻译过来： TypeScript是拥有类型的JavaScript超集, 它可以编译成普通、干净、完整。.......
【Vue实战教程】之Vue工程化项目详解
最新发布
柯晓楠
07-23 859
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（static module bundler）。在 Webpack 处理应用程序时，它会在内部创建一个依赖图（dependency graph），用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个 bundle。Webpack 可以做到按需加载。遍历源文件 > 匹配规则 > 打包这个过程中做不到按需加载，即对于打包起来的资源，到底页面用不用，打包过程中是不关心的。
webpack+layui创建后台项目
06-09
首先，你需要了解一下Webpack和Layui分别是什么。Webpack是一个模块打包工具，它可以将多个模块打包成一个或多个文件。而Layui是一个基于jQuery的前端UI框架，它提供了一些常用的UI组件和简洁的CSS样式。 下面是一些简单的步骤，可以帮助你创建一个基于Webpack和Layui的后台项目： 1.初始化项目 在命令行中创建一个新的项目文件夹并初始化它： ``` mkdir my-project cd my-project npm init -y ``` 2.安装依赖 安装Webpack和Layui的依赖包： ``` npm install webpack webpack-cli layui --save-dev ``` 3.创建Webpack配置文件 在项目根目录下创建一个名为`webpack.config.js`的文件，并添加以下代码： ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } }; ``` 这个配置文件告诉Webpack将`src/index.js`作为入口文件，将打包后的文件输出到`dist/bundle.js`。 4.创建HTML文件和Layui样式 在项目根目录下创建一个名为`index.html`的文件，并添加以下代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My App</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.css"> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md12"> <h1>Hello, World!</h1> </div> </div> </div> <script src="bundle.js"></script> </body> </html> ``` 这个HTML文件引入了Layui的CSS文件和Webpack打包后的JavaScript文件。 在项目根目录下创建一个名为`style.css`的文件，并添加以下代码： ```css body { background-color: #f2f2f2; } ``` 这个CSS文件设置了页面的背景颜色。 5.创建JavaScript文件 在项目根目录下创建一个名为`src/index.js`的文件，并添加以下代码： ```javascript import '../style.css'; import layui from 'layui'; layui.use(function(){ var $ = layui.$; console.log($); }); ``` 这个JavaScript文件引入了上一步创建的CSS文件，并使用了Layui的模块。 6.打包项目 在命令行中运行以下命令打包项目： ``` npx webpack ``` 这个命令将会使用Webpack打包项目，并将打包后的文件输出到`dist/bundle.js`。 7.运行项目 在浏览器中打开`index.html`文件，你应该能够看到一个灰色背景的页面，并在浏览器的控制台中看到Layui输出的一些信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Alert.GoSt

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值