一、初始化项目
npm init -y
二、下载构建工具
npm i -D webpack webpack-cli typescript ts-loader
三、创建webpack.config.js
项目根目录创建src文件夹，创建入口空文件index.ts
//引入一个包 const path = require('path'); // webpack中所有配置信息写在module.exports module.exports = { // 开发配置 mode: 'development', // 指定入口文件 entry: "./src/index.ts", // 指定打包文件所在目录 output: { // 指定打包文件所在目录 // path: "./dist" path: path.resolve(__dirname, 'dist'), // 打包后文件的名称 filename: "bundle.js" }, // 指定webpack打包时要使用模块 module: { // 指定要加载的规则 rules: [ { // test指定规则生成文件 test: /\.tx$/, // 要使用的loader use: 'ts-loader', // 要排除的文件 exclude: /node_modules/ } ] } }
四、创建tsconfig.json
{ "compilerOptions": { "module": "ES6", "target": "ES6", "strict": true } }
五、修改package.json
"build":"webpack"
六、测试命令
npm run build
七、配置html插件、代码热刷新插件、编译清除插件、babel
npm i -D html-webpack-plugin npm i -D webpack-dev-server npm i -D clean-webpack-plugin npm i -D @babel/core @babel/preset-env babel-loader core-js
修改webpack.config.js
//引入一个包 const path = require('path'); // 引入html插件 const HTMLWebpackPlugin = require('html-webpack-plugin'); // 引入clean插件 const {CleanWebpackPlugin} = require('clean-webpack-plugin') // webpack中所有配置信息写在module.exports module.exports = { // 开发配置 mode: 'development', // 指定入口文件 entry: "./src/index.ts", // 指定打包文件所在目录 output: { // 指定打包文件所在目录 // path: "./dist" path: path.resolve(__dirname, 'dist'), // 打包后文件的名称 filename: "bundle.js", // 不适用webpack箭头函数 environment: { arrowFunction: false } }, // 指定webpack打包时要使用模块 module: { // 指定要加载的规则 rules: [ { // test指定规则生成文件 test: /\.tx$/, // 要使用的loader,加载顺序，数组倒序 use: [ { // 指定加载器 loader: "babel-loader", // 设置babel options: { // 设置预定义的环境 preset: [ "@babel/prest-env", // 配置信息 { // 要兼容目标浏览器 targets: { "chrome": "88" }, // corejs版本 "corejs": "3", // 使用corejs的方式“usage" 表示按需加载 "useBuiltIns": "usage" } ], } }, 'ts-loader', ], // 要排除的文件 exclude: /node_modules/ } ] }, // 配置webpack插件 plugins: [ // html插件 new HTMLWebpackPlugin({ // 定义网页标题 // title: "title" // 定义生成模板 template: "./src/index.html" }), // clean插件 new CleanWebpackPlugin() ], // 设置引用模块 resolve: { extensions: ['.ts', '.js'] } }
修改package.json
"start": "webpack serve --open"
