webpack4.x系列--资源和样式解析

基础配置--资源解析

　　1.解析es6

• babel-loader    解析es6语法
• @babel/core      babel-loader依赖 
• @babel/preset-env   babel-loader调用@babel/preset-env核心模块对es6进行处理为es5
• @babel/plugin-proposal-decorators    @babel/preset-env下的子模块,打包解析es7为es5
• @babel/plugin-proposal-class-properties     解析ES7中@修饰器  
• @babel/plugin-transform-runtime     解析ES6异步函数generator函数      测试:只会对index.js进行解析 
• 　　　　

 

 

 也可以配合 Happypack插件  进行多线程打包

let Happypack = require('Happypack');
new Happypack({  //多线程打包
            id:'js',
            use:[{
                loader:"babel-loader",
                options:{
                    presets: [
                        '@babel/preset-env', //babel-loader调用@babel/preset-env核心模块对es6进行处理为es5,                          
                    ], //注意代码上下顺序
                    plugins: [
                        ['@babel/plugin-proposal-decorators', { "legacy": true }], //  @babel/preset-env下的子模块,打包解析es7为es5                                                                
                        ['@babel/plugin-proposal-class-properties', { "loose": true }], //   解析ES7中@修饰器                                                                 
                        '@babel/plugin-transform-runtime', //解析ES6异步函数generator函数      测试:只会对index.js进行解析     
                        '@babel/plugin-syntax-dynamic-import'       
                    ]
                }
            }]    
         }            
        ),

 

　2.解析css

•  插件mini-css-extract-plugin     分离css为单独文件
• style-loader
• css-loader
• postcss-loader  添加前缀
• px2rem-loader  转换rem单位　　　　

　　　　　　　　{
                test: /\.css$/,
                use: [
                   {
                       loader: MiniCssExtractPlugin.loader, //将解析的css抽离为main.css文件
                       options:{
                        publicPath: '../' //这个option必须写，否则css中图片路径可能会出错
                      },
                   },  
                    'css-loader', //必须在'css-loader'下面,添加css前缀,配置同级目录下的postcss.config.js文件,进行配置
                    'postcss-loader',
                    
                    // {
                    //     loader:'px2rem-loader',
                    //     options:{
                    //         remUnit:50,  //多少px 为 1rem
                    //         remPrecision:8  //精确到多少为小数点后位
                    //     }
                    // }
                ]
            }, 

 

    3.解析less

• css-loader
• less-loader　　　

• {
  　　test: /\.less$/, //解析less
     use: [
           MiniCssExtractPlugin.loader, //将解析的css抽离为main.css文件
           'css-loader',
           'postcss-loader', //必须在'css-loader'下面
           'less-loader',
      ]
  },

   

    4.解析图片

• url-loader     注意：url-loader基于file-loader  
  • 

 

　5.解析字体 

• url-loader

　 6.解析html

• html-withimg-loader
• html-loader

• {
     test: /\.(htm|html)$/, //打包html中的img  src
     loader: 'html-withimg-loader' 
   },

   

样式解析　　

 　css前缀补齐

• postcss-loader    必须在'css-loader'下面,添加css前缀,配置同级目录下的postcss.config.js文件,进行配置　

postcss.config.js　文件　

//postcss.config.js:
module.exports = {
    plugins:[require('autoprefixer')],  //配置插件  给css加前缀 
}

  px转rem

• px2rem-loader   

options:{
    remUnit:50,  //多少px 为 1rem
    remPrecision:8  //精确到多少为小数点后位
}