webpack4入门4——loader

本文长期更新，如有错误，还请指正！
关注一下不迷路 =.=

什么是loader

---

类似gulp中的taskes，即任务

webpack除了主营JS，还可以对指定的文件进行统一处理，比如把typescript转换为js，js内导入css等

这些任务都需要安装对应的依赖，且在module.rules配置项中配置（其他方式忽略）

{
    module: {
        rules: [
            //任务配置
            {
                test:regex,//正则,匹配文件规则
                exclude:regex,//正则,不包含的文件夹
                use:[//使用到的loaders及其配置
                    {//某个loader
                        loader:'xx',
                        options:{}
                    }
                ]
            }
        ]
    }
}

以下列举一些常常做的任务

css打包

---

html中不需要引入css文件，通过js间接的获取样式，这样整个html只需要引入一个js文件即可。

• 使用 css-loader 可以在js中直接导入css文件，并在打包时把样式也打包在output文件中

  //比如，其中indexcss名称任意
  import indexcss from './index.css';
  

  在js中使用方式：className直接写名称即可（在引入的文件类）

  如何解决引入多个css重名问题？

• 使用 style-loader 把js中的样式输入到html中的 <style> 标签内

1 . 安装依赖包

cnpm install style-loader css-loader --save-dev

2 . 配置

module: {
    rules: [{
        test: /\.css$/,
        use: [{ 
            loader: "style-loader" 
        },{ 
            loader: "css-loader" 
        }]
        //简写
        //use:["style-loader","css-loader"]
    }]
}

注：options不存在时可简写成数组，注意loader引入的 顺序

贴测试配置图：

image

postcss

---

postcss 是对css的扩展，允许使用下一代 CSS 语法，编译后转换成正常的css且会自动加上前缀

配和 autoprefixer 使用（why?）

1 . 安装

cnpm i  postcss-cssnext autoprefixer --save-dev

2 . 配置

rules: [
    {
        // 使用 PostCSS 处理 CSS 文件
        test: /\.css/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
    },
]   

注意：postcss-loader 应该先执行，再执行 css-loader (倒序)

3 . 创建配置文件 postcss.config.js

module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: 'last 5 version' // 代表意思为每个主流浏览器的最后5个版本
        }
    }
}

less

---

处理less文件，一般和上面的css-loader style-loader一起使用

1 . 安装依赖包

cnpm install less-loader less --save-dev

2 . 配置

在上面的use加入

{loader: "less-loader"}

注：注意顺序，链式调用，放在最后

图片移动和打包

css既然都放在js中了，为什么图片不可以呢？

• file-loader

  css打包会导致个问题：写background图片路径可能是按照css文件相对路径计算的，那么打包进js后值未改变，会导致路径错误。（还有什么地方用到？）

  file-loader 解决了这个问题：它把都图片移动到指定的位置，并修改url

  另外，也允许使用import导入图片，被计算出正确的路径，后续使用这个路径作为图片的正确路径

  import banner1 from "../../images/banner1.jpg";
  <img src={banner1} />
  

• url-loader

  它把一部分图片转换为base64编码打包进js中，实际上是对file-loader的上层封装（但不依赖，内置file-loader）

  注：虽然不依赖，但是图片import还需要它，url-loader只转编码

1 . 安装依赖包

cnpm install url-loader file-loader --save-dev

2 . 配置

{
    test: /\.(png|jpg|gif)$/,
    use: [{ 
        loader: "url-loader",
        options:{
            limit: 8192, //单位byte，小于8KB的图片都会被编码(base64)放打包在js中
            name: 'images/[name].[ext]' //图片复制到指定位置
        }
    }]
}

贴测试配置图：

image

img1.jpg（小于8kb）和img2.jpg（大）

打包后img1被打包进了js里，img2由于超过指定大小被复制到了指定位置 且 background中的url路径被更改

image

ES6转ES5 ES3

---

babel-loader 它把ES6转换成低版本的js代码以在低版本浏览器中运行（大部分浏览器不能完全支持es6）

1 . 安装依赖包

cnpm install babel-loader babel-core babel-preset-env --save-dev

2 . 配置

{
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,//只是节约打包时间，这些文件夹内的js不会babal处理
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['env','react'],//react 支持react
            plugins:['syntax-dynamic-import','babel-plugin-transform-object-rest-spread'] 
            //syntax-dynamic-import动态语法支持
            //babel-plugin-transform-object-rest-spread对象的...语法支持
        }
    }
}

支持React

---

1 . 额外依赖包

cnpm install babel-preset-react --save-dev

附react安装

cnpm install react react-dom --save

2. 额外配置

preset中加入react

presets: ['env','react']