typescript,webpack自学笔记

一、webpack基本配置 1.npm init -y

生成一个json文件

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

安装webpack需要的

3.如果生成得json文件devDependencies里出现了你刚刚安装的四个依赖就证明成功了 4.在根目录新建一个webpack的配置文件

webpack.config.js

5.在根目录创建tsconfig.json 6.在package.json文件里 scripts里边加上

"build": "webpack" (打包)

7.在通过npm run build 来对我们这个项目进行打包

以上就是最基本的组合

二、相关插件 HTMLWebpackPlugin 1.npm i -D html-webpack-plugin(帮助我们自动生成html文件)

下载好之后packjson文件里devDependencies会出现这个依赖

2.在webpack.json文件里导入这个插件

const HTMLWebpackPlugin = require('html-webpack-plugin')

3.在webpack.json文件里配置这个插件

    //配置 html-webpack-plugin 插件(自动生成html文件并且引入相关资源)

    //配置 html-webpack-plugin 插件(自动生成html文件并且引入相关资源)
    plugins: [
        new HTMLWebpackPlugin({
            //title: "这是一个自定义的标题"
            //(下面的template可以指定文件生成html模板)
            template: "./src/index.html"
        }),
    ]

webpack-dev-server

1.npm i -D webpack-dev-server(webpack开发服务器,就好比在项目中安装了一个内置服务器,可以让这个项目在这个项目中运行,可以根据项目的改变自动去刷新)

2.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack serve --open --mode production"
  },

"start": "webpack serve --open --mode production"启动webpack服务器,并且用 chrome打开我们的网页

2.1 执行   npm start  就可以了

第二步 *** 作在你编译ts文件时,会实时监视你指定的那个html文件进行实时修改

clean-webpack-plugin

在执行num run build时

你更新代码时清空生成的dist文件,防止有冗余文件

1.

//引入插件html-webpack-plugin 因为不是默认的就要写{}

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

2.

    //配置 html-webpack-plugin 插件(自动生成html文件并且引入相关资源)
    //配置 clean-webpack-plugin 插件 
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            //title: "这是一个自定义的标题"
            //(下面的template可以指定文件生成html模板)
            template: "./src/index.html"
        }),
    ],
    //用来设置哪些文件能被当模块引用
    resolve: {
        extensions: ['.ts','.js']
    }

@babel/core @babel/preset-env babel-loader core-js 

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

下载完之后查看package.json文件依赖项有没有

1.配置webpack.config.js  module里边的内容

    //指定webpack打包时要使用的模块
    module: {
        //指定加载的规则
        rules: [
            {   
                //test 指定的是规则生效的文件(/\.ts$/匹配所有以ts结尾的文件)
                //用ts-loader处理以ts结尾的文件
                test: /\.ts$/,
                //要应用的哪些文件,谁写在后边谁先处理(复杂版,博客上最开始的那种是简化版)
                use: [
                    //配置babel
                    {   
                        //指定加载器
                        loader: 'babel-loader',
                        //设置babel
                        options: {
                            //设置babel的预定义环境
                            presets:[
                                [
                                    //指定环境的插件
                                    '@babel/preset-env',
                                    //配置信息
                                    {   
                                        //要兼容的目标浏览器
                                        targets: {
                                            "chrome":"58",
                                            "ie":"11"
                                        },
                                        //指定corejs的版本
                                        "corejs":"3",
                                        //使用corejs的方式"usage"按需加载
                                        "useBuiltIns":"usage",

                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                //要排除的文件(哪些文件不处理)
                exclude: /node-modules/,
            }
        ]
    },

三、typescript面向对象

太基础了 不说了

四、