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进行解析 
  •     

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

 

 

 也可以配合 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  
    • webpack4.x系列--资源和样式解析

 

 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  //精确到多少为小数点后位
}

 

  

 

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

上一篇:css过渡


下一篇:使用map 解决cube.js 默认title 显示的问题