webpack 配置文件webpack.config.js

var {resolve} =require('path');
//引用html 插件
var htmlWebpackPlugin = require("html-webpack-plugin");
//引入打包css到独立文件的插件
var miniCssExtractPlugin=require('mini-css-extract-plugin');
//引入压缩css插件
var cssMinimizerWebpackPlugin =  require('css-minimizer-webpack-plugin');
module.exports = {
    //打包开始的入口文件
    //可以是单个
    //entry:"./src/index.js",
    //也可以是多个(数组) 会打包在一个入口文件中
    //entry:["./src/index.js","./src/index2.js"]
    //还可以是对象模式 这时会生成多个入口文件main.js和index.js
    entry: {
        index: "./src/index.js"
    },
    //打包后路径
    output: {
        //输出的入口文件名 单个入口
        //"filename":"main.js",
        //输出的入口文件名 多个入口
        "filename": "[name].js",
        //打包后的文件夹名
        "path": resolve(__dirname, 'dist')
    },
    plugins: [
        //使用html插件
        new htmlWebpackPlugin({
            //使用的html文件
            template: "./src/index.html",
            //输出的html文件名
            filename: "index.html",
            //可以 在输出的index.html 中引用指定js 对应entry 中的key
            chunks: ['index'],
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注释
                removeComment: true
            },
        }),
        //创建 打包css到独立文件夹下的插件 对象
        new miniCssExtractPlugin({
            filename:'css/[name].css'   //输出的css文件名，放置在dist/css目录下
        }),
        //创建 压缩css 对象
        new cssMinimizerWebpackPlugin()
    ],
    module: {
        rules: [
            //处理css
            {
                // 正则表达式，表示.css后缀的文件
                test: /\.css$/,
                // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
                use: [
                    //css打包成独立文件
                    {
                        loader: miniCssExtractPlugin.loader
                    } ,
                    //css处理插件
                    'css-loader',
                    //css兼容性处理
                    'postcss-loader'
                ]
                // use: ['style-loader','css-loader']    //style-loader类似打包到html中
            },
            //处理图片
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // publicPath: './img/', //会在html的地址前加上这个
                            outputPath: 'img/',
                            limit: 1024 * 8,
                            name:'[name][hash:8].[ext]',
                            esModule: false
                        }
                    }
                 ],
            },
            // html加载图片
            {
                test:/\.(html)$/i,
                use:'html-withimg-loader', // 解析 html中的图片资源
            },
            //处理其他非js|json|html|css|less|scss|png|gif|jpg|jpeg文件
            {
                exclude: /\.(js|json|html|css|less|scss|png|gif|jpg|jpeg)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'font/',
                    publicPath: './font',
                    name:'[name][hash:8].[ext]'
                }
            },
            //处理sass
            {
                // 正则表达式，表示.css后缀的文件
                test: /\.scss$/,
                // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
                use: [
                    //css打包成独立文件
                    {
                        loader: miniCssExtractPlugin.loader
                    } ,
                    //css处理插件
                    'css-loader',
                    //css兼容性处理
                    'postcss-loader',
                    'sass-loader'
                ]
                // use: ['style-loader','css-loader']    //style-loader类似打包到html中
            },
        ]
    },
    //默认打包方式 开发模式 | production 生产模式
    mode:'development',
    //服务器启动 npx webpack serve
    devServer: {
        port:8080,
        compress:true,
        open:true,
        hot:true
    },
    //生产模式打包时文件过大导致报错
    performance: {
        hints:'warning',
        //入口起点的最大体积
        maxEntrypointSize: 50000000,
        //生成文件的最大体积
        maxAssetSize: 30000000
    },
    //服务器启动后自动刷新
    target: "web",
};