webpack生产环境配置

最新推荐文章于 2025-04-27 19:27:53 发布
最新推荐文章于 2025-04-27 19:27:53 发布
阅读量701 收藏
点赞数
分类专栏： webpack 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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'
};
 

（09）webpack 生产环境配置eslint
秋来九月八
10-29 666
eslint 自动检验代码是否规范的一种方式，如果有一点不符合代码规范的地方，就会在打包时报错。 如果你不喜欢eslint这种粗暴的方式，可以使用prettier这个插件 perttier插件介绍 webpack使用eslint 需要安装 eslint eslint-loader npm i eslint eslint-loader -D airbnb(一个流行的eslint验证代码的风格) --> 需要下载 eslint-config-airbnb-base eslint-plugin-impor
webpack打包时配置环境变量
nanxizhu的专栏
10-31 1942
webpack配置环境变量
webpack之生产环境配置
weixin_50238437的博客
09-20 579
webpack之生产环境配置
【Webpack \ Vite】多环境配置
最新发布
千里之行，始于足下
04-27 508
环境变量；脚本命令
使用 Webpack 进行生产环境配置（附 Demo）
weixin_34128534的博客
02-01 239
本文从代码压缩、代码拆分、样式分离等三个方面对生产环境的代码进行了优化。只是最简单的一些配置，如果真正运用到项目中，还需要根据项目添加更多配置。 前言 本文讲述的是如何对生产环境下的代码进行压缩，如果还不是太了解 Webpack 的朋友，可以先看一下我的上一篇文章：从零开始搭建一个 Webpack 开发环境配置（附 Demo） 本文项目代码位置：源码地址 环境搭建 项目结构 首先编写一个项目，...
webpack生产环境基本配置
weixin_44735573的博客
05-15 284
webpack生产环境基本配置
《从零到全栈：Webpack 生产环境配置详解》
weixin_48036026的博客
02-26 375
本文详细介绍了如何配置 Webpack 生产环境，以实现代码优化和性能提升。通过设置 mode: "production"，使用 TerserPlugin 压缩 JavaScript 并移除 console.log，以及利用 CssMinimizerPlugin 压缩 CSS 代码，能够有效减少文件体积和加载时间。文章还讲解了如何通过 webpack-merge 合并公共配置与生产环境配置。这些优化措施显著提升了应用的性能和用户体验，是前端工程化中的重要环节。
Webpack生产环境配置指南：一键完成部署
3. 开发与生产环境：在Webpack的配置文件中，开发者可以针对不同的环境（开发与生产）使用不同的配置，通常通过环境变量或者配置文件的环境区分来实现。 4. 自动重装特性：Webpack Dev Server提供了一个可以监视...
webpack生产环境配置：优化缓存与懒加载
通过分析生产环境配置文件webpack.production.js，作者介绍了删除不必要的开发工具，如dev-tools和dev-server，并且提到了css和js代码的优化。文中还引入了extract-text-webpack-plugin和html-webpack-plugin这两个...
webpack开发环境和生产环境的深入理解
01-19
以前自己写一小项目时，webpack的配置基本就是一套配置，没有考虑生产环境和开发环境的区分，最近在做一个复杂的商城项目接触到了webpack的高级配置，经过两天的研究，写出了一份目前来说比叫满意的配置，在这里分享...
Webpack--生产环境配置
xuan的博客
05-08 1362
一、环境配置的封装 （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-生产环境基本配置
不见浅诗的博客
02-17 288
本篇文章参考以下博文 WebPack实战教程 文章目录前言生产环境基本配置 前言   最近在做一些简单项目的打包，每个小项目的依赖库有细微差异，但是主要的配置信息都相似，css兼容，js兼容，html插件等，不同的是相关插件的使用情况。   本篇文章就初始化一个生产环境的基本配置，方便以后用来直接使用。 生产环境基本配置   基本配置如下： 首先配置了入口和出口； 然后做css的配置，其中包括兼容和压缩； less文件配置 js语法检查 js兼容 图片检测 html中的图片 其他文件 最后插件的部分对
②webpack 生产环境配置
一个努力学习的程序猿
04-22 390
webpack生产环境配置提取css成单独文件css兼容性处理压缩css 本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷 生产环境配置 开发环境配置能够让我们更方便，而生产环境配置能让代码优化，性能更好，让代码兼容浏览器，更平稳的运行。 提取css成单独文件 index.js import '../css/a.css'; import...
webpack生产环境基础配置
An滴饭儿的博客
11-14 139
//生产环境基本配置 //1）提取css成单独文件 2）css兼容性处理 3）压缩css 4）js语法检查 5）js兼容性处理 6）js压缩 7）HTML压缩 const { resolve } = require('path'); //node.js的模块化，处理路径 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //将css从Js文件中提取出来，安装命令：npm install --save -dev
4. webpack 生产环境的基本配置
小丕的博客
03-13 1657
第 4 章：webpack 生产环境的基本配置 开发环境： 源代码 -> webpack+自动化 -> bundle 开发环境中：比如 1. css -> loader -> js ； css经过loader加载会加入到js代码中；会使js代码体积变大；由于先加载js后再插入style标签，会存在闪现现象； .... 生产环境中： 以下操作放在开发环境的话会拖慢开发环境的构建速度，即打包速度较慢，影响开发效率； 4.1 提取 css 成单独文件 1. 下载安装包 2
webpack生产环境和开发环境的配置
Liu_Jun_Tao的博客
08-05 6616
最近在做公司游戏预约页面的时候，在配置webpack的时候，忽略了生产模式切换，导致开发过程中有些痛苦，当改动样式或者某个插件配置时，本地server要等待编译很久才生效。用了很久的webpack做开发，之前一直没太在意，现在特地整理下，也为以后做项目更加规范吧。 在配置前，还是先了解下生产环境和开发环境有哪些区别，知道这些后，才知道我们到底要做些什么 开发环境(development)和生产...
webpack 环境变量
抱着肩膀笑看看
04-02 6369
webpack 打包时基本的环境变量配置
webpack配置环境变量
qq_42289032的博客
07-02 436
借鉴阮一峰老师的再进一步延深：https://github.com/ruanyf/webpack-demos 1、main.js document.write('<h1>Hello World</h1>'); if (__DEV__) { document.write(new Date()); } if (url != '127.0.0.3') { document.write(url); } 2、在webpack.config.js进行配置 var webpack =
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值