（自用）TS学习笔记之三：webpack相关配置（自动创建html、实现网页热更新、实现模块化）

基础webpack配置

输入npm init -y

在终端输入npm init -y，发现生成文件package.json，即说明成功。

ATT：有的人可能用不了npm init -y，只能用npm init，譬如作者。

输入npm i -D +包名

在终端输入cnpm i -D webpack webpack-cli typescript ts-loader，发现package.json里面出现了devDependencies，且里面是导入的四个包及其版本，且项目目录下出现了node_modules，说明成功。

ATT：有的人可能报错说“无法将‘cnpm’项识别……”，则用npm，譬如作者。webstorm对于项目目录的node_modules的刷新可能比VSCode慢很多，此时右键在文件夹中打开项目，发现确实有了node_modules，但Webstorm里面还是没有刷新，可以重启试试。

命令的解释：cnpm是国内的镜像，npm是原版。

后面跟着的webpack等四个包，其中webpack是构建工具，webpack-cli是webpack的命令行工具，typescript是ts编译器，ts-loader用于帮助webpack识别ts。

新建webpack.config.js文件

在项目根目录下新建webpack.config.js文件，在里面输入以下代码；

//引入一个包，主要作用用于路径拼接。
const path = require('path');

//webpack的所有配置信息都写在这里
module.exports={
//指定入口文件，一般都是src的index文件
    entry:"./src/index.ts",
    //指定打包文件的目录
    output: {
        //打包后文件的输出目录
        path:path.resolve(__dirname,"dist"),
        //打包后文件的
        filename:"bundle.js"
    },
    //指定webpack打包时要哦那个的模块
    module: {
        rules: [//指定要加载的规则
            {
                test:/\.ts$/,
                //test指定的是规则生效的文件，这里表示所有以.ts结尾的文件
                use:'ts-loader',
                //use表示要用的loader
                exclude: /node_modules/
                //表示排除的文件
            }
        ]
    },
    //mode不加的话，会有警告
    mode:"development"
}

新建tsconfig.json

输入以下代码：

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

配置package.json

如图，在package.json中补充“build":"webpack"，注意上一行的"test"末尾也要加，

输入npm run build

发现出现dist文件夹，里面出现了bundle.js，后者里是整合的代码，即说明成功。

webpack自动创建html

输入npm i -D +html-webpack-plugin

在终端输入npm i -D html-webpack-plugin ，发现package.json中的devDependencies里出现"html-webpack-plugin": "^5.5.0"，即说明成功。

ATT：有些人可能使用不了cnpm，则将其换成npm，譬如作者我。html-webpack-plugin是webpack中的html插件，用来自动创建html文件。

配置webpack.config.js文件

const path = require('path');
//引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports={
    entry:"./src/index.ts",
    output: {
        path:path.resolve(__dirname,"dist"),
        filename:"bundle.js"
    },
    module: {
        rules: [
            {
                test:/\.ts$/,
                use:'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    mode:"development",//注意这里要加逗号
    plugins:[
        new HtmlWebpackPlugin({
                // title: "这是一个自定义的标题"
            template: "./src/muban.html"//注意如果要使用这个，则要在src下创建模板的html文件。
        }),
    ]
}

输入npm run build

在终端输入npm run build，发现dist目录下同时出现html文件，即成功

webpack实现网页热更新

法一，只替换不清空旧编译文件的做法

输入npm i -D webpack-dev-sever

在终端输入webpack-dev-server（webpack的开发服务器），发现package.json里出现"webpack-dev-server": "^4.11.1"，即说明成功。

配置package.json

在"build"后面加上"start": "webpack serve --open"，则打开默认浏览器。

输入npm start

在终端输入npm start。

ATT：第一次打开网页会有点慢，后面会好很多。且，关闭网页后返回webstorm会发现终端不是在命令行模式下，此时需要手动ctrl+c，再输入y进行关闭。

法二，清空旧编译文件的做法

终端输入npm i -D clean-webpack-plugin

webpack.config.js中开头引入const {CleanWebpackPlugin} = require("clean-webpack-plugin");在plugin里面添加new CleanWebpackPlugin(),

终端输入npm run builf

webpack实现模块化

准备环境：在src下创建两个ts文件如下

index.ts:

import {hi} from './m1';

console.log(hi);

m1.ts:

export const hi="hi";

在webpack.config.js的plugins下面新增

plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
            // title: "这是一个自定义的标题"
        template: "./src/muban.html"
    }),
],
//新增的。用来告诉webstorm哪些文件可以作为模块使用
resolve: {
    extensions: ['.ts','.js']//表示只要扩展名是ts和js的都可以作为模块使用
}

运行npm run build，发现不报错了，即成功。