webpack.config.js

yarn add node-notifier -D
yarn add friendly-errors-webpack-plugin -D
yarn add speed-measure-webpack-plugin -D
yarn add webpack-bundle-analyzer -D

const path  = require("path");
const FriendlyErrorsWebpackPlugin= require("friendly-errors-webpack-plugin");
const notifier = require('node-notifier');
const SpeedMeasureWebpackPlugin = require("speed-measure-webpack-plugin");
const smw = new SpeedMeasureWebpackPlugin();
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const HtmWebpackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
module.exports = smw.wrap({
    mode:"development",//配置的模式
    devtool:"source-map",//调试工具的选择
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:'[name].js'  
    },
    resolve:{
        extensions:[".js",".vue",".json"],  //文件越多的放在最前面 
          //指定后可以不用在require或require的时候添加扩展名
          //查找的时候会尝试添加扩展名的匹配
        alias:{//配置别名
            bootstrap:path.resolve(__dirname,"node_modules/bootstrap/dist/css/bootstrap.css")
        }
    },
    externals:{
          //免打包加快构建速度 不影响在全局的使用
        jquery:'jQuery' //把jquery变成window.jQuery
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                include:path.resolve(__dirname,"src"),
                // exclude:/node_modules/,
                use:[
                    {
                        loader:"babel-loader",
                        options:{
                            cacheDirectory:true
                        }
                    }
                    // "cache-loader",
                    // "babel-loader"
                ]    
            },
            {
                test:/\.css$/,
                use:[
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    },
    plugins:[
       new  FriendlyErrorsWebpackPlugin({
           //运行错误的提醒
           onErrors:(servertity,errors)=>{
               let error = errors[0];
               notifier.notify({
                   title:"webpack编译失败",
                   message:servertity+":"+error.name,
                   subtitle:error.file || ""
               })
           }
       }),
       new BundleAnalyzerPlugin({
           analyzerMode:"disabled",//不启动展示打包报告的http服务器
           generateStatsFile:true //要生成states.json文件
       }),
       new HtmWebpackPlugin({
           template:"./src/index.html"
       }),
       new webpack.IgnorePlugin({
           resourceRegExp:/^\.\/locale$/,//资源正则 (语言包)
           contextRegExp:/moment$/  //上下文  目录正则 哪一个第三方包
       })
    ]
})