Webpack核心(三）—— loader提取与压缩css

//webpack.config.js 配置文件
// 1.入口(entry) :使用哪个模块来构建内部依赖图的开始
// 2.输出(output) :在哪里输出它所创建的bundles及命名规则
// 3.loader :可以促使webpack额外地处理非javascript文件
// 4.插件(plugins) :执行范围更广的任务，如：打包优化和压缩等 

const path = require('path');  
const HtmlWebpackPlugin = require("html-webpack-plugin");  //引入插件
const webpack = require('webpack'); //引入热更新插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');  //提取css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css
module.exports = {
    entry:'./src/js/index.js',  //入口起点
    output:{ //输出
        path:path.resolve(__dirname,'dist'), //目标输出目录的绝对路径
        filename:'js/boundle.js'  //输出文件的文件名
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: "陈云苹",
            template:'./src/template.html', //模板地址
            filename:'index.html',
            inject:true, //值为true或者body的时候，script标签放在body的底部） 2.值为head的时候，script标签放在head里  
            hash:true,  //决定页面引入的js后面是否加hash值，清理页面缓存
            //chunks:['one'], //决定页面里引入那个js文件，否则全部引入
            minify:{
                //关于页面压缩，借助了另外一个插件
                collapseWhitespace:true, //去除空格
                removeComments:true, //去掉页面里的注释
                removeAttributeQuotes:true //去除引号
            }
        }),
        new MiniCssExtractPlugin({
            filename: 'css/index.css',
        }),
        // new ExtractTextPlugin('styles.css'),
        new OptimizeCssAssetsPlugin({
        }),
        new webpack.ProvidePlugin({
            $:'jquery'   //引入第三方库
        }),
        //生成两个
        // entry:{ （多入口）
        //     one:'./src/1.js',
        //     two:'./src/2.js'
        // },

        // new HtmlWebpackPlugin({
        //     title: "two",
        //     template:'./src/template.html', //模板地址
        //     filename:'two.html',
        //     inject:true, //值为true或者body的时候，script标签放在body的底部） 2.值为head的时候，script标签放在head里  
        //     hash:true,  //决定页面引入的js后面是否加hash值，清理页面缓存
        //     //chunks:['two'], //决定页面里引入那个js文件，否则全部引入
        //     minify:{
        //         //关于页面压缩，借助了另外一个插件
        //         collapseWhitespace:true, //去除空格
        //         removeComments:true, //去掉页面里的注释
        //         removeAttributeQuotes:true //去除引号
        //     }
        // }),
        new webpack.HotModuleReplacementPlugin()  //引入热更新方法Hot Module
    ],
    devServer:{
        host:'localhost', //默认localhost
        port:'1513', //端口
        open:true, //自动打开页面 实时刷新
        //hot相当于vue的数据实时更新
       // hot:true //开启实时热更新
    },
   // mode:'development' //开发环境，代码不会被压缩
   // mode:'production' //生产环境，执行webpack的时候，dist里面的文件会被压缩
   module:{
       rules:[//对象
           //这里面放的就是一个个的loader,每一个loader要放在一个对象里,这里面的内容不能变，从后往前解析
           {
               test:/\.css$/,  //正则,找到以.css结束的文件
               use:[
                   //它的值是一个数组
                  // 'style-loadr', //给页面嵌入css标签
                  // MiniCssExtractPlugin.loader,  //提取css为单独的css文件
                   {
                       //loader是可以进行参数的配置的，如果需配置的话就必须放再一个对象当中
                       loader:MiniCssExtractPlugin.loader,
                       options:{
                      publicPath: '../',
                       }
                   },
                   'css-loader',
               ]
           },
           {
             test:/\.(jpg|png|gif)$/,
             use:[
                // 'file-loader',
                //在输出图片的时候，有个文件夹，所以就在loader进行配置
                // {
                //     loader:'file-loader',
                //     options:{
                //         outputPath: 'images',
                //     }
                // },
                {
                    loader: 'url-loader',
                    options: {
                      limit: 50*1024,  //50k 限制图片50k以下转base64
                    },
                }
             ]
           },
           {
               test:/\.less$/,
               use:[
                   {
                
                    //loader是可以进行参数的配置的，如果需配置的话就必须放再一个对象当中
                    loader:MiniCssExtractPlugin.loader,
                    options:{
                         publicPath: '../',
                    }
               },
               'css-loader',
                'less-loader'
               ]
           },
           {
            test:/\.js$/,
            use:[
                {
             
                 //loader是可以进行参数的配置的，如果需配置的话就必须放再一个对象当中
                 loader:'babel-loader',
                 options:{
                     pressets:['@babel/preset-env','@babel/preset-react']
                 }
            }
            ],
            exclude: /node_modules/,   //不去找这个目录。速度更快一点，类似于：
            //include:path.resolve(__dirname,'./src/js')  //只去检测src文件的目录
        },
       ]
   }
}