webpack生产环境下的配置
创始人
2025-01-10 02:09:03
0

css 处理

css提取

  1. 下载包

npm i -D mini-css-extract-plugin

  1. 配置
 module: {    rules: [      {        test: /\.css$/,        use: [          // 'style-loader', // 创建style标签,将样式加入js文件          MiniCssExtractPlugin.loader, // 提取js中的css成单独的文件          'css-loader',        ]      },     ]  },  plugins: [    new HtmlWebpackPlugin({      template: './src/index.html'    }),    new MiniCssExtractPlugin({      filename: 'css/budle.css'    })  ], 

css兼容性处理

  1. 下载包

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

  1. 配置

Webpack.config.js

 rules: [    {      test: /\.css$/,      use: [        // 'style-loader', // 创建style标签,将样式加入js文件        MiniCssExtractPlugin.loader, // 提取js中的css成单独的文件        'css-loader',        // css兼容性处理:postcss ---> postcss-loader  postcss-preset-env        // 帮postcss找到package.json中的browerslist里面的配置,通过配置加载指定的css兼容性样式        /**                  * "browserslist": {                  *   // 开发环境 --> 设置node环境变量: process.env.NODE_ENV = development 才能生效                     "development": [                     "last 1 chrome version",                     "last 2 firefox version",                     "last 1 safari version"                     ],                     // 生产环境:默认看生产环境                     "production":[                     "> 0.2%",                     "not dead",                     "not op_mini all"                     ]                 }                  */        {          loader: 'postcss-loader',          options: {            postcssOptions: {              plugins:  [                'postcss-preset-env'              ]            },          }        }      ]    },   ] 

package.json

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

压缩css

  1. 下载包

npm i css-minimizer-webpack-plugin -D

 plugins: [   // 压缩css   new CssMinimizerWebpackPlugin() ], 

js压缩

  1. mode设置为生产模式即可,生产环境自动压缩js

mode: "production"

html压缩

plugins: [   new HtmlWebpackPlugin({     template: './src/index.html',     minify: {       // 移除空格       collapseWhitespace: true,       // 移除注释       removeComments: true,     }   }), ] 

eslint

  1. 下载包

npm i -D eslint eslint-webpack-plugin eslint-plugin-import eslint-config-airbnb-base

  1. 配置

Webpack.config.js

 plugins: [    new ESLintWebpackPlugin({      exclude: '/node_modules/',      fix: true,    })  ], 

Package.json
根配置,配置eslint标准

"eslintConfig": {   "extends": "airbnb-base" } 

js兼容

  1. 下载包

npm i -D babel-loader @babel/preset-env @babel/core @babel/polyfill core-js

  1. 配置
module: {   rules: [      {        //  1. js兼容性处理: babel-loader @babel/core  @babel/preset-env        //  问题:babel只能转换基础的语法,如promise则不能进行转换        //  2. 全部兼容  @babel/polyfill        //  问题:可以解决兼容性问题,但是引入了所有的兼容性代码,体积太大        //  3. 需要做兼容性的处理就ok,按需加载---> core-js        test: /\.js$/,        exclude: /node_modules/,        loader: 'babel-loader',        options: {          // 预设: 指示babel做怎样的兼容性处理          presets: [[            '@babel/preset-env',            {              useBuiltIns: 'usage', //按需加载              corejs: {                version: 3, // 指定core-js版本              },              targets: {  // 指定兼容浏览器版本                chrome: '60',                firefox: '60',                ie: '9',                safari: '10',                edge: '17'              }            }          ]]        }      }   ] } 

在入口文件(src/index.js)引入@babel/polyfill

import '@babel/polyfill';

方案2和方案三选一种即可
方案2

module: {   rules: [       {        test: /\.js$/,        exclude: /node_modules/,        loader: 'babel-loader',        options: {          // 预设: 指示babel做怎样的兼容性处理          presets: [[            '@babel/preset-env',          ]]        }      }   ] } 

在入口文件引入 @babel/polyfill

import '@babel/polyfill';

方案3

module: {   rules: [      {        //  1. js兼容性处理: babel-loader @babel/core  @babel/preset-env        //  问题:babel只能转换基础的语法,如promise则不能进行转换        //  2. 全部兼容  @babel/polyfill        //  问题:可以解决兼容性问题,但是引入了所有的兼容性代码,体积太大        //  3. 需要做兼容性的处理就ok,按需加载---> core-js        test: /\.js$/,        exclude: /node_modules/,        loader: 'babel-loader',        options: {          // 预设: 指示babel做怎样的兼容性处理          presets: [[            '@babel/preset-env',            {              useBuiltIns: 'usage', //按需加载              corejs: {                version: 3, // 指定core-js版本              },              targets: {  // 指定兼容浏览器版本                chrome: '60',                firefox: '60',                ie: '9',                safari: '10',                edge: '17'              }            }          ]]        }      }   ] } 

相关内容

热门资讯

专业讨论!德扑之星真破解套路(... 专业讨论!德扑之星真破解套路(辅助挂)软件透明挂(有挂了解)-哔哩哔哩;人气非常高,ai更新快且高清...
每日必看!智星德州菠萝外挂检测... 每日必看!智星德州菠萝外挂检测(辅助挂)软件透明挂(有挂教学)-哔哩哔哩1、玩家可以在智星德州菠萝外...
透视透明挂!轰趴十三水有后台(... 轰趴十三水有后台赢率提升策略‌;透视透明挂!轰趴十三水有后台(辅助挂)软件透明挂(有挂详情)-哔哩哔...
发现玩家!德扑ai助手软件(辅... 发现玩家!德扑ai助手软件(辅助挂)透视辅助(有挂教学)-哔哩哔哩;玩家在德扑ai助手软件中需先进行...
一分钟了解!x-poker辅助... 一分钟了解!x-poker辅助软件(辅助挂)辅助透视(有挂攻略)-哔哩哔哩1、每一步都需要思考,不同...
一分钟揭秘!德州最新辅助器(辅... 一分钟揭秘!德州最新辅助器(辅助挂)透视辅助(有挂攻略)-哔哩哔哩;德州最新辅助器最新版本免费下载安...
玩家攻略推荐!德州辅助(辅助挂... 玩家攻略推荐!德州辅助(辅助挂)辅助透视(有挂了解)-哔哩哔哩是由北京得德州辅助黑科技有限公司精心研...
揭秘真相!pokernow德州... 《揭秘真相!pokernow德州(辅助挂)辅助透视(有挂介绍)-哔哩哔哩》 pokernow德州软件...
五分钟了解!德州之星辅助器(辅... 五分钟了解!德州之星辅助器(辅助挂)辅助透视(有挂透明)-哔哩哔哩1、很好的工具软件,可以解锁游戏的...
推荐一款!pokermaste... 1、推荐一款!pokermaster有外挂(辅助挂)透视辅助(有挂教学)-哔哩哔哩;详细教程。2、p...