webpack生产环境配置

news2024/9/21 16:20:30

3 webpack生产环境配置

由于笔记文档没有按照之前的md格式书写，所以排版上代码上存在问题😢😢😢😢

09 提取css成单独文件

  1. 使用下载插件 npm i mini-css-extract-plugin@0.9.0 -D
  1. webpack配置

  1. 此时a,b提取成单独文件,并且页面显示正确

10 css兼容性处理

  1. 使用下载插件  npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D
  1. 写相应的配置

源代码：

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

// 设置nodejs环境变量
// 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: [
          MiniCssExtractPlugin.loader,
          '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",
                "last 1 firefox version",
                "last 1 safari version"
              ],
              // 生产环境：默认是看生产环境
              "production": [
                ">0.2%",
                "not dead",
                "not op_mini all"
              ]
            }
          */
          // 使用loader的默认配置
          // 'postcss-loader',
          // 修改loader的配置
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
};
 

  1. 需要在package.json配置

11 压缩css

配置中，要么用loader，要么用插件，loader做事一遍比较少，更多的用插件

兼容性一般靠loader，压缩靠插件

  1. 下载插件  npm i optimize-css-assets-webpack-plugin@5.0.3 -D
  1. webpack配置

  1. 打包 npx webpack
  1. 可以看到build/css/build.css代码压缩成一行

压缩css插件   optimize-css-assets-webpack-plugin

压缩让文件体积变小，请求速度就会越快，加载速度就快，用户看到效果就越快，用户体验就会更好，

代码上线之前就一定要压缩

12 js语法检查

  1. 需要将airbnb/javascript 这个规则用到eslint

  1. 下载使用到的插件

 npm i eslint@6.8.0 eslint-loader@3.0.3 eslint-plugin-import@2.20.1 eslint-config-airbnb-base@14.0.0 -D

  1. webpack配置

JavaScript
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      /*
        语法检查： eslint-loader  eslint
          注意：只检查自己写的源代码，第三方的库是不用检查的
          设置检查规则：
            package.json中eslintConfig中设置~
              "eslintConfig": {
                "extends": "airbnb-base"
              }
            airbnb --> eslint-config-airbnb-base  eslint-plugin-import eslint
      */
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};
 

  1. 其中需要到package.json里面配置

  1. 打包之后效果

js语法检查

  1. 语法检查： eslint-loader  eslint
                  注意：只检查自己写的源代码，第三方的库是不用检查的
  1. 设置检查规则：
                package.json中eslintConfig中设置~
                  "eslintConfig": {
                    "extends": "airbnb-base"
                  }
                airbnb --> eslint-config-airbnb-base  eslint-plugin-import eslint

13 js兼容性处理

  1. 下载插件   npm i babel-loader@8.0.6 @babel/preset-env@7.8.4 @babel/core@7.8.4 -D
  1. webpack配置

但是只能转换基本语法，promise就不能，需要全部兼容性处理

  1. 下载   npm i @babel/polyfill@7.8.3 -D

从Babel 7.4.0开始，这个包已经被废弃了，取而代之的是直接包含core-js/stable

我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了

需要做兼容性处理的就做：按需加载   core.js

  1. 下载 npm i core-js@3.6.4 -D
  1. 最终webpack配置

JavaScript
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      /*
        js兼容性处理：babel-loader @babel/core
          1. 基本js兼容性处理 --> @babel/preset-env
            问题：只能转换基本语法，如promise高级语法不能转换
          2. 全部js兼容性处理 --> @babel/polyfill 
            问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
          3. 需要做兼容性处理的就做：按需加载  --> core-js
      */ 
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设：指示babel做怎么样的兼容性处理
          presets: [
            [
              '@babel/preset-env',
              {
                // 按需加载
                useBuiltIns: 'usage',
                // 指定core-js版本
                corejs: {
                  version: 3
                },
                // 指定兼容性做到哪个版本浏览器
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }
            ]
          ]
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};
 

js兼容性处理：babel-loader @babel/core

          1. 基本js兼容性处理 --> @babel/preset-env

            问题：只能转换基本语法，如promise高级语法不能转换

          2. 全部js兼容性处理 --> @babel/polyfill    ----不用写配置，直接在入口文件里面引入即可 import '@babel/polyfill';

            问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~

          3. 需要做兼容性处理的就做：按需加载  --> core-js

一般最终都是通过第一步和第三步一起完成的

14 压缩  js

只需要将development调成production即可，生产环境下会自动压缩js代码，production里面的UglifyJsPlugin插件会自动去压缩js，内部都实现好了

15 压缩  html

在HtmlWebpackPlugin里加一个选项minify

16 生产环境基本配置

JavaScript
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 定义nodejs环境变量：决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    // 还需要在package.json中定义browserslist
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [require('postcss-preset-env')()]
    }
  }
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [...commonCssLoader]
      },
      {
        test: /\.less$/,
        use: [...commonCssLoader, 'less-loader']
      },
      /*
        正常来讲，一个文件只能被一个loader处理。
        当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
          先执行eslint 在执行babel
      */
      {
        // 在package.json中eslintConfig --> airbnb
        test: /\.js$/,
        exclude: /node_modules/,
        // 优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',
                corejs: {version: 3},
                targets: {
                  chrome: '60',
                  firefox: '50'
                }
              }
            ]
          ]
        }
      },
      {
        test: /\.(jpg|png|gif)/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          outputPath: 'imgs',
          esModule: false
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        exclude: /\.(js|css|less|html|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true
      }
    })
  ],
  mode: 'production'
};
 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/383796.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

1378：最短路径(shopth)

1378：最短路径(shopth)

1378：最短路径(shopth) 时间限制: 1000 ms 内存限制: 65536 KB 【题目描述】 给出一个有向图G(V, E)，和一个源点v0∈V，请写一个程序输出v0和图G中其它顶点的最短路径。只要所有的有向环权值和都是正的，我们就允许图的边有…
阅读更多...
有趣的小知识（二）浏览器内的秘密：了解Cookie基础知识

有趣的小知识（二）浏览器内的秘密：了解Cookie基础知识

一、简介 Cookie是一种小型的文本文件，由Web服务器发送给Web浏览器，并存储在用户的计算机硬盘上。它通常用于记录用户的偏好、登录状态、购物车信息等，以便在用户下次访问该网站时能够提供更好的用户体验。Cookie通常包含网站的名称、Cookie的…
阅读更多...
2023年工业自动化，机器人与控制工程国际会议（IARCE 2023）

2023年工业自动化，机器人与控制工程国际会议（IARCE 2023）

2023年工业自动化，机器人与控制工程国际会议（IARCE 2023） 重要信息 会议网址：www.iarce.org 会议时间：2023年10月27-29日 召开地点：中国成都 截稿时间：2023年9月21日 录用通知：…
阅读更多...
[创业之路-57] ：商业计划书BP如何书写？总体框架！

[创业之路-57] ：商业计划书BP如何书写？总体框架！

引言：BP (Buiness Plan) ，即商业计划书，本质上还是一份计划，是一份商业计划，即一种关于如何赚钱的计划，是一份通过组建公司，运营项目，进而赚钱的项目计划。什么是商业？商…
阅读更多...
【计算机网络】ISO/OSI参考模型与TCP/IP模型

【计算机网络】ISO/OSI参考模型与TCP/IP模型

ISO/OSI参考模型与TCP/IP模型 一、ISO/OSI参考模型（七层） 一个理论模型，并未商用。 OSI参考模型有七层，自上而下分别为 应用层 ： 所有能产生网络流量的应用程序都属于是应用层 典型协议：FTP&#xff08…
阅读更多...
分布式锁详解

分布式锁详解

文章目录分布式锁是什么基于 Redis 实现分布式锁如何基于Redis实现一个简单的分布式锁为什么要给锁设置一个过期时间？如何实现锁的优雅续期？如何实现可重入锁？Redis 如何解决集群情况下分布式锁的可靠性？分布式锁是什么 java单机…
阅读更多...
从客户端的角度来看移动端IM即时通讯的消息可靠性和送达机制

从客户端的角度来看移动端IM即时通讯的消息可靠性和送达机制

如何确保IM 不丢消息是个相对复杂的话题，从客户端发送数据到服务器，再从服务器抵达目标客户端，最终在 UI 成功展示，其间涉及的环节很多，这里只取其中一环「接收端如何确保消息不丢失」来探讨，粗略聊下我接触…
阅读更多...
crmeb商城部署（踩坑及解决方法）

crmeb商城部署（踩坑及解决方法）

源码地址： https://gitee.com/ZhongBangKeJi/CRMEB 原版是PHP版，我也不懂PHP，但看到功能很全，而且有docker-compose的脚本可以部署，并且教程也很完善，就拿来部署试下。 所以也适用于和我一样，…
阅读更多...
【NodeJs】NodeJs专题之理解企业BFF框架原理

【NodeJs】NodeJs专题之理解企业BFF框架原理

BFF—服务于前端的后端 一、什么是BFF框架 BFF框架指的是一种逻辑分成,而非一种新技术即 Backend For Frontend（服务于前端的后端），也就是服务器设计 API 时会考虑前端的使用，并在服务端直接进行业务逻辑的处理，又称…
阅读更多...
每日记录自己的Android项目（一）

每日记录自己的Android项目（一）

Jetpack之Navigation今天新创建一个项目，选的是这个。首先映入眼帘的是一个这样的界面。由ViewBinding绑定好XML布局和根布局和标题栏。这个应该是Navigationg里面的内容还有个字段private AppBarConfiguration appBarConfiguration;Overrideprotected void onCreat…
阅读更多...
C# 序列化时“检测到循环引用”错误的彻底解决方案

C# 序列化时“检测到循环引用”错误的彻底解决方案

目录 一&#xff0c;问题表现 二、没有技术含量的解决方案 三、本人彻底的解决方案 简要说明 贴代码 思路解析 思路 一&#xff0c;问题表现 示例代码如下&#xff1a; [Serializable] public class NodeTest {public NodeTest (){new List<NodeTest> ();}p…
阅读更多...
SpringBoot之@ConfigurationProperties、@EnableConfigurationProperties

SpringBoot之@ConfigurationProperties、@EnableConfigurationProperties

ConfigurationProperties 这个注解不仅可以为yml某个类注入还可以为第三方bean绑定属性 为yml某个类注入 只要将对应的yml类对象声明实体pojo并交给spring容器管理&#xff0c;再在类上使用ConfigurationProperties绑定对应的类名即可 涉及到两个知识点&#xff0c;这个类对…
阅读更多...
C语言中的数据储存规则

C语言中的数据储存规则

写在开头 关于复习的相关内容其实从一开始就列出了大纲&#xff0c;但是迟迟没有开始复习&#xff0c;一方面是因为学校学业却是繁忙&#xff0c;另一方面还是内心对旧知识掌握不熟练需要再学一遍的畏惧和懒惰&#xff0c;但如今&#xff0c;复习必须开始了。今天我从C语言的最…
阅读更多...
Linux/MacOS 生成双击可执行文件

Linux/MacOS 生成双击可执行文件

双击可执行文件包含两种&#xff1a;终端shell脚本 Unix可执行文件 1.终端shell脚本 随意新建一个文件&#xff08;可使用command键N&#xff0c;前提是有已打开的文件&#xff09;&#xff0c;输入shell格式的测试代码&#xff0c;比如&#xff1a; #! /bin/sh echo “h…
阅读更多...
双喜临门｜炼石荣获2023年中国网络和数据安全高峰论坛双奖项

双喜临门｜炼石荣获2023年中国网络和数据安全高峰论坛双奖项

2023年2月23日-24日&#xff0c;工业和信息化部、四川省人民政府联合主办以“新征程 新思路 高质量发展”为主题的“2023年中国网络和数据安全产业高峰论坛”在成都隆重召开。工信安全中心第一届网络安全高成长性企业“勇攀之星”正式揭晓&#xff0c;炼石以高成长性、高创新性…
阅读更多...
【vue】iframe相关问题

【vue】iframe相关问题

一、刷新iframe页面iframe的地址没有改变的话&#xff0c;每打开一次iframe页面&#xff0c;都不会主动更新页面的。以下有几种方法&#xff0c;都可以实现&#xff0c;每打开一次页面&#xff0c;就刷新一下给iframe添加key<template><div id"Iframe">&…
阅读更多...
一名IC验证工程师的成长路径是怎么样的？来听听工程师的见解

一名IC验证工程师的成长路径是怎么样的？来听听工程师的见解

IC验证这个岗位对于非科班的学生是比较友好的&#xff0c;因为验证需要具备的技能UVM&#xff0c;SV&#xff0c;C等&#xff0c;非科班和科班的差距不会拉开太大。因其岗位需求量巨大而格外受到了大家的青睐&#xff0c;甚至成为不少学生的转行首选。 验证对于IC的重要性 IC…
阅读更多...
汽车 12V 和 24V 电池输入保护推荐

汽车 12V 和 24V 电池输入保护推荐

简介汽车电池电源线路在运行系统时容易出现瞬变。所需的典型保护包括过压、过载、反极性和跨接启动。在汽车 的生命周期中&#xff0c;交流发电机可能会被更换为非OEM 部件。售后市场上的交流发电机可能具有不同的负载突降&#xff08;LOAD DUMP&#xff09;保护或没有负载突降…
阅读更多...
论文阅读-Attention Bottlenecks for Multimodal Fusion（多模态特征融合）

论文阅读-Attention Bottlenecks for Multimodal Fusion（多模态特征融合）

一、论文信息 论文题目&#xff1a;Attention Bottlenecks for Multimodal Fusion paperwithcode&#xff1a;https://paperswithcode.com/paper/attention-bottlenecks-for-multimodal-fusion Github&#xff1a;https://github.com/google-research/scenic/tree/main/scen…
阅读更多...
产品故事：语雀两度生死局

产品故事：语雀两度生死局

语雀是一款文档和知识库产品&#xff0c;2016 年从一个技术团队支付宝体验技术部生长出来&#xff0c;2021 年蚂蚁成立了智能协同事业部&#xff0c;重点产品即为语雀&#xff0c;以独立 BU 运作&#xff0c;算是完成了“成人礼”。我们和玉伯聊了聊语雀的成长故事。 极客时间&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023