webpack生产环境配置

最新推荐文章于 2023-12-19 18:20:12 发布
最新推荐文章于 2023-12-19 18:20:12 发布
阅读量547 收藏
点赞数
分类专栏： webpack 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51249285/article/details/129304662
版权

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'
};
 

香甜的甲基橙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack开发环境和生产环境的深入理解
01-19
以前自己写一小项目时，webpack的配置基本就是一套配置，没有考虑生产环境和开发环境的区分，最近在做一个复杂的商城项目接触到了webpack的高级配置，经过两天的研究，写出了一份目前来说比叫满意的配置，在这里分享...
webpack 环境变量
抱着肩膀笑看看
04-02 5905
webpack 打包时基本的环境变量配置
webpack打包时配置环境变量
nanxizhu的专栏
10-31 1154
webpack配置环境变量
webpack和项目 配置环境变量
bangbDIV的博客
12-28 2947
package.json中 --mode 配置的值只能在node环境 中读到package.json中 --env 配置的值只能在浏览器环境 中读到平时开发要区分环境，js中和webpack中都需要读到环境变量配置，下面大概介绍下如何配置。
Webpack快速上手（四）配置环境变量
传说中的腿腿的博客
04-30 2305
webpack配置环境变量
Webpack--生产环境配置
xuan的博客
05-08 1205
一、环境配置的封装 （1）使用相同的配置文件，在构建开始前将当前所属环境作为一个变量传递进去，在webpack.config.js中通过各种判断条件决定具体使用哪个配置。 //package.json { 'script': { 'dev': "ENV=development webpack-dev-server", 'build': 'ENV=production webpack' } } //webpack.config.js const ENV = process.env
详解Webpack多环境代码打包的方法
10-18
主要介绍了详解Webpack多环境代码打包的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack-the-right-way:如何为开发生产环境配置Webpack的示例
05-10
Webpack正确的方法 安装 yarn install 开发模式 yarn run server # create server on localhost:5000 yarn build # build only yarn watch # build & watch 生产方式 yarn run build:production 报告与分析 yarn ...
详解Webpack + ES6 最新环境搭建与配置
12-01
我们看到了项目中多了一个package.json文件，它定义了这个项目中所需各种模板及项目中的配置信息。该对象的每一个成员就是当前项目的一项设置。详细设置信息请参考 https://docs.npmjs.com/files/package.json 安装...
Webpack中各种环境变量的正确姿势
油墨香^-^的博客
03-27 1311
在webpack构建以及业务代码中，环境变量的注入对于我们的帮助是非常大的。当需要一定体系的前端工程化代码时，环境变量无论是在构建过程还是业务代码中都起到了至关重要的作用。看到这里我们想说到的其实都已经讲到了，我们来进行一个简单的总结吧:在webpack打包业务代码时，我们需要使用类似环境变量的方式使用一些全局变量时，可以通过去定义一些变量从而在业务代码中使用。(但是需要注意上边讲到的同时在构建过程中，我们可以通过webpack官方提供的--env参数以及在配置文件中通过函数的方式使用--env。
webpack环境变量的使用
haosicx的博客
09-27 1784
如果设置 env 变量，却没有赋值，–env production 默认表示将 env.production 设置为 true。看看src/GlobalConfigs的文件目录。那环境变量具体是怎么使用的呢。
29 webpack中的环境变量
sinat_41212418的博客
12-13 953
环境变量 使用Webpack构建项目的时候，往往会区分环境进行不同的构建，比如生产环境和开发环境。项目在上线之前，还需要进入测试环境，进行系统功能的检测，那么就又多了一个或者多个测试环境，不同的环境构建功能肯定是有区别的。 大多数情况下，不同环境之间的配置还是有复用性的，只有少数的地方是因环境不同而变化的，使用环境变量就可以消除不同环境的配置差异，极大的复用我们的配置。本章节将针对Wabpack中涉及到的各种环境变量的定义，使用进行介绍。 环境对象(Environment) 当Webpack配置导出一个函数
webpack配置完全指南
JackChan
10-26 1881
webpack配置完全指南
Vue+webpack 项目不同环境，环境变量配置
最新发布
qq_30193097的博客
12-19 729
如果这两个文件是空的，那么运行 npm run dev 时，process.env.NODE_ENV 的值默认就是 development；运行 npm run build 时，process.env.NODE_ENV 的值默认就是 production；.env.development 是开发环境下的配置文件。.env.production 是生产环境下的配置文件。第二步，在vue.config.js文件中打印输入。除了默认配置文件，我们也可以自定义配置文件。综上，打包的时候，可以自定义环境变量。
webpack环境变量的设置
guiplan
11-21 598
现在虽然vite比较流行，但对于用node写后端来说，webpack倒是成了一个很好的打包工具，可以很好的保护后端的代码。所以这块的学习还是不能停下来，接下来我们来针对不同的环境做不同的设置写好笔记。引用场景主要是针对服务器的各种环境，比如生产环境呀，本地环境，开发环境呀。webapck 代码如下：也就两句话，当然输出的文件路径比如dist可以改为dist_use打包输出的地方用来区分不同环境下的文件即可。文件如下创建多个打包配置文件与env配置文件，这样就可以不同的环境使用不同的配置了。
webpack生产模式配置
jieyucx的博客
06-13 1831
生成模式（production mode）是指在开发完成后将代码部署到生产环境中运行的模式，通常需要进行代码压缩、优化、合并，以减少文件大小和请求次数，提高页面加载速度和运行效率。开发模式（development mode）则是指在开发过程中使用的模式，通常需要对代码进行调试、热更新等操作，以提高开发效率和代码质量。在开发模式下，通常不需要进行代码优化和压缩，可以保留源代码的完整性，以便于调试和排查问题。
Webpack(开发、生产环境配置)
Mikon_0703
11-13 239
Webpack简介 1.webpack定义 webpack静态资源打包器，前端所有资源（js/css/json/img/less…）作为模块处理，打包生产对应的boundle 2.webpack五大核心 Entry Output Loader Plugins Mode Webpack初体验 src：初始文件夹 dist：打包之后的文件夹 （1）初始化package.json npm init （2）下载安装webpack （全局）npm install webpack web
Webpack5 系列:Babel 的配置
linanran1027的博客
10-31 574
本篇将介绍对于项目中 JS 文件的处理。
1. webpack 介绍及初体验
李嘉城的博客
10-31 680
webpack 是一个静态资源打包工具。从图中我们可以看出，webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，输出的文件就是编译好的文件，就可以在浏览器端运行了。开发模式：仅能编译 JS 中的 ES Module 语法生产模式：能编译 JS 中的 ES Module语法，还能压缩 JS 代码。
webpack生产环境和测试环境区别
07-12
webpack生产环境和测试环境之间的主要区别在于它们的配置和优化。以下是一些常见的差异： 1. 打包目标：在生产环境中，通常会将代码最小化、压缩和优化，以便在部署到生产服务器时获得更好的性能。而在测试环境中，通常更关注代码的可读性和调试能力。 2. 调试工具：在测试环境中，可以启用更多的调试工具和开发者工具，以便更容易地进行代码调试和错误追踪。而在生产环境中，这些工具通常会被禁用或仅限于特定的情况下使用。 3. 资源路径：在测试环境中，通常会使用相对路径或本地路径来引用资源文件，方便本地开发和测试。而在生产环境中，为了适应部署到不同的服务器和域名下，需要使用绝对路径或基于公共路径的方式引用资源。 4. 环境变量：在测试环境中，可以使用不同的环境变量来模拟各种情况，以确保代码在各种场景下都能正常工作。而在生产环境中，需要使用真实的环境变量来配置和控制应用程序的行为。 5. 缓存和版本控制：在生产环境中，通常会通过添加哈希值或版本号来实现缓存和版本控制，以便在更新应用程序时能够正确地加载最新的资源文件。而在测试环境中，可以禁用缓存，以方便进行代码的频繁修改和测试。 总的来说，生产环境和测试环境的主要区别在于性能优化、调试能力、资源路径、环境变量和缓存等方面的配置和处理方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值