webpack 之(10) css 提取,兼容,压缩

生产环境:能让代码优化上线运行的环境

提问:css打包在js文件中会出现什么情况?

答:css在js中,这样js文件体积变得非常大,下载就会非常慢,因为是先加载js,先执行js代码,然后创建style标签加载在页面中,那么页面就会出现闪屏现象,所以需要将css文件内容从js中提取出来

需要做哪些优化:

1/将css抽离出来

2/统一对代码进行压缩

3/部分样式问题和js存在兼容性问题

这样做的好处

1/能够让代码更快的运行,性能更好

2/能够让代码在各个浏览器中平稳的运行,不出现问题

注意命令webpack  和 npx webpack-dev-server的区别 

  webpack:用于打包

  npx webpack-dev-server:用于编译打包,没有输出

提取

重点内容:

 需要安装包: npm i mini-css-extract-plugin 

 在module的rules部分,对css的处理,需要去掉style-loader 变为 MiniCssExtractPlugin.loader

可以通过new MiniCssExtractPlugin({ filename:'css/built.css' }) 进行重命名,默认是 main.css文件

 "css-loader": "^5.2.4",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.5.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1"

const {resolve} = require('path')
const HtmlWebpackPlugin  = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/.css$/,
        use:[
          //创建style标签,将样式放入
          // 'style-loader',
          //这个loader取代style-loader.作用:提取css成单独文件
          MiniCssExtractPlugin.loader,
          //将css文件整合到js文件中
          'css-loader']
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'  //将复制该文件打包到新的文件中
    }),
    new MiniCssExtractPlugin({
      //对输出文件进行重命名
      filename: 'css/built.css'
    })
  ],
  mode:'development'
}

兼容

注意点:

   需要和webpack.config.js同级添加一个postcss.config.js文件,因为以前的写法不支持了(看下面内容)

   同时用得到了 postcss-loader 和 postcss-preset-env 插件

   需要在package.json中配置css的兼容处理browserslist

{
  "name": "09tiqucss",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^5.2.4",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.5.0",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

const {resolve} = require('path')
const HtmlWebpackPlugin  = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//设置node环境变量,这一句不写就是默认生产环境
process.env.NODE_ENV = 'development'

module.exports = {
  entry:'./src/js/index.js',
  output:{
    filename:'js/built.js',
    path:resolve(__dirname,'build')
  },
  module:{
    rules:[
      {
        test:/.css$/,
        use:[
          //创建style标签,将样式放入
          // 'style-loader',
          //这个loader取代style-loader.作用:提取css成单独文件
          MiniCssExtractPlugin.loader,
          //将css文件整合到js文件中
          'css-loader',
          /* 
          css兼容性处理: postcss --> postcss-loader  postcss-preset-env(插件) 
          这个插件帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式
          "browserslist":{
            //开发环境 -->设置node环境变量:process.env.NODE_ENV = development
            "development":[
              "last 1 chrome version", //最近的chrome浏览器
              "last 1 firefox version",//最近的firefox浏览器W
              "last 1 safari version" //最近的safari浏览器
            ],
            //生产环境:默认是看生产环境的,与下面的 mode:development 无关
            "production":[
              ">0.2%",   //表示所有的浏览器了
              "not dead", //不要死了的浏览器 ie10
              "not op_mini all" //不要欧鹏的浏览器

            ]
          }
          */
          /* 
          使用loader的默认配置 
          'postcss-loader'
          修改loader的配置(如下)
          */
          {
            loader:'postcss-loader',
          /*  
           //不支持这种写法,而是抽离成postcss.config.js文件,抽离的文件是不需要任何引入的
            options:{
              ident:'postcss',
              plugins: () => [
                require('postcss-preset-env')()
              ]
            } */
          }
        ]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html'  //将复制该文件打包到新的文件中
    }),
    new MiniCssExtractPlugin({
      //对输出文件进行重命名
      filename: 'css/built.css'
    })
  ],
  mode:'development'
}

压缩

添加一个插件即可进行压缩

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

在webpack.config.js文件中的plugins属性

plugins:[
  //默认配置就足够进行压缩了
  new OptimizeCssAssetsWebpackPlugin()
]