webpack之常用loader安装及配置方式和常见问题

babel-loader

用来处理ES6＋并将其编译成ES5，它使我们能够在工程中使用最新的语言特性（甚至在提案中），同时不必特别关注这些特性在不同平台的兼容问题。

安装方式:

npm i babel-loader @babel/core @babel/preset-env -D

• babel-loader：它是使Babel与webpack协同工作的模块
• @babel/core: 很明显，它是Babel的核心代码
• @babel/preset-env：它是Babel官方推荐的预置器，可根据用户设置的目标环境自动添加所需的插件和补丁来编译ES6+代码。

配置如下：

            {
                test:/\.js$/,
                exclude: /node_modules/,
                use:{
                    loader: 'babel-loader',
                    options:{
                        cacheDirectory: true,//缓存机制，在重复打包未改变过的模块时防止二次编译
                        presets:[
                            [
                                '@babel/env',
                                {
                                  modules:false //因为babel的preset-env会将ES6 module转化为Common.js的形式，会导致webpack中tree-shaking特性失效，所有将modules置为false,交给webpack自身处理
                                }
                            ]
                        ]
                    }
                }
            }

需要注意babel-loader支持从.babelrc文件读取配置，因为可以将preset和plugins从webpack配置文件中提取出来，也能达到相同的效果。

ts-loader

顾名思义，转换TypeScript
安装方式：

npm i ts-loader typescript  

配置如下：

            {
                test:/\.ts$/,
                use:'ts-loader'
            }

需要注意的是，TypeScript本身的配置并不在ts-loader当中，而是必要再放在工程目录下的tsconfig.json当中

html-loader

用于将HTML文件转化为字符串并进行格式化，这使我们可以把一个HTML片段通过js加载进来
安装方式：

npm install html-loader

配置如下：

            {
                test: /\.html$/,
                use:'html-loader'
            }

file-loader

用于打包文件类型的资源，并返回其publicPath
安装方式：

npm i file-loader -D

配置如下

            {
                test:/\.(png|gif|jpe?g)$/,
                use:'file-loader'
            }

url-loader

url-loader和file-loader作用类似，唯一不同的在于用户可以设置一个阈值，当大于该阈值时和file-loader一样，返回publicPath，而小于该阈值时则返回文件的base64形式编码
安装方式：

npm i url-loader -D

配置如下

            {
                test:/\.(png|gif|jpe?g)$/,
                use:{
                     loader: 'url-loader',
                     options:{
                       limit: 1024,
                       name: '[name].[ext]',
                    }
                }
            }

需要注意的是，publicPath路径问题，需要根据自身项目路径来配，publicPath指的是间接资源的位置，也就是通过首次文件再进一步加载的,
还需要注意的是，url-loader在升级后，默认使用的是ES modules语法的JS模块，也就是说，在图片打包之后，页面上显示如以下所示：

是对象的形式，那么解决方案有两种，
一种是加default，如下图所示:

一种就是取消es module，在webpack配置文件的url-loader配置，如下图所示:

css-loader

用来处理css各种加载语法，如import等
安装方式：

npm i css-loader -D

配置如下：

            {
                test:/\.css$/,
                use: 'css-loader',
                exclude: /node_modules/
            }

需要注意的是，css-loader需要和style-loader一起使用，因为css-loader只是处理css的各种加载语法，如@import和url()，而style-loader才是真正起作用的，用来将css-loader生成的样式表通过<style>标签，插入到页面中去
style-loader安装如下

npm i style-loader -D

配置如下：

            {
                test:/\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }

这里需要注意，style-loader要放css-loader前面，因为webpack是按照从后往前的顺序将资源交给loader处理的

vue-loader

用于处理vue组件
安装如下：

npm i vue-loader vue-template-compiler -D

配置如下：

            {
                test:/\.vue$/,
                use: 'vue-loader'
            }

---

sass

 npm i sass-loader node-sass -D

配置如下：

            {
                test:/\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }

postcss

它只是一个编译插件的容器，它的工作模式是接受样式原代码并交由编译插件处理，最后输出css，它最广泛的场景就是和autoprefixer一起使用

npm i postcss-loader autoprefixer -D

配置如下

            {
                test:/\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'postcss-loader'
                ]
            }

因为postcss要求必须有一个单独的配置文件，所以需添加postcss.config.js,常用配置如下：

const autoprefixer = require('autoprefixer')

module.exports = {
    plugins: [
        autoprefixer({
            grid: true,
            overrideBrowserslist: [
                '> 1%',
                'last 3 versions',
                'android > 4.2',
                'ie > 8'
            ]
        })
    ]
}

last-modify:2020/6/1 22:19 未完待续~