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'
            ]},
复制代码

如有错误请友善指出!

转载于:https://juejin.im/post/5cbf1fd5e51d456e7e297c04