【TS+webpack 环境搭建】

概要

webpack + Ts 环境搭建

整体架构流程

npm init -y //项目初始化 生成package.json（用来管理命令） 和下面的命令类似

//安装项目依赖 
npm i -D //开发所需要的依赖

//安装webpack 依赖 
//命令行工具  
//ts的核心包 
//ts的加载器->整合ts和webpack
npm i -D webpack webpack-cli typescript ts-loader 

配置webpack.config.js文件

提示：手动配置，根据自己的项目目录及进行配置

//引入一个包 路径拼接工具
const path = require('path');

module.exports = {
   
    //指定入口文件
    entry: './src/main.ts',

    //指定打包文件输出位置
    output: {
   
        //path:'./dist', 作用和下行一样 
        path: path.resolve(__dirname, 'dist'),
        //打包后的名字
        filename: 'bundle.js'
    },

    //webpack 打包时要使用的模块
    module: {
   
        //指定要加载的规则
        rules: [
            {
   
                //test指定规则生效的文件
                test: /\.ts$/,
                //要使用的loader
                use: 'ts-loader',
                //要排除的文件
                exclude: /node-modules/
            }
        ]
    },
    // 使用开发者模式打包
    mode:"development",
}

package.json文件中增加build指令！！

提示：不添加此指令 运行的时候会显示missing build

帮助自动生成html文件的插件

npm i -D html-webpack-plugin

配置之后需要在webpack.config.js文件中引入

const HTMLWebpackPlugins = requie(