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生成的