webpack-打包html资源 (plugins配置)

项目目录

webpack.config.js中引入plugins

和loader不同的是，plugins多了一步引入

const { resolve } = require('path')
//引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    /**
     * loader:1.先下载  2.使用 (配置loader)
     * plugins:1.先下载 2.引入 3.使用
     */ 
    module: {
        rules: [
            //loader配置
        ]
    },
    plugins: [
        //plugins配置
        //html-webpack-plugin 功能:默认创建一个空白的html文件,自动引入打包输出的所有资源(js,css...)
        new HtmlWebpackPlugin({
            //复制./src/index.html文件，并自动引入打包输出的所有资源(js,css...)
            template:'./src/index.html'
        })
    ],
    mode: 'development' //开发模式
}

打包后