webpack常見小插件使用

小插件使用：
1、cleanWebpackPlugin 清空原目錄文件 （用法有變化）
2、copyWebpackPlugin 拷貝插件
3、bannerPlugin 內置的 版權聲明插件

webpack.config.js

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 以前的用法
// let CleanWebpackPlugin = require('clean-webpack-plugin');
let CopyWebpackPlugin = require('copy-webpack-plugin');
let webpack = require('webpack');

module.exports = {
    // 多入口
    mode: 'development',
    entry: {
        home: './src/index.js',
    },
    watch: true,
    watchOptions: { // 監控的選項
        poll: 1000,  // 每秒問我多少次
        aggregateTimeout: 500, // 防抖，  過完500ms再進行
        ignored: /node_modules/,  // 不需要監控哪個文件
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    devtool: 'cheap-module-eval-source-map',
    output: {
        // 這裏的 name代表 home， other
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html",
            filename: "index.html",
            chunks: [
                "home",
            ],
        }),
        new CleanWebpackPlugin({}),
        // 以前的用法
        // new CleanWebpackPlugin(['./dist'])
        new CopyWebpackPlugin([
            {from: './note', to: './'}
        ]),
        // 給每個文件插入頭註釋
        new webpack.BannerPlugin('zhangfeng  20200221'),
    ]
};