【webpack4】第四部分 生产环境基本配置

已于 2022-08-11 15:31:46 修改
阅读量738 收藏
点赞数 1
分类专栏： webpack 文章标签： javascript 前端框架 前端 webpack
于 2022-03-25 11:36:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Trees__/article/details/123731488
版权

【webpack4】第四部分 生产环境基本配置

文章目录

4. 生产环境基本配置

4.1 提取css为单独文件

npm install --save-dev mini-css-extract-plugin 下载插件

在这里插入图片描述

webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
//引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry:'./src/js/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    // 创建 style 标签，将js样式放入head
                    // 'style-loader',
                    // MiniCssExtractPlugin.loader 取代 style-loader
                    // 作用：提取 js 中的 css 成单独文件
                    MiniCssExtractPlugin.loader,
                    // 将 css 文件整合到 js 文件中
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
      
        new MiniCssExtractPlugin({
            //对输出的css进行重命名
            filename:'css/built.css'
        })
    ],
    mode:'development'
}

4.2 css兼容性问题

npm install --save-dev postcss-loader postcss-preset-env 需要下载的插件和loader

须知：

  1. css兼容性处理：使用postcss
    需要下载：postcss-loader postcss-preset-env
    loader的默认使用：

    默认使用是没有办法进行配置的
    默认使用的形式：xxx-loader

    配置package.json中去配置，使得postcss能够找到
    配置如下：

    "browserslist":{
    // 开发环境
			"development":[
				//表示兼容最近的xx浏览器版本
				"last 1 chrome version",
				"last 1 firefox version"
			],

			//生产环境
			"production":[
				// 兼容超过99%浏览器
				">0.1%",
				// 死的浏览器
				"not dead",
				"not op_mini all"
			]

webpack.config.js

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:[
                    //提取css
                    MiniCssExtractPlugin.loader,
                    // 将 css 文件整合到 js 文件中
                    'css-loader',
                   //修改loader的默认配置需要写成对象的形式
                    {
                        //设置加载器
                       loader:'postcss-loader',
                       //配置options
                       options:{
                           postcssOptions:{
                               //插件
                               plugins:[
                                   [
                                   	//指定环境
                                   	"postcss-preset-env",
                                   	{
                                     //兼容浏览器最新的两个版本
                                       browsers:'last 2 versions'
                                   	}
                                   ]
                               ]
                           }
                       }
                    }
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            //重命名文件
            filename:'css/built.css'
        })
    ],
    mode:'development'
}

4.3 压缩css

npm install --save-dev optimize-css-assets-webpack-plugin 需要下载的包

webpack.config.js

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

//导入压缩css的插件
const  OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-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:[
                    //提取css
                    MiniCssExtractPlugin.loader,
                    // 将 css 文件整合到 js 文件中
                    'css-loader',
                   //修改loader的默认配置需要写成对象的形式
                    {
                        //设置加载器
                       loader:'postcss-loader',
                       //配置options
                       options:{
                           postcssOptions:{
                               //插件
                               plugins:[
                                   [
                                   		//指定环境
                                   "postcss-preset-env",
                                   {
                                     //兼容浏览器最新的两个版本
                                       browsers:'last 2 versions'
                                   }
                                   ]
                               ]
                           }
                       }
                    }
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            //重命名文件
            filename:'css/built.css'
        }),
        //压缩css
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode:'development'
}

4.4 js语法检查eslint

需要下载四个安装包:

npm install --save-dev eslint-loader

npm install --save-dev eslint

npm install --save-dev eslint-config-airbnb-base

npm install --save-dev eslint-plugin-import

一起下载用下面的代码：

npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    entry:'./src/js/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                // 注意：只检查自己写的源代码，第三方的库是不用检查的设置检查规则
                // 语法检查： eslint-loader eslint
                // 除去别人的包，不然会用问题
                exclude:/node_module/, //一定要记得写
                loader:'eslint-loader',
                options:{
                    // 自动修复eslint的错误,修正格式
                    fix:true
                }
                
            },
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            tempalte:"./src/index.html"
        }),
        new MiniCssExtractPlugin({
            filename:'css/built.css'
        })
    ],
    mode:'development'
}

4.5 eslint兼容性问题

需要下载的包：

npm install --save-dev babel-loader

npm install --save-dev @babel/core

npm install --save-dev @babel/preset-env

npm install --save-dev @babel/polyfill

npm install --save-dev core-js

  1. 基本js兼容性处理 --> ·@babel/preset-env,使用它必须要下载babel-loader和@babel/core

    问题：只能转换基本的语法，例如promise就不能转化

  2. 全部的js兼容性处理 -->@babel/polyfill(不推荐使用)

    问题：我们只需要解决部分兼容性问题但是所有的兼容性代码全部引入，导致体积太大

  3. 需要做兼容性处理的就做：按需加载 --> core-js（推荐使用）

webpack.config.js

const {resolve} = require('path')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    entry:'./src/js/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                // 注意：只检查自己写的源代码，第三方的库是不用检查的设置检查规则
                // 语法检查： eslint-loader eslint
                // 除去别人的包，不然会用问题
                exclude:/node_module/, //一定要记得写
                loader:'eslint-loader',
                options:{
                    // 自动修复eslint的错误,修正格式
                    fix:true
                }
                
            },
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader']
            },
            {
                test:/\.js$/,
                exclude:/node_module/,
                loader:'babel-loader',
                options:{
                    // 预设：指示 babel 做怎么样的兼容性处理
                    presets:[
                        [
                            '@babel/preset-env',
                            {
                                //按需加载
                                useBuiltIns:'usage',
                                //指定core-js版本
                                corejs:{
                                    verson:3
                                },
                                // 指定兼容性做到哪个版本浏览器
                                targets: { 
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }

                        ]
                    ]
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            tempalte:"./src/index.html"
        }),
        new MiniCssExtractPlugin({
            filename:'css/built.css'
        })
    ],
    mode:'development'
}

4.6 压缩js和html代码

  1. 压缩js代码：只需要开启生成模式就会自动压缩
  2. 压缩html代码：
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
   plugins:[
       new HtmlWebpackPlugin({
           tempalte:'./src/index.html',
        //    这里多个配置，就可以压缩html代码
        minify:{
            //移除空格
            collapseWhitespace:true,
            //移除注释
            removeComments:true
        }
       })
   ],
    // 开启生产模式就可以压缩js代码    
   mode:'production'
}

4.7 生产环境的基本配置

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')

module.exports = {
    //入口文件
    entry:"./src/js/index.js",
    // 输出地址
    output:{
        filename:"js/built.js",
        path:resolve(__dirname,'build')
    },
    //loader
    module:{
        rules:[
            // 打包css
               {
                test:/\.css$/,
                use:[
                    //提取css
                    MiniCssExtractPlugin.loader,
                    // 将 css 文件整合到 js 文件中
                    'css-loader',
                   //修改loader的默认配置需要写成对象的形式
                    {
                        //设置加载器
                       loader:'postcss-loader',
                       //配置options
                       options:{
                           postcssOptions:{
                               //插件
                               plugins:[
                                  [
                                  	//指定环境
                                   "postcss-preset-env",
                                   {
                                       browsers:'last 2 versions'
                                   }
                                  ]
                               ]
                           }
                       }
                    }
                ]
            },
            {
                //打包less
                test:/\.less$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    //修改loader的默认配置需要写成对象的形式
                    {
                        //设置加载器
                       loader:'postcss-loader',
                       //配置options
                       options:{
                           postcssOptions:{
                               //插件
                               plugins:[
                                   [
                                   //指定环境
                                   "postcss-preset-env",
                                   {
                                       browsers:'last 2 versions'
                                   }
                                   ]
                               ]
                           }
                       }
                    },
                    'less-loader'
                ]
            },
            {
                //eslint
                test:/\.js$/,
                exclude:/node_module/,
                loader:'eslint-loader',
                // 优先执行
                enforce: 'pre',
                options:{
                    fix:true
                }
            },
            {
                test:/\.js$/,
                exclude:/node_module/,
                loader:'babel-loader',
                options:{
                    // 预设：指示 babel 做怎么样的兼容性处理
                    presets:[
                        [
                            '@babel/preset-env',
                            {
                                //按需加载
                                useBuiltIns:'usage',
                                //指定core-js版本
                                corejs:{
                                    verson:2
                                },
                                // 指定兼容性做到哪个版本浏览器
                                targets: { 
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }

                        ]
                    ]
                }
            },
            {
                //打包图片
                test:/\.(jpg|png|gif|webp)$/,
                loader:'url-loader',
                options:{
                    limit: 8*1024,
                    name:'[hash:10].[ext]',
                    outputPath:'imgs',   
                    esModule:false             
                }
            },
            //处理html下的图片
            {
                test:/\.html$/,
                loader:'html-loader',
                options:{
                    esModule:false
                }
            },
            //打包其他文件
            {
                exclude:/\.(js|css|less|html|jpg|png|gif)$/,
                loader:'file-loader',
                options:{
                    outputPath:'media'
                }
            }
        ]
    },
    plugins:[
        //提取css文件
        new MiniCssExtractPlugin({
            filename:"css/built.css"
        }),
        //压缩css
        new OptimizeCssAssetsWebpackPlugin(),
        //打包html
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            //压缩html
            minify:{
                collapseWhitespace:true,
                removeComments:true
            }
        })
    ],
    // 开启生产模式就自动压缩js
    mode:'production'
}

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！

Tree_wws
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack-4-tutrial:webpack4 的配置及优化
05-11
- ` terser-webpack-plugin`: 提供代码压缩，提高生产环境的加载速度。 ### 4. Mode Webpack 4 引入了 `mode` 参数，它可以设置为 `"development"` 或 `"production"`，以优化相应的构建过程。在开发模式下，...
webpack配置配置介绍和操作指引
最新发布
05-27
## 五、Webpack 生产环境优化 在生产环境中，我们通常会开启一些优化选项，如： - `optimization.minimize`: 启用 UglifyJS 插件进行代码压缩。 - `splitChunks`: 打包公共库和第三方模块，减少重复代码。 - `...
由浅入深配置webpack4
油墨香^-^的博客
03-30 618
webpack在前端化过程中十分重要，所以花了一段时间学习webpack，以及webpack4新特性，本文是按照从易到难的过程，梳理部分webpack概念，常见的loader，plugins，webpack4新特新，还有部分高级概念。webpack需要掌握的核心概念👇Entry:webpack开始构建的入口模块Output: 如何命名输出文件，以及输出目录，比如常见的dist目录。Loaders:作用在于解析文件，将无法处理的非js文件，处理成webpack能够处理的模块。Plugins。
webpack生产环境配置
weixin_51249285的博客
03-02 570
webpack生产环境配置
webpack4实用配置指南-上手篇
热门推荐
fengmin_w的博客
08-23 2万+
零、前言 算起来已经有3到4个项目的webpack构建打包经历。然而每次搭建起来还是有新手既视感，比较捉急。工具用法的东西，好记性不如烂笔头，有必要系统梳理下webpack的配置常用配置以及构建优化。 分为上手篇和优化篇，本篇为上手篇，先介绍常用配置。 篇幅较长，可完整阅读，也可在遇到问题时即查即用。 此次采用webpack4，也顺便尝尝鲜。 # webpack4 把命令行工具抽离成了...
16.webpack4生产环境配置
weixin_43893483的博客
08-28 365
webpack4生产环境基本配置
4、处理css文件（css-loader加载器与mini-css-extract-plugin分离CSS文件插件）
weixin_45065754的博客
05-10 1010
1、安装依赖 2、配置loader加载器 3、安装分离CSS文件插件 4、配置loader 5、配置插件
ppt课件-第10章 使用webpack.zip
03-22
"第10章"暗示这可能是某个系列教程的一部分，意味着它可能在讲解了一些基础概念后，深入到Webpack的实际使用。描述简单明了，提示这是供学习参考的材料，鼓励下载。 **标签解析：** 1. **Webpack**：Webpack 是一...
webpack demo
07-13
- 配置Source Map，便于调试，同时不影响生产环境性能。 "webpack-demos-master"这个压缩包可能包含了各种Webpack配置和用法的示例，你可以通过研究这些例子，深入理解Webpack的工作原理，掌握其配置和优化方法。...
浅谈如何使用 webpack 优化资源
11-27
在示例中，我们有一个基本的Webpack配置文件，包含入口（entry）、输出（output）、模块（module）、插件（plugins）和解析（resolve）等关键部分。通过引入`webpack-bundle-analyzer`插件，我们可以可视化地分析...
webpack4 mini-css-extract-plugin
weixin_30808693的博客
11-20 1106
在使用webpack的extract-text-webpack-plugin插件提取单独打包css文件时，报错，说是这个插件要依赖webpack3的版本。 webpack4得使用mini-css-extract-plugin这个插件来单独打包css。下面是使用方法： mini-css-extract-plugin 将CSS提取为独立的文件的插件，对每个包含css的js文件都会创...
Webpack--生产环境配置
xuan的博客
05-08 1227
一、环境配置的封装 （1）使用相同的配置文件，在构建开始前将当前所属环境作为一个变量传递进去，在webpack.config.js中通过各种判断条件决定具体使用哪个配置。 //package.json { 'script': { 'dev': "ENV=development webpack-dev-server", 'build': 'ENV=production webpack' } } //webpack.config.js const ENV = process.env
webpack4.+ 学习二（生产环境配置）
假装是个web dog
07-08 385
webpack 生产环境配置前言原因配置分离（开发/生产）环境文件1. 首先就要从安装 webpack-merge 开始，并将之前已成型的代码进行分离：2. 新建对应的文件夹，去掉 webpack.config.js3. 重新指向到新配置，更改package.json 前言 把 webpack4.+ 学习一（基本配置） 代码搞过来，建议重新安装一些依赖，防止报错。 原因 development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。要遵循逻辑分离，因此通常
webpack 4教程：从0配置到生产模式，你需要知道的都在这里了
qq_34665877的博客
07-13 2099
webpack 4教程：从0配置到生产模式，你需要知道的都在这里了webpack 4作为零配置模块捆绑器webpack功能强大，有很多独特的功能，但其中一个难点是配置文件。为中大型项目提供webpack的配置并不是什么大问题。 然而，对于较小的项目来说，这很麻烦，特别是当你想要启动一些玩具应用时。这就是Parcel得到了很多注意力的原因。Sean和webpack团队改变了这一现状：webpack ...
4. webpack 生产环境的基本配置
小丕的博客
03-13 1547
第 4 章：webpack 生产环境的基本配置 开发环境： 源代码 -> webpack+自动化 -> bundle 开发环境中：比如 1. css -> loader -> js ； css经过loader加载会加入到js代码中；会使js代码体积变大；由于先加载js后再插入style标签，会存在闪现现象； .... 生产环境中： 以下操作放在开发环境的话会拖慢开发环境的构建速度，即打包速度较慢，影响开发效率； 4.1 提取 css 成单独文件 1. 下载安装包 2
最新打包配置，webpack 4 配置 React 项目，同时配置DEV和PROD环境
非著名程序猿
09-13 3932
webpack 4 配置 React 项目，同时配置DEV和PROD环境 文章目录webpack 4 配置 React 项目，同时配置DEV和PROD环境1、生成一个react项目2、从零配置webapck3、设置alias别名和自动填写后缀4、配置 devServer5、解析分离less到单独的文件6、url-loader, file-loader 解析图片地址，并导出到指定文件7、多个less...
webpack4 的生产环境优化
weixin_34130389的博客
07-31 322
webpack4 的生产环境优化 webpack4完整配置的可以参考： https://github.com/ziwei3749/... 本文主要介绍了 webpack4 生产环境我都做了哪些优化 文章的结构如下： 1.静态资源路径。 2.hash 缓存。 3.代码分割。 4.压缩混淆代码。 5.开启 gzip 压缩。 6.关闭 dev...
【填坑】webpack5中optimize-css-assets-webpack-plugin无法实现压缩css
buchiyu的博客
02-19 1万+
一开始以为是OptimizeCssAssetsWebpackPlugin插件没有使用，然后查看了plugins已经使用了OptimizeCssAssetsWebpackPlugin。啊？这啥情况？ 最后找到了皮蛋很白大佬的webpack二刷之五、生产环境优化（5.提取压缩CSS）文章，写的也很清楚，原来是： webpack官方文档介绍时并不是将 「OptimizeCssAssetsWebpackPlugin」 插件配置在「plugins」数组中。 而是配置在 「optimization.minimize.
webpack4 配置总结
qq_36416878的博客
05-09 1209
webpack4 好文章https://www.my-fe.pub/post/webpack-4-basic-config-note.html

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值