loader的使用

想使用什么loader就去npm的官网去找

图片配置： 参考:www.npmjs.com/package/url…

配置图片url-loader，要和file-loader一起使用，需要下载这两个loader，但不需要在rules配置file-loader，只需要配置url-loader。

命令：npm install --save-dev url-loader file-loader
module:{
    rules:{
        {
            test:/\.(gif|jpg|png|woff|svg|eof|ttf)$/,
            use:[
                loader:"url-loader",
                option:{
                    limit:8912,name:"images/[hash:8][name].[ext]"
                    }
            ]
        }
    }
}

配置limit：8192如果图片小于8192，会把图片转为base64格式的编码 大于8192，会使用file-loader进行打包

• 图片参与打包的好处：图片体积更小，方便管理

• images/[hash:8][name].[ext]把打包后的图片放到dist/public文件夹下面的images文件夹下。图片命名前八位是哈希值，name就是图片的原始名，ext图片的后缀

html-withimg-loader

• 注意：html里的img标记无法参与打包，只有js里的可以打包
• 参考：www.npmjs.com/package/htm…
• 在html模板文件中使用img标记插入图片，可以使用 html-withimg-loader 对图片资源进行打包，要匹配和url-loader使用，图片打包的配置在url-loader中配置。（需使用html-webpack-plugin插件）
• html-withimg-loader专门用来打包html里的img进行打包的，但前提是使用html-webpack-plugin动态生成图片打包。

配置：
{
    test:/.(html|htm)$/,
    use:['html-withing-loader'],
}

babel-loader

babel-loader把es6转成es5，把jsx转成js，这个loader是必须配置的。都是静态转换，即在打包之前就转换好了。

参考：www.npmjs.com/package/bab…

命令：cnpm i babel @babel/core @babel/preset-env -save-dev这是基础babel安装，如果转ts和jsx还需要再安装两个扩展。 excluse：/node_module 告诉webpack去这个文件夹下找babel的扩展