webpack学习笔记

const path = require('path')

//进度条
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const chalk = require('chalk');

// 以树图的方式展示打包后的文件
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

//输出html
const HtmlWebpackPlugin = require('html-webpack-plugin')

//抽离css插件 
const MiniCssExtractPlugin = require("mini-css-extract-plugin") 

//清空dist
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
    mode: 'production', //模式  production :生产环境    development :开发环境
    entry: './src/main.js', //入口文件
    output:{ //输出路径
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer:{ //开发服务配置
        port:3112,
        progress:true,
        contentBase:'./dist',
        compress: true
    },
    devtool:'inline-source-map', //提示：追踪错误和警告
    module:{ //允许指定多个loader
        rules:[  //模块筛选
            {test: /\.css$/, use:[MiniCssExtractPlugin.loader,"css-loader","postcss-loader"]},
            {test: /\.less$/, use :[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","less-loader"]},
            {test: /\.scss$/, use :[MiniCssExtractPlugin.loader,"css-loader","postcss-loader","sass-loader"]},
            {
                test:/\.(png|jpg|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{ 
                        limit:50000, //限制
                        outputPath:'images/' //输出路径
                    }}
                ]
            }
        ]
    },
    plugins:[ //插件
        new HtmlWebpackPlugin({ 
            title:"lxl webpack demo",
            filename: 'index.html', //输出后的文件名
            template: path.resolve(__dirname,'./public/index.html'), //指定引用模板
            hash:true
        }),
        new CleanWebpackPlugin(), //清楚dist
        new ProgressBarPlugin({  // 显示进度
            format: chalk.green('Progressing') +  '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',
            clear: false
        }),
        new MiniCssExtractPlugin({ //分离css 
            filename:'main.css' //指定输出后的文件名
        })
        // new BundleAnalyzerPlugin()
    ]

}

标签：MiniCssExtractPlugin,const,require,笔记,loader,学习,webpack,css
来源： https://www.cnblogs.com/linsxl/p/11834376.html