webpack4.0 - 核心概念之loader，plugins和babel

最新推荐文章于 2025-06-16 22:29:23 发布

原创

最新推荐文章于 2025-06-16 22:29:23 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#loader #plugins #babel #webpack #HMR

什么是loader？

webpack只能打包js模块，其他模块的打包需要借助loader。loader可以处理各种各样文件类型。

file-loader：将文件处理后移动到打包文件中
url-loader：可以实现file-loader的功能，而且可以限制文件限制，在文件比较小的情况下，可以返回一个DataURL，也可以打包字体。file-loader和url-loader，优先使用url-loader

{
    test: /\.(png|jpe?g|gif)$/i,
    use: {
        loader: 'url-loader',
        options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images',
            limit: 10240 // 小文件会打包成base64放到文件中，减少文件请求
        }
    }

}

style-loader，css-loader，postcss-loader：打包css文件
- style-loader：将样式挂在在head里
- css-loader：生成css内容
- postcss-loader：css3新特性加厂商前缀

{
    test: /\.scss$/i,
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                // modules:true, // css模块化，两个文件的样式不会耦合，使样式独立
                importLoaders: 2 /