webpack之loader配置

什么是Loader

官方解释是文件预处理器。​​Loader​​​用于对模块的源代码进行转换。 ​​webpack​​​本身只能处理​​javascript​​​的模块，所以就需要​​Loader​​​来处理其他的任何类型的资源和模块。​​loader​​​ 可以将文件从不同的语言如（​​TypeScript​​​）转换为​​javascript​​​ ,或者是将内联图像转换为dataURL，甚至可以直接在js模块中直接​​import​​​引入​​css​​文件。

打包图片的loader
npm i -D file-loader

打包图片的loader
npm i -D url-loader

打包css的loader
npm i -D style-loader // 得到css-loader的内容后，把样式挂载到head标签中
npm i -D css-loader // 分析所有的css文件的关系，合并成一个css文件
npm i -D postcss-loader // 增加浏览器相关的声明前缀

安装sass-loader
npm i -D sass-loader node-sass

loader的基本配置 

module: { // loader的顺序从下到上，从右到左
    rules: [
        { // 支持vue文件的处理
            test: /\.vue$/,
            use: {
                loader: 'vue-loader' // npm install file-loader -D
            }
        }
    ]
},

file-loader

{
    test: /\.(jpg|png|gif)$/,
    use: {
        loader: 'file-loader', // npm install file-loader -D
        options: {
            name: '[name]_[hash].[ext]', // 打包出的图片的名称[ext]代表后缀
            outputPath: 'images/' // 图片打包到images/文件夹
        }
    }
},

打包字体文件 

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

 url-loader

{
    test: /\.(jpg|png|gif)$/,
    use: { // 会将图片以base64的形式打包到js里面
        loader: 'url-loader', // npm install url-loader -D
        options: {
            name: '[name]_[hash].[ext]', // 使打包出的图片文件名+后缀和以前一样
            outputPath: 'images/', // 图片打包到images/文件夹
            limit: 2048 // <2kb生成base64直接加载到js里 >2kb会在images/生成文件，防止图片过大使得js文件过大，加载慢
        }
    }
},

css-loader

{ // css-loader合并所有的css文件
    test: /\.css$/,
    use: ['style-loader', 'css-loader', 'postcss-loader']
},

安装sass-loader的问题 

npm i -D sass-loader node-sass
如果安装出现报错，更换镜像使用：
npm install node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
再次报错：使用下面
npm install -g node-gyp
npm install --global --production windows-build-tools

{
    test: /\.scss$/,
    // loader执行顺序'sass-loader先翻译成css' =>'css-loader' => 'style-loader'
    // 执行顺序是从下到上，从右到左
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {               
                importLoaders: 2,
                // 如果在index.scss中又引入了sub.scss，
                // 加上这个属性会让sub.scss也经过下面两个loader处理
                // 否则不会经过下面两个loader处理
                modules: true // css模块化,防止全局样式的影响
                // 引入css时 import style from './index.css'
            }
        },
        'sass-loader',
        'postcss-loader' // npm i postcss-loader -D
    ]
},

postcss-loader使用方法 

在项目路径下创建postcss.config.js文件，并安装 npm i autoprefixer -D，文件内容如下

module.exports = {
    plugins: [ // npm i autoprefixer -D
        require('autoprefixer')
    ]
}