丁鹿学堂前端培训：ts+webpack常用插件完善（二）

webpack还有一些必要的配置，可以帮助我们更方便的开发typescript

1. 安装插件 npm i -D html-webpack-plugin

html-webpack-plugin 在webpack中可以帮我们自动生成html文件，并且引入打包的js文件。

配置：

在webpack.config 中，

1. 引入：const HTMLPlugin = require('html-webpack-plugin')
2. 配置：

    plugins:[
        new HTMLPlugin({
            template:"./src/index.html"
        })
    ],

2.安装插件 npm i -D webpack-dev-server

会自动起一个服务，在浏览器中打开，并且页面改变以后会实时刷新。

配置：

在package.json命令中添加 start命令

  "scripts": {
     "start": "webpack serve --open chrome.exe"   
  },

3 安装插件 npm i -D clean-webpack-plugin 用于每次更新清除之前的文件

配置和HTMLPlugin基本一样

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

配置：

  plugins:[
        new CleanWebpackPlugin(),
        new HTMLPlugin({
            template:"./src/index.html"
        })
    ],

以上就是形成了基本的webpack配置文件，完全可以上传到自己的代码仓库，作为以后自己开发的脚手架模板。

附上完整的webpack.config.js的配置，有比较详细的注释，仅供参考。

// 引入path包,作用是拼接路径
const path = require('path')
// 引入html插件
const HTMLPlugin = require('html-webpack-plugin')
// 引入清除修改之前文件的插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

// webpack的所有配置信息都在这里
module.exports = {
    // 指定入口文件
    entry:'./src/index.ts',
    // 指定打包后文件的目录
    output:{
        // 指定打包文件的目录
        path:path.resolve(__dirname,'dist'),
        // 打包的文件名
        filename:'bundle.js'
    },
    // webpack 打包时要依赖的一些模块
    module:{
        // 指定加载规则
        rules:[
            {
                // test指定规则生效的文件
                test:/.ts$/, // ts结尾
                use:'ts-loader', // 用ts-loader去处理
                exclude:/mode-modules/ // 排除文件，这里的不去编译

            }
        ]
    },
    // 配置webpack的插件
    plugins:[
        new CleanWebpackPlugin(),
        new HTMLPlugin({
            template:"./src/index.html"
        })
    ],
    // 配置引用模块,ts  和 js结尾的都可以作为引用模块来使用
    resolve:{
        extensions:['.ts','.js']
    }
}