webpack最佳入门实践系列(03)

3.插件

在前端迅速发展的今天，许多没有太多技术含量并且感觉是在浪费时间的事情，就可以交给构建工具来做，例如：我们去手动创建index.html,手动引入打包好的js文件等操作，都可以叫个webpack来做，帮助我们提升效率，因此，你只需要理解，插件其实就是webpack的一些扩展功能，旨在帮助我们提示效率的工具

3.1.html-webpack-plugin插件

这个插件就是帮我们自动生成html文件并且自动引入打包好的js文件

1.插件安装

npm install html-webpack-plugin --save-dev

　　

2.修改webpack配置，让插件生效

const path = require('path')
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    plugins: [
        //添加插件
        new HtmlWebpackPlugin()
    ]
}

　　

3.运行查看效果

npm run dev

　　

4.其他常用配置项目

const path = require('path')
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    plugins: [
        //添加插件
        new HtmlWebpackPlugin(
            //在这个插件内部，可以指定模版和自定义生成的文件名
            {
                filename: 'main.html',
                template: 'src/index.html'
            }
        )
    ]
}

　　

有了上面两个配置后，这个插件帮助生成一个main.html，并且是基于template生成的