7. webpack 将css从js中抽离、css兼容性处理、css压缩

需要的loader/插件

• style-loader
• css-loader
• html-webpack-plugin
• mini-css-extract-plugin 将css提取成一个单独的文件
• postcss-loader css兼容性处理
• postcss-preset-env 识别postcss所在的环境
• optimize-css-assets-webpack-plugin 插件，压缩css

(一) 将css从js文件中抽离

1. 安装mini-css-extract-plugin

   npm i mini-css-extract-plugin -D
   

2. 新建入口文件src/index.js，并引入css文件

   import './css/base.css';
   import './css/common.css';
   

3. 新建src/css/base.css文件

   .box1{
         
         
       width: 100px;
       height: 100px;
       background-color: pink;
   }
   

4. 新建src/css/common.css文件

   .box2{
         
         
       width: 200px;
       height: 200px;
       background-color: red;
   }
   

5. 新建模板文件src/index.html文件

   <div class="box1"></div>
   <div class="box2"></div>
   

6. 在项目根目录下修改webpack配置文件webpack.config.js

   const path = require('path');
   
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const miniCssExtractPlugin = require('mini-css-extract-plugin')
   
   module.exports = {
         
         
       mode: 'development',
       entry: './src/index.js',
       output: {
         
         
           filename: 'built.js',
           path: path.resolve(__dirname, 'bulid')
       },
       module: {
         
         
           rules: [
               //处理css文件
               {
         
         
                   test: /\.css$/,
                   use: [miniCssExtractPlugin.loader, 'css-loader']
               },
           ]
       },
       plugins: [
           //以自己的html为模板
           new HtmlWebpackPlugin({
         
         
               template: './src/index.html'
           }),
           new miniCssExtractPlugin({
         
         
               //对输出css文件放入到css文件夹中并进行重新命名,会将所有文件都打包进bulit.css文件中
               filename:'css/bulit.css'
           })
       ]
   }
   

7. 进行打包

   webpack
   

(二) css兼容性处理

• [1]. postcss-preset-env帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css样式。
• [2]. browserslist配置：https://www.npmjs.com/package/browserslist
• [3]. browserslist中的development和production表示开发环境和生产环境，默认是生产环境，通过修改nodejs的环境变量process.env.NODE_ENV='development’来改变

1. 安装postcss-loader和postcss-preset-env

   npm i postcss-loader postcss-preset-env -D
   

2. 在入口文件中src/index.js引入base.css文件

   import './css/base.css'
   

3. 创建src/css/base.css文件

   .box{
         
         
      display: flex;
      backface-visibility: hidden;
      transform: rotate(30deg);
      width: 100px;
      height: 100px;
      background-color: pink;
   }
   

4. 新建模板文件src/index.html

   <div class="box"></div>
   

5. 在项目根目录下配置webpack的配置文件webpack.config.js

   const path = require('path');
   
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
   
   process.env.NODE_ENV = 'production';
   
   module.exports = {
         
         
       mode: 'development',
       entry: './src/index.js',
       output: {
         
         
           filename: 'built.js',
           path: path.resolve(__dirname, 'bulid')
       },
       module: {
         
         
           rules: [{
         
         
               test: /\.css$/,
               use: [
                   MiniCssExtractPlugin.loader,
                   'css-loader',
                   {
         
         
                       loader: 'postcss-loader',
                       options: {
         
         
                           //固定写法
                           ident: 'postcss',
                           plugins: () => [
                               require('postcss-preset-env')()
                           ]
                       }
                   }
               ]
           }, ]
       },
       plugins: [
           new HtmlWebpackPlugin({
         
         
               template: './src/index.html'
           }),
           new MiniCssExtractPlugin({
         
         
               filename: 'css/bulit.css'
           }),
           new OptimizeCssAssetsWebpackPlugin()
       ]
   }
   

6. 根目录下package.json文件，配置browserslist
   使用时记得删除注释

   "browserslist":{
         
         
       "development":[ //开发环境
           "last 1 chrome version", //兼容最新的谷歌浏览器
           "last 1 firefox version",//兼容最新的火狐浏览器
           "last 1 safari version"//兼容最新的苹果浏览器
       ],
       "production":[//生产环境
           ">0.2%",//兼容市场大部分浏览器
           "not dead", // 不兼容已经不使用的浏览器
           "not op_mini all" //不兼容op_mini浏览器
       ]
   }
   

7. 通过webpack.config.js修改nodejs的环境变量使postcss根据不同环境变量使用不同的配置

   process.env.NODE_ENV = 'development';
   

8. 进行打包

   webpack
   

(三) css压缩

1. 下载 optimize-css-assets-webpack-plugin

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

2. 在上个例子的基础上修改webpack.config.js文件

   ...
   const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
   ...
   module.exports = {
         
         
   	...
   	plugins: [
           ...
           new OptimizeCssAssetsWebpackPlugin()
       ]
   }
   

3. 进行打包

   webpack