webpack 发布 production

// 引入根路径  path 
let path = require('path');

// 引入 根目录
const root = process.cwd();

// 引入  vue-loadeer 
let { VueLoaderPlugin  } = require('vue-loader');

// 引入 处理 Html 的插件
let HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入 css 的插件
let  MiniCssExtractPlugin= require('mini-css-extract-plugin');

// 引入 压缩 css  的插件
let  OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// 定义配置
module.exports={
    // 模式
    // 发布模式
    mode:'production',

    // 解决问题
    resolve:{
        // 定义别名
        alias:{
            vue$:'vue/dist/vue.js',

            // 配置地址
            '@':path.join(root,'./src'),
            '@v':path.join(root,'./src/views'),
            '@c':path.join(root,'./src/compoments')
        },

        // 拓展名
        extensions:['.js','.vue'],
    },

    // 入口文件
    entry:'./src/main.js',

    // 发布
    output:{
        // '文件名'
        // 第一种添加  hash 指纹的方式
        // filename:'./static/[name].[hash:8].js',
        // 第二种方式  在插件中定义
        filename:'./static/[name].js',
        // 发布位置
        path:path.join(root,'./dzx/'),

        // 修改静态文件的相对位置
        publicPath:'../'
    },

    // 模块
    module:{
        // 定义加载机
        rules:[
            // vue 加载机
            {
                test:/\.vue$/,
                loader:'vue-loader',
                // 在以前的版本中,打包 css 还需要传递数据
                // use:[
                //     {
                //         loader:'vue-loader',
                //         options:{
                //             extractCSS:true
                //         }
                //     }
                // ]
            },
            // css 加载机
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    // 在样式文件的 style-loader 后添加 loader
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            // less
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    // 在样式文件的 style-loader 后添加 loader
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            // scss
            {
                test:/\.scss$/,
                use:[
                    'style-loader',
                    // 在样式文件的 style-loader 后添加 loader
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    // 定义插件
    plugins:[
        // 使用 vue-loader
        new VueLoaderPlugin(),

        // 处理 Html 的模板
        new HtmlWebpackPlugin({
            // 模板的位置
            template:'./public/index.html',
            // 发布的位置
            filename:'./views/index.html',
            // 添加指纹
            hash:true
        }),

        // 定义 css 文件的发布位置
        new MiniCssExtractPlugin({
            filename:'./static/style.css'
        }),

        // 压缩 css  代码
        new OptimizeCssAssetsWebpackPlugin()
    ],

    // 优化 拆分文件
    optimization:{
        // 拆分文件
        splitChunks:{
            cacheGroups:{
                lib:{
                    name:'lib',
                    chunks:'initial',
                    test:/node_modules/
                }
            }
        }
    }
}