[TOC]

Plugin

横幅plugin

Webpack中的插件就是对Webpack现有功能的各种扩展，比如打包优化，文件压缩等。

loader和plugin的区别：

• loader主要用于转换某些类型的模块，它是一个转换器；
• plugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用过程：

• 通过npm安装需要使用的插件，（某些webpack已经内置的插件不需要安装）；
• 在webpack.config.js的plugins中配置插件。

添加版权的Plugin

该插件名称为BannerPlugin，属于webpack自带的插件。

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const webpack = require("webpack");

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, ‘dist‘),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {loader: "style-loader"},
                    {loader: "css-loader"}
                ]
            }, 
            {
                test: /\.vue$/,
                use: {loader: ‘vue-loader‘}
            }
        ]
    },
    resolve: {
        alias: {
            ‘vue$‘: ‘vue/dist/vue.esm.js‘
        }
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.BannerPlugin("BannerPlugin版权插件.")
    ]
}

重新打包，查看bundle.js文件。

HtmlWebpackPlugin

目前我们的index.html文件是存放在项目的根目录下的。

• 我们知道在真实发布项目时，发布的是dist文件夹下的内容，所以我们需要将index.html文件打包到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件；

HtmlWebpackPlugin可以为我们做：

• 自动生成一个index.html；
• 将打包的bundle.js文件，自动通过script标签插入到body中。

安装插件：

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

webpack.config.js

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, ‘dist‘),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {loader: "style-loader"},
                    {loader: "css-loader"}
                ]
            }, 
            {
                test: /\.vue$/,
                use: {loader: ‘vue-loader‘}
            }
        ]
    },
    resolve: {
        // 在引入.js、.css、.vue文件时不需要写后缀
        extensions: [‘.js‘, ‘.css‘, ‘.vue‘],
        alias: {
            ‘vue$‘: ‘vue/dist/vue.esm.js‘
        }
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.BannerPlugin("BannerPlugin版权插件."),
        new HtmlWebpackPlugin({
            template: "index.html"
        })
    ]
}

import {sum, mul} from "./js/mathutil"


console.log(sum(10, 20));
console.log(mul(10, 20));

// 导入css模块
require("./css/mycss");

// 使用vue进行开发
import Vue from "vue"
import App from ‘./vue/App‘

const app = new Vue({
    el: ‘#app‘,
    template: "<App></App>",
    components: {
        App
    }
})

重新打包发布，自动生成的index.html。

08、Webpack配置插件