TS笔记webpack配置

第一步 npm init -y

npm init -y

生成一个package.json文件

第二步 npm i -D webpack webpack-cli typescript ts-loader

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

下载所需依赖，并在package.json中devDependencies中出现

第三步 创建webpack.config.js配置文件

// 引入一个包
const path = require('path');
const { webpack } = require('webpack');

// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
      // 定义环境变量
      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配置文件

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

第五步 在package.json文件的scripts中 加入"build": “webpack”

{
  "name": "twst",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}

第六步 控制台输入指令 npm run build (基本创建完成)

npm run build

此时自动生成一个dist文件夹，里面会带有bundle.js文件

第七步 npm i -D html-webpack-plugin(帮助我们自动生成html文件)

npm i -D html-webpack-plugin

第八步 在webpack.config.js中引入html文件 并且配置webpack属性

// 引入一个包
const path = require('path');
// 引入html文件
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { webpack } = require('webpack');

// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
      // 定义环境变量
      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/
          }
         ]
    },
    // 配置webpack属性
    plugins:[
        new HTMLWebpackPlugin({
        // title:"这是一个自定义的title"
        template:'./src/index.html'
        }),
    ]
};

使用template引入网页模板时，先在src文件夹下新建一个index.html文件。

第九步 npm i -D webpack-dev-server(帮助项目直接运行) 并在package.json文件中配置start属性

{
  "name": "twst",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}

命令行输入npm start 即可自动打开localhost网页

第十步 npm i -D clean-webpack-plugin (自动清除dist文件)

npm i -D clean-webpack-plugin

第十一步 在webpack.config.js文件中引入 并在plugin中配置

// 引入一个包
const path = require('path');
// 引入html文件
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { webpack } = require('webpack');
// 引入clean运行
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
      // 定义环境变量
      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/
          }
         ]
    },
    // 配置webpack属性
    plugins:[
        new HTMLWebpackPlugin({
        // title:"这是一个自定义的title"
        template:'./src/index.html',
    }),
    new CleanWebpackPlugin(),
    ]
};

运行npm start后dist文件被清空

第十二步 在webpack.config.js文件中使用resolve设置引入模块

// 引入一个包
const path = require('path');
// 引入html文件
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { webpack } = require('webpack');
// 引入clean运行
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const { resolve } = require('path');


// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
      // 定义环境变量
      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/
          }
         ]
    },
    // 配置webpack属性
    plugins:[
        new HTMLWebpackPlugin({
        // title:"这是一个自定义的title"
        template:'./src/index.html',
    }),
    new CleanWebpackPlugin(),
    ],
    // 用来设置引用模块
    resolve:{
      extensions:['.ts', '.js']
    }
};

ts或js后缀文件在resolve中配置后能被引入到其他文件

第十三步 npm i -D @babel/core @babel/preset-env babel-loader core-js(解决兼容性问题)

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

第十四步 在webpack.config.js中进行配置 找到module中的rules将其中use属性修改为数组,在output中设置environment中配置环境

// 引入一个包
const path = require('path');
// 引入html文件
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { webpack } = require('webpack');
// 引入clean运行
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const { resolve } = require('path');


// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
      // 定义环境变量
      mode:'development',
      // 指定入口文件
      entry:'./src/index.ts',

      // 指定打包文件所在的目录
      output:{
         // 指定打包文件的目录
         path: path.resolve(__dirname, 'dist'),
         // 打包后文件的名字
         filename: 'bundle.js',
      },

      // 指定webpack打包时要使用的模块
      module:{
         // 指定要加载的规则
         rules: [
          {
            // test指定的是规则生效的文件
            test: /\.ts$/,
            use: [
                // 配置babel 
                {
                  // 指定加载器
                  loader:'babel-loader',
                  // 设置babel
                  options: {
                    // 设置定义的环境
                    presets:[
                      [
                        //  指定环境的插件
                        "@babel/preset-env",
                        // 配置信息
                        {
                          // 要兼容的目标浏览器
                          targets:{
                            'chrome':"50",
                            'ie':'5'
                          },
                          // 指定corejs的版本
                          "corejs":"3",
                          // 使用corejs的方式 "usage" 表示按需加载
                          "useBuiltIns":"usage"
                        }
                      ]
                    ]
                  }
                },
                'ts-loader'
              ],
            // 要排除的文件
            exclude: /node-modules/
          }
         ]
    },
    // 配置webpack属性
    plugins:[
        new HTMLWebpackPlugin({
        // title:"这是一个自定义的title"
        template:'./src/index.html',
    }),
    new CleanWebpackPlugin(),
    ],
    // 用来设置引用模块
    resolve:{
      extensions:['.ts', '.js']
    }
};

在bundle.js中可以发现ie5浏览器所不兼容的let或const指令转换成了var指令.

这篇好文章是转载于：学新通技术网