webpack4 学习 --- 使用loader处理静态资源

　　webpack 是利用loader 来处理各种资源的，wepback的配置基本上就是为各种资源文件，指定不同类型的loader。

　　1，处理css

　　最基本的css 处理loader 是css-loader , style-loader.  css-loader 处理的是css 中的@import 和url, 根据路径(相对路径)找到相应的资源，但它不处理具体的资源，比如，img, 是由file-loader或url-loader 来处理的，这个以后再说. style-loader则是把打包后的css文件插入到html中，具体的方法是，它会生成一个内联的style 标签，然后把css注入到这个style标签中，它实现了模块热更新，修改css样式的时候，页面不会强制刷新，就能看到变化。那就npm install css-loader  style-loader --save-dev 安装它们。 安装完成后，在webpack中进行配置。配置文件中有一个module属性，module 属性下面有一个rules 属性，它是一个数组，loaders 的配置写在它的里面，每一个配置项都是一个对象，test 属性， 值是正则表达式，指明要处理哪种文件，use 属性，使用哪一种loader, 最简单的配置如下

const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,  // 正则表达式，指明要处理的文件类型
                use: ['style-loader', 'css-loader']  // 处理资源所使用的loader, 要注意loader的顺序，从右向左执行
            }
        ]
    },
    devServer: {
        contentBase:'build', 
        proxy: {
            '/api': 'http://102.03.34.58/api'
        },
        port: 9000,  // 设置端口号
        stats: 'errors-only', // 只有产生错误的时候，才显示错误信息，日志的输出等级是error.
        overlay: true // 当有编译错误的时候，在浏览器页面上显示。
    },
    plugins: [
        new htmlWebpackPlugin()
    ]
}

　　写一点css样式，看配置有没有生效，在src 目录下，新建一个css文件夹，里面写一个style.css文件，随便写一点样式，

body {
  background: blue;
}

　　然后在index.js 中引入import ‘./css/style.css’.

// 引入css 样式
import './css/style.scss';

import component from './component';
document.body.appendChild(component())

　　npm run dev 启动服务器，可以看到页面有了背景色，这时我们可以随便更改body的背景色，页面也会时时做出了变化，非常方便开发。

　　当然，你可能使用css 预处理器， less, sass stylus等， 这也简单，安装相应的loader 就可以了，

　　less: npm install less less-loader --save-dev,  

　　sass： npm install node-sass, sass-loader --save -dev,

　　stylus, npm install stylus, stylus-loader --save-dev,

　　然后在use中增加一条相应的loader

 rules: [
            {
                test: /.css$/,  // 正则表达式，指明要处理的文件类型
                use: ['style-loader', 'css-loader']  // 处理资源所使用的loader, 要注意loader的顺序，从右向左执行
            },
            {
                test: /.less$/, 
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /.scss$/, 
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /.styl$/, 
                use: ['style-loader', 'css-loader', 'stylus-loader']
            }
        ]

　　最后再来说一下PostCSS,  它的配置稍微麻烦一点，因为PostCSS是由插件来起作用的，使用哪个功能，就要安装哪个插件，如果只安装postcss-loader, 它并不起作用，这和babel-loader一样， 比如要使用添加浏览器厂商前缀的功能, 在安装postcss, postcss-loader 后，还要安装对应的插件autoprefixer ,   npm install postcss, postcss-loader, autoprefixer --save-dev.  安装完成后，就要进行配置。对于纯css 来说，我们最先使用postcss-loader, 所以postcss-loader要放到最右边，但是又不能只写一个postcss-loader 放在那里，因为它自己不起作用，需要对postcss-loader进行配置。配置的方式有两种，一种是在webpack的配置文件中，一个是单独给postcss写一个配置文件。

　　如果在wepback的配置文件中配置postcss-loader，那postcss-loader 就不能是一个字符串了，要是一个对象， loader属性 是我们指定的loader, options 就是我们指定的配置项，对于postcss-loader 来说，它的配置项是plugins, 使用到的插件， 是一个函数，返回一个数组，数组中就包括用到的插件。

{
                test: /.css$/,  
                use: ['style-loader', 'css-loader',
                    {   // 使用对象对postcss-loader进行配置，对象有两个属性loader, options 
                        // loader属性就是指定使用的loader, options 就是该loader的配置项，也是一个对象
                        loader: 'postcss-loader', 
                        options: {
                            plugins: () => ([
                                require('autoprefixer')()
                            ])
                        }
                    }
                ]  
            }

　　但是当我们使用很多插件进行开发，这样在配置文件中进行配置就很麻烦了，也会导致配置文件比较庞大，这时就要使用PostCSS配置文件，它的配置文件有很多格式，json, yml, js的都可以，有兴趣的可以看一下官方文档。我在这里就使用postcss.config.js. 在项目根目录下建立一个postcss.config.js 文件，它的格式如下，module-export 出一个带有plugins属性的对象。plugins属性也是一个对象，属性名就是使用的插件的名称，属性值是一个对象，对这个插件的配置。

module.exports = {
  plugins: {
    "autoprefixer": {
      browsers: [
          // 加这个后可以出现额外的兼容性前缀
          "> 0.01%"
      ]
    }
  }
}

　　使用配置文件后，webpack的配置文件还原到以前的状态，

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

　　现在在style.css中给body, 添加box-sizing: border-box; 看一下效果。

body {
  background: blue;
  box-sizing: border-box;
}

　　打开浏览器控制台，可以看到添加了webkit- 的浏览器厂商前缀。

　　当使用css 预处理的时候，它要放到预处理器loader 的后面, 也就是说，先使用预处理器loader, 再使用postcss-loader. 当然配置还是一样的。以scss 为例

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

 　　但是这里会存在一个问题，就是当样式文件中，有@import 的时候，你会发现postcss-loader 并没有起对import 进来的文件起作用，这时在css 文件夹中，再建一个文件夹，box.css

div {
  display: flex;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
}

　　然后在style.css 里面@import 引入box.css;

/* @import 语句结尾要加分号 */
@import url(box.css);  
body {
  box-sizing: border-box;
}

　　打开浏览器控制台，找到div.css的样式，你会发现display:flex 并没有加前缀。

　　这时要给css-loader 设置一个属性，importLoaders, 它的值为一个数字，表示css-loader 前面有几个loader 要处理，对于纯css来说，它前面有一个loader, postcss-loader,  所以importLoaders 的取值为1. 

{
                test: /.css$/,  
                use: ['style-loader', 
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1
                        }
                    }, 
                'postcss-loader']  
}

　　但是对于css预处理器来说，css-laoder 前面有个loader, postcss-loader 和预处理器loader,所以importLoaders的取值为2.

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

 　　2，处理图片

　　处理图片主要用到两个loader: url-loader style-loader. url-loader的作用是把图片转化成base64编码的字符串，然后内嵌到到js文件中。 file-loader 则是把图片打包成一个个单独的图片文件，并返回它们的路径。但是这里有一个问题，我想把小的图片内嵌到js中， 大的图片打包成一个个单独的文件，怎么办？这时需要对url-loader进行配置，它有一个limit属性，取值为多少k， 表示的意思时，当小于limit时，直接把图片打包到js中，当大于limit时，就使用file-loader 打包成一个单独的文件，当然我们也可以给打包成的图片起一个名字，那就要配置name属性，当使用file-loader 生成图片的时候，它会生成一个MD5 的hash值，我们可以利用这个hash值给文件命名，name: “[name].[hash].[ext]”， name： 要打包的图片以前的文件名，hash file-loader 生成的hash值，ext, 打包后的图片以前的后缀名。当然，我们想把图片统一打包到一个文件夹中。可以name 放一个文件夹名 ‘img/[name].[hash].[ext]’

　　　　　　　　　{
                test: /.(jpg|png|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 2000,
                        name: '/images/[name].[hash].[ext]'
                    }
                }
            }

　　3，处理字体

　　Fonts 的处理方式和image的处理方式一致，也是url-loader, file-loader, 

{
    test: /.(ttf|eot|woff|woff2)$/,
    use: {
        loader: "url-loader",
        options: {
            limit: 50000,
            mimetype: "application/font-woff",
            name: "./fonts/[name].[ext]"
        }
    }
}

　　4, 处理js

　　js的处理用到的loader 是babel-loader，babel-loader 要依赖@babel/core, 现在babel升级到7了，以前的babel-core 要改成@babel/core, 感觉babel 7 是把babel 所有功能都放到了@babel的命名空间下，所有的presets 和plugins 都以@babel 开始，然后是/， 最后才是相应的preset或plugin. 先安装上babel-loader @babel/core再说, npm install babel-loader @babel/core --save-dev 然后在webpack的配置文件中配置一下，

 {
        test: /.js$/,
        loader: 'babel-loader'
}

　　这时执行一下npm run build, 你会发现有两个问题，一是打包非常慢，因为 webpack 进行打包的时候，会把所有的js代码都会打包一下，包括node_modules 下面的代码，但是node_modules下面的代码根本就没有必要进行打包，所以要排除掉, 要用到 exclude 配置项，我觉得使用include 更好，include是表示要打包的代码，我们书写的代码在src下面，所以include 配置成src 目录就可以了。

{
    test: /.js$/,
    loader: 'babel-loader',
    include: path.join(__dirname, 'src'),
    exclude: path.join(__dirname, 'node_modules'),
}

　　 二是打包后的代码和以前的代码并没有多少不同？这是因为@babel/core 本身不起作用，而是要依赖插件，一个一个插件写起来太麻烦，所以babel 提供了插件的集合presets @babel/preset-env, npm install @babel/preset-env --save-dev， 安装成功后，怎么告诉babel-loader 使用presets 呢？ 使用babel的配置文件 .babelrc， 在项目根目录想建立.babelrc， 内容如下，

{
    "presets": [
        "@babel/preset-env"
    ]
}

　　有时候，你想使用最新的功能，它并没有包含在preset-env中，那就要单独安装babel的插件了，你想使用什么功能，就安装什么的插件，比如使用 class properties ,就是安装

@babel/plugin-proposal-class-properties， 然后在babel 的配置文件中配置plugins

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

 　　5 配置resolve， 主要是简化引入组件或库的方式

　　　　当引入css 文件的时候， 要写import './style.css' ，文件的后缀名也要写全，比较麻烦。不想写后缀，怎么办， 就要在resolve中配置extensions,'.css',  只要引入文件的时候，不想写后缀，就要在extensions 中配哪类文件的后缀

resolve: {
    extensions: ['.css', '.js', '.json', '.vue']
}

　　resolve 的配置项和module ,plugins 一个等级， 它还有一个比较常用的配置项是alias别名，当在代码文件解析时，如果碰到一个名字，它实际指代的另外一个内容，比如vue的配置文件中，alias 配置了'vue', 当在代码中，import vue from 'vue' 时，它引用 就是alias 中配置的vue. 还有就是当我们引入一个模块时，层级太深, import '../../../css/index.css'， 这时就可以声明一个alias, 指代一个文件夹

resolve: {
        extensions: ['.css', '.js', '.json', '.vue'],
        alias: {
            '@': 'src'
        }
    }