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