webpack再探-loader、plugin

webpack一些基本知识：

提升webpack打包速度有两个关键点：1、node版本尽量新，2、webpack版本尽量新。
高版本webpack会利用nodejs新版本中的一些特性来提高打包速度。
不推荐全局安装webpack，因为全局安装webpack只有一个版本，若安装了4.x版本，而有个项目的webpack是3.x版本，则会导致该版本无法运行
webpack默认配置文件：webpack.config.js，在命令行webpack的时候会自动找到该文件，根据里面的规则进行打包
当自定义webpack配置文件，如：webpack.js时，需要执行 webpack --config webpack.js 即可打包成功
webpack-cli的作用：使得我们可以在命令行中使用webpack这个命令

 

loader介绍：

loader是一个打包方案，当webpack不知道如何打包时，就可以求助于loader。

 

file-loader:

例如当你要打包一张图片(var img=require('./img.png'))，webpack不知道如何打包，会报错，这个时候要借助file-loader来实现：

module:{
    rules:[{
        test:/\.jpg/,
        use:{
            loader:'file-loader'
        }
    }]
}

同理，在vue中我们有这样的写法：import header from 'header.vue'，webpack是无法打包vue文件的，所以需要借助于vue-loader。

默认情况下，webpack把图片打包之后会以hash来命名，如果我们要用原来的名字来命名的话，需要做一些配置：

module:{
    rules:[{
        test:/\.(jpg|png|gif)$/,
        use:{
            loader:'file-loader',
            options:{
                name:'[name].[ext]'     // name:原来的名字，ext：后缀
            }
        }
    }]
}

当我们需要把图片打包到指定位置时，可以在配置项中加一个输出位置：

module:{
    rules:[{
        test:/\.(jpg|png|gif)$/,
        use:{
            loader:'file-loader',
            options:{
                name:'[name].[ext]',     // name:原来的名字，ext：后缀
                outputPath:'images/'     // 图片会打包在dist下的images下
            }
        }
    }]
}

 

url-loader：

url-loader可以做file-loader能做的事，不过当你用url-laoder打包图片时会发现dist目录中并没有图片生成，而页面中图片还是能正确呈现，原因是url-loader将图片转换成base64格式。这个时候会减少一次加载图片的http请求。但是如果文件特别大，则会增大js文件。所以如果图片非常小，才推荐使用url-loader，若图片较大，则推荐使用file-loader

rules:[{
    test:/\.(jpg|png|gif)$/,
    use:{
        loader:'url-loader',
        options:{
            name:'[name].[ext]',     // name:原来的名字，ext：后缀
            outputPath:'images/',
            limit:2048
        }
    }
}]

以上配置会是大于2048B的图片以文件形式打包，不大于2048B的文件以base64形式打包。

 

样式loader：

当我们需要引入css时，需要在进行配置：

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

这样就可以使用ES Module的形式引入：import './index.css';

css-loader会帮我们分析出几个css文件之间的关系，最终把这些css文件合并成一段css，style-loader在得到css-loader生成的css内容的时候，它会把内容挂载到页面的header部分。

当我们需要使用sass、less、stylus等的时候：

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

注意，除了要安装sass-loader，还需要安装node-sass，可以看官方文档。

loader执行顺序是从右到左，在上例中会依次执行sass-loader,css-loader,style-loader。

 

postcss-loader：

在css3中有一些属性如transform，为了兼容性，需要加上前缀：-webkit-，-moz-等这个时候需要用到postcss-loader：

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

要使用postcss-loader，还要配置一个文件postcss.config.js：

module.exports={
    plugins:[
        require('autoprefixer')
    ]
}

当然，autoprefixer这个插件还是要安装的，它会帮我们自动添加前缀。

 

当我们在使用 @import './test.scss' 这样的语法时，需要在'test.css'文件在执行css-loader之前先执行postcss-loader和sass-loader，那么我们就需要配置：

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

以上 importLoders:2 表明在打包引入的test.css时，需要先去执行postcss-loader和sass-laoder。

 

modules概念：

当这样引入 @import './test.scss'; 的时候相当于全局引入了这个文件，会作用于所有模块，那么当我们需要修改其中某个页面样式的时候就非常不方便，会导致全局样式修改，因此我们需要解耦，这个时候需要在css-loader配置项中进行修改：

use:[
    'style-loader',
    {
        loader:'css-loader',
        options:{
            importLoaders:2,
            modules:true
        }
    },
    'sass-loader',
    'postcss-loader'
]

我们引入的方式也要进行修改：@import style from './test.scss';

在使用的时候也要做修改：

var img=new Image();
img.src=avatar;
img.classList.add(style.avatar);

 

打包字体文件：

从iconfont中下载字体文件，放入font文件夹中，将iconfont.css文件中的内容引入，记得修改正确路径，需要配置解析：

{
    test:/\.(eot|svg|woff|ttf)$/,
    use:{
        loader:'file-loader'
    }
}

 

plugin知识：

plugin可以在为webpack打包到某个时刻的时候帮你做一些事情；

htmlWebpackPlugin（打包之后运行）：自动生成一个html文件，并把打包生成的js自动引入到html文件中。

plugins:[
    new HtmlWebpackPlugin({template:'src/index.html'})
],

 

cleanWebpackPlugin（打包之前运行）：会先清除dist目录下的文件：

plugins:[
    new HtmlWebpackPlugin({template:'src/index.html'}),
    new CleanWebpackPlugin()
]