devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

webpack学习（二）_optimizecssassetsplugin

作者：繁依Fanyi0 | 2024-03-14 06:45:56

赞

踩

optimizecssassetsplugin

webpack学习（一）

css压缩处理

css压缩主要用到的是optimize-css-assets-webpack-plugin

npm install --save-dev optimize-css-assets-webpack-plugin

  • 1

  1. 引入
    var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

  2. plugins中new
    new OptimizeCssAssetsPlugin()

js的eslint

  • 语法检查用到的是eslint-loader==》依赖eslint (npm install这两个)
  • 只检查自己写的源代码，第三方库自己检查过了，我们不需要检查。而且eslint只针对js,
    所以我们用exclude排除node_modules
  • 需要我们自己设置检查规则，在package.json中的eslintConfig中设置：aribnb(一个js风格指南)
    “eslintConfig”: {
    “extends”: “airbnb-base”
    }
  • airbnb=>eslint-config-airbnb-base eslint eslint-plugin-import

webpack.config.js

// 当运行webpack时，会加载这个文件中色配置，指示webpack怎么干活

const { resolve } = require("path"); // nodejs的一个模块  resolve用来拼接绝对路径
// 自动生成html的插件-根据模板页面生成新的页面
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除之前打包的文件
var CleanWebpackPlugin = require('clean-webpack-plugin');
//这个插件可以把css单独打包成一个文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 设置一下node环境变量一下
 process.env.NODE_ENV = "development"
//所有构建工具都是基于nodejs平台运行的，使用commonjs
module.exports = {
    //入口文件
    entry:"./src/index.js",
    //输出文件
    output:{
        //输出文件名
        filename: "main.js",   //filename:"js/main.js" 就会将文件打包到js目录下的main.js
        //输出路径
        //_dirname是nodejs变量，代表当前文件（即webpack.config.js）的绝对路径 __dirname就是module-A
        path:resolve(__dirname,"build")

    },
    //loader的配置
    module: {
        rules:[
            // 语法检查： eslint-loader eslint
            // 注意：只检查自己写的源代码，第三方库自己检查过了，我们不需要检查。而且eslint只针对js,
            //所以我们用exclude排除node_modules
            //需要我们自己设置检查规则，在package.json中的eslintConfig中设置：aribnb(一个js风格指南)
            // "eslintConfig": {
            //     "extends": "airbnb-base"
            //   }
            //airbnb=>eslint-config-airbnb-base eslint eslint-plugin-import
            {
                test: /\.js$/,
                loader: 'eslint-loader',
                exclude: /node_modules/,
                options: {
                    //eslint检查出现的错误，通过fix：true会自动修复
                    //此时一些本来红色的报错就会消失，会有一些黄色的警告
                    //比如console，可以通过 //eslint-disable-next-line 不进行eslint检查
                    fix: true
                }

            },
        
            //详细loader配置
            {
                //test 通常用正则表达式，表示匹配那些文件
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader:"postcss-loader",
                        //如果是使用autoprefixer插件
			                         options:{
			            postcssOptions:{
			              plugins:[require('autoprefixer')({
			                overrideBrowserslist:['last 2 versions','>1%',"ios 7"]
			              })]
			            }
			          }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67

                  
                      // options: {
                           // ident: 'postcss',
                           //postcssOptions: {
                              // plugins: [
                               //    require("postcss-preset-env")(), 
                               //]
                          // } //postcss的插件
                      // }
                   }
                      ]
           },
           {
               test: /\.(jpg|png|gif)$/,
               //下载 url-loader和file-lodaer,因为url-loader依赖file-loader
               loader:"url-loader",
               options:{
                   //图片大小小于 8kb 会base64处理
                   //base64优点：减少请求数量（减轻服务器压力） 缺点：体积会变大，文件请求速度变慢
                   // 8-12kb以下的图片用base64处理
                   limit: 8*1024,
                   //打包后图片的名字是hash值，所以[hash: 10]表示取前十位hash,
                   //ext表示用原来的扩展名
                   name:'[hash:10].[ext]',
                   // //关闭es6模块化
                   esModule: false,
                    outputPath:"imgs" //会将打包后的图片放到imgs下

               }
           },
           { 
               test: /\.html$/,
               //专门处理html文件中的图片，负责引入图片，从而可以被url-loader处理
               loader: 'html-loader',
               options:{
                   //url-loader默认使用es6的模块化解析，html打包后引入的图片是commonjs引入
                   //解决：关闭url-loader的esModule
                   esModule:false,
                   }
           },
       ]
   },
   plugins:[
       //默认创建一个空的html，自动引入打包输出的所有资源(js/css)
       //template会提供‘index.html’作为模板，将js资源用script引入，css用link引入
       new HtmlWebpackPlugin({template: "./src/index.html"}),
       new MiniCssExtractPlugin({filename:'css/main.css'}),
       new OptimizeCssAssetsPlugin()

   ],
   //模式
   mode:"development", //production'
   devServer: {
       contentBase: resolve(__dirname,"build"),  //代表要运行的项目的目录，构建后的项目路径
       compress: true, //启动GZIP压缩，让代码体积更小
       port: 3000, //端口
       open: true, //是否默认打开浏览器
   }

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61

package.json

{
  "name": "module-A",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.4",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.23.4",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^8.1.1",
    "mini-css-extract-plugin": "^2.1.0",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "postcss": "^8.3.6",
    "postcss-loader": "^6.1.1",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.33.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      "ie > 6",
      ">1%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52

js兼容性处理

  • 我们在进行兼容性处理之前，js代码中的const let等es6的语法，打包后还是const let会在ie等浏览器存在兼容问题

1.使用babel-loader进行兼容性处理
2.下载babel-loader @babel/preset-env @babel/core

注意： bable-loader一定要在8版本以上， @babel/preset-env @babel/core在以前的版本是 babel-preset-env babel-core会和8版本的babael-loader不兼容


const { resolve } = require("path");
module.exports = {
    entry: './index.js', 
    output: {
        filename: 'bundle.js',
        path: resolve(__dirname,"build")
    },
    module:{ 
        rules:[
      //原则上一个文件只能被一个loader进行处理，但是js文件需要eslint也需要babel。那么此时就一定要注意书写顺序，一定要eslint在babel上面
    //原因如下：1，eslint检查出错，下面的一切执行都没有意义了。2，babel会将es6转换成es5，var这些在eslint看来是错误
    //可以给eslint-loader加一个配置enforce:"pre"
    //loader的配置
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: ["@babel/preset-env"]
                }
            }
        ]

    },
    mode:"development", //production'

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

至此，我们可以完成基本的je6转换为es5,比如const,let，箭头函数等。但是我们想要转换promise这些，就不能实现了。我们需要下载新的一个插件

全部js的兼容性处理：@babel/polyfill

在我们打包前的源码js中直接 import "@babel/polyfill"
*引用上面的插件会产生一个问题，就是打包后的文件体积过大，我们其实只是想处理部分兼容性问题，却引用了所有的兼容性处理包，需要做成按需====》core-js*
npm i core-js -D
使用这个插件之后，就不要再js中引入polyfill了

//webpack.config.js

const { resolve } = require("path");
module.exports = {
    entry: './index.js', 
    output: {
        filename: 'bundle.js',
        path: resolve(__dirname,"build")
    },
    module:{ 
        rules:[
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [["@babel/preset-env",
                    { 
                        //按需加载
                        "useBuiltIns": "usage",
                        corejs:{
                            version: 3
                        }, 
                        //指定兼容性做到那个浏览器版本
                        target: {
                            chrome: '60',
                            firefox: '60',
                            ie: '9',
                            safari: '10'
                        }
                    }
                ]]
                }
            }
        ]

    },
    mode:"development", //production'

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/232599
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号