(二)ts+Webpack学习笔记

92 阅读1分钟

一、html-webpack-plugin 自动生成HTML,下载完后webpack.config 多了html-webpack-plugin这个选项

二、回到webpack.config.js配置

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

三、配置webpack插件后dist 多了一个index.html

四、可在引处自定义title等

plugins: [

        new HtmlWebpackPlugin({

            title: '自定义title',

            template:"./src/index.html"

        })

    ]

五、新建一个网页模版在src下打包之后,再生成网页根据模版来

六、cnpm i -D webpack-dev-server 在package.json里设置启动浏览器

"start": "webpack serve",

七、重新编译清空之前dist里的东西

cnpm i -D clean-webpack-plugin

在webpack.config.js引入

//引处clean插件
const {CleanWebpackPlugin}=require('clean-webpack-plugin')

并在

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            // title: '自定义title',
            template: "./src/index.html"
        })
    ],

八、引用模块设置

在webpack.config.js

// 用来设置引用模块
    resolve: {
        extensions: ['.ts', '.js']
    }