webpack 基础到构建（三）

        从前面两章，大概得到了最为简单的webpack项目工程目录，下面将构建更符合项目需求和真实场景需求的webpack项目；
        此前如果碰到的webpack打包命令不通过，又或是npx webpack-dev-server没通过，又或是最后的options设置报错，都几乎是版本问题，像如果options没有通过的，不影响最终结果，即我们学习的目的，那么，暂且记录下，继续接着往下学习吧，工程科朋友工程化的思维应该被允许扩散的范围不止在代码上；
        此前都是Mode为'development'的情况下的，而且很多的情况都没有做考虑，比如使用css-loader解析成js内容，再使用style-loader插入head标签，如果css很多【而且不符合css区间性隔离】，js就很大，而且后续插入可能会产生闪屏现象等问题都没有进行更深层次的处理；
        所以，此节及后节都要处理这些问题，此前提高的压缩和兼容等，让代码更快更健壮的运行。

八，Css处理

    8.1 单独css文件处理
        ---使用插件mini-css-extract-plugin

        css文件单独化，那么意味着所有的样式资源都不再使用style-loader的形式进行插入，所以...
        a)，注释样式资源的style-loader的设置，包括目前已经测试的less，css；
        b)，按照插件使用三步走后，将style-loader更替为现有的MiniCssExtractPlugin（引入时的命名）的loader；
        c)，配置插件第三步需要配置输出，使用
                 new MiniCssExtractPlugin({            
                        // 对输出文件重命名    
                        filename: 'css/main.css'     
                 })
            即可。
           d)，webpack打包后将会发现，dist下生产css的文件夹，以及生成新的main.css；【这里需要删除之前的dist文件，以免造成验证失败】

8.1注释style-loader，添加mini的loader

    8.2 css兼容   
        ---需要使用loader：postcss-loader  postcss-preset-env，兼容性css代码一般是在样式资源前添加前缀，这里还可以使用postcss-loader和Autoprefix，为了不在本文中产生纠结的情绪，大家自己可以去试试；
        介绍： postcss-preset-env是通过package.json中的 browserslist设置来判定划定的兼容范围；
        这里的使用有兼容的问题，又或者是我使用不对，所以，这里的loader跟之前的使用是不一致的，所以，这里将写入详细介绍：

        流程： 1，下载loader
                    2，引入loader【 const PostcssPresetEnv = require('postcss-preset-env'); 】
                    3，使用postcss【下图8.2.1】

图8.2.1 ，这里写在less处理中，避免css处理顺序问题，css处理也需要添加

                     4，通过process.env.NODE_ENV设置环境配置 【webpack.config.js中添加process.env.NODE_ENV = 'development';】，如果不设置此项，将默认为生产环境，那么将会结合browserslist中的prodocution设置，由于生产环境设置需要更为详细的，所以webpack打包将做更多的事情，不利于我们的本地调试；大家可以在css样式中多写一些兼容性css代码去测试下就知道了；
                     5，package.json中添加browserslist【图8.2.2】

图8.2.2

删除原有的dist，打包运行，打开新的css文件，将会看到有前缀的兼容性css代码；

8.3 压缩css
     ---引入插件： optimize-css-assets-webpack-plugin

       三步法后，直接webpack打包即可查看css压缩，自行可对比体积