webpack学习笔记【二】：打包样式资源

loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

处理css文件

在webpack.config.js中进行loader的配置

const { join } = require('path');

module.exports = {
    entry: './src/index.js', // 入口文件
    
    output: {
        filename: 'index.js', // 输出文件名
        path: join(__dirname, 'dist'), // 输出文件的路径
    },
    
    module: {
        rules: [{
            test: /\.css$/, // 文件名以.css为结尾的文件
            use: [
                'style-loader',
                'css-loader',
            ],
        }],
    },
    
    mode: "development", // 当前打包环境为development

loader配置好后，需要安装style-loader, css-loader的依赖

npm i style-loader css-loader -D

执行命令

npm run build:dev

打包成功

可以看到输出的dist/index.js已经将index.css文件处理成功了。

这里说一下，在webpack打包应用loader配置的时候，先去用css-loader处理成commonjs模块（样式字符串）加载到js中，再到style-loader处理，创建style标签，将js中的样式资源插入进去，添加到head中生效。

loader 支持链式调用。链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果（也就是应用过转换后的资源）传递给下一个 loader，依此类推。最后，链中的最后一个 loader，返回 webpack 所期望的 JavaScript。

生成dist/index.js后，我们可以验证一下写的css文件又没有生效。在dist文件夹下，新建index.html，并引入打包生成index.js

在本地打开index.html

可以看到我们写的css样式已经生效了。

处理less文件

src下新建一个less文件

touch index.less

内容为

#box1 {
    height: 100px;
    width: 100px;
    background: black;
    #title {
        color: white;
    }
}

在index.js中引用less文件

import './index.less';

安装less-loader

npm i less-loader -D

修改webpack.config.js的配置项

const { join } = require('path');

module.exports = {
    entry: './src/index.js', // 入口文件
    
    output: {
        filename: 'index.js', // 输出文件名
        path: join(__dirname, 'dist'), // 输出文件的路径
    },
    
    module: {
        rules: [{
            test: /\.css$/, // 文件名以.css为结尾的文件
            use: [
                'style-loader',
                'css-loader',
            ],
        }, {
            test: /\.less$/, // 文件名以.css为结尾的文件
            use: [
                'style-loader',
                'css-loader',
                'less-loader',
            ],
        }],
    },
    
    mode: "development", // 当前打包环境为development

执行webpack打包命令

npm run build:dev

执行命令之后报错，本地依赖中没有less的依赖，需要安装less

npm install less -D

重新执行webpack打包命令，打包成功

打包成功
在dist/index.html中修改标签

    
    
    
    


    

        
webpack
    

本地打开

less样式生效，可以看看控制台的Element样式信息

index.less 与 index.css两个文件分别在head中生成了两个style。less-loader将less文件处理成css语法，然后再通过css-loader与style-loader进行css文件的处理，实现上述所说的链式调用。

MiniCssExtractPlugin 单独抽出css文件

我们经过上面几步处理，css文件会输出在js文件中。且输出的js文件加载在整个html的头部。既然css输出同样可以渲染页面，我们为什么要单独将css文件提取出来呢？

在浏览器去解析html的时候，遇到script标签，会暂停构建DOM，将控制权交给javascript引擎去解析js，等javascript引擎结束以后，浏览器才会从中断构建DOM的地方重新构建DOM。如果执行js的速度过慢，导致DOM已经渲染在页面上，但样式却没有渲染上，js解析完毕后样式渲染上以后，就会导致用户体验不好。所以我们通常，会将css文件单独分离，放在html的头部，而js文件放在整个html的后面。

现在浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，它不会等到所有的HTMl元素解析之后在构建和布局dom树，所以部分内容将被解析并显示。也就是说浏览器能够渲染不完整的dom树和cssom，尽快的减少白屏的时间。

而javascript可能会改变DOM tree的结构，所以需要一个稳定的DOM tree。
javascript加载后会立即执行，同时会阻塞后面的资源加载。

安装 MiniCssExtractPlugin的插件

npm install mini-css-extract-plugin -D

修改webpack.config.js, 由于style-loader是将css处理成style标签放在head里，所以我们用插件替代该loader， 相关配置如下：

const { join } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    ...,
    module: {
        rules: [{
            test: /\.css$/, // 文件名以.css为结尾的文件
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
            ],
        }, {
            test: /\.less$/, // 文件名以.css为结尾的文件
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'less-loader',
            ],
        }],
    },
    
    mode: "development", // 当前打包环境为development
    
    plugins: [
        ...,
        new MiniCssExtractPlugin(),
    ],
}

执行 yarn build:dev，可以看到输出了main.css

css兼容性 postcss-loader

一些css属性的兼容性不是很高，为了方便在写css的时候不考虑属性的兼容性问题，我们可以采用postcss-loader去解决这个问题。

先安装两个依赖postcss-loader和postcss-preset-env, 其中postcss-preset-env 允许开发者使用最新的 CSS 语法而不用担心浏览器兼容性。postcss-preset-env 会将最新的 CSS 语法转换为目标环境的浏览器能够理解的 CSS 语法。

npm install postcss-loader postcss-preset-env -D

修改webpack.config.js的配置

module.exports = {
    ...,
    module: {
        rules: [
            ...
            {
                test: /\.css$/, // 文件名以.css为结尾的文件
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        'postcss-preset-env',
                                    ],
                                ],
                            },
                        },
                    }
                ],
            }
        ],
    },
}

修改package.json, "development" 和 "production" 是指node的环境process.env.NODE_ENV，区别于mode。当中的配置可以参考browserslist的github。

{
    "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

css文件夹中添加一个需要兼容的css属性

执行 yarn build:dev， 查看dist文件夹中分离出的css文件

压缩css

下载插件 optimize-css-assets-webpack-plugin

npm install -D optimize-css-assets-webpack-plugin

修改webpack.config.js的配置

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    ...
    plugins: [
        ...,
        new OptimizeCssAssetsWebpackPlugin(),
    ],
}

执行yarn build:dev , css文件被压缩成一行

可用loader可以参考webpack官网