webpack中會使用到的幾種loader

打包html頁面：

• 須要用到html-withimg-loader，固然還要引入html-webpack-plugin插件

{
    test:/\.html$/,
    use:'html-withimg-loader',
},
複製代碼

打包圖片和字體文件：

• 須要用到file-loader

{
    test:/\.(png|jpg|gif|ttf)$/,
    use:{
        //作一個限制，當咱們的圖片小於多少k的時候，用base64來轉化
        //不然用file-loader來產生真實的圖片
       loader: 'file-loader',
       options:{
           limit:1,//值是圖片的大小單位byte，超過不轉base64格式的字符串
           outputPath:'/img/',//放到圖片文件夾下
           publicPath:'http://www.hahahahahha.cn'//單獨給圖片加公共路徑
       }
    }
},
複製代碼

打包比較高級的js語法：

• 須要用到babel-loader

{
    test:/\.js$/,//normal普通的loader
    use:{
        loader:'babel-loader',
        options:{//用babel-loader把es6轉換爲es5

            presets:[
                '@babel/preset-env'
            ],
            plugins:[
                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                '@babel/plugin-transform-runtime'
            ]
        }
    },
複製代碼

打包css文件：

• 須要用到css-loader、style-loader(將打包後的css放到輸出html頁面中的style標籤中)
• 若是要壓縮css文件，則需引入MiniCssExtractPlugin.loader 插件

{test:/\.css$/, use:[
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader'
            ]},
複製代碼

若有錯誤請友善指出!