Webpack5(从入门到精通)

最新推荐文章于 2024-02-27 22:46:27 发布
最新推荐文章于 2024-02-27 22:46:27 发布
阅读量1w 收藏 82
点赞数 15
分类专栏： 前端 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43964148/article/details/105313149
版权

这里写目录标题

1、webpack 初体验

全局安装webpack
npm i webpack webpack-cli -g

/*
    index.js:webpack 入口起点文件
    1.运行指令：
      开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
      生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
      webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
    2.结论：
      1.webpack能处理js/json资源，不能处理css/img等其他资源
      2.生产环境比开发环境多压缩一个js文件
 */
function add(x,y) {
    return x+y;
}
add(1,2)

执行打包 这个文件，打包成功
在这里插入图片描述

总结： index.js:webpack 入口起点文件

1.运行指令：
开发环境：webpack ./src/index.js -o ./build/built.js --mode=development
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
生产环境：webpack ./src/index.js -o ./build/built.js --mode=production
webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
2.结论：
1.webpack能处理js/json资源，不能处理css/img等其他资源
2.生产环境比开发环境多压缩一个js文件

2.打包样式资源

创建webpack.config.js文件（配置文件）

use 数组中顺序执行：从右到左，从上到下

const {resolve} = require('path');

module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[

            {
                //匹配哪些文件
                test:/\.less/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
        ]


    },
    // 模式
    mode:'development'
}

3.打包html资源

webpack.config.js文件（配置文件）

plugin 1.下载，2.引入，3.使用

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件，并引入
            template:'./src/index.html'
        })
    ],
    // 模式
    mode:'development'
}

4.打包图片资源

webpack.config.js文件（配置文件）

需要url-loader 和html-loader

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[

            {
                //匹配哪些文件
                test:/\.less/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                // 处理图片资源,但是处理不了html中img的路径问题
                test: /\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    limit: 8* 1024,
                    // 关闭es6
                    esModule:false,
                    name:'[hash:10].[ext]' //不重复名字
                },
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            }
        ]


    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件，并引入
            template:'./src/index.html'
        })
    ],
    // 模式
    mode:'development'
}

5.打包其他资源

webpack.config.js文件（配置文件）

主要用到 file-loader

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[

            {
                //匹配哪些文件
                test:/\.less/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                ]
            },
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                // 处理图片资源,但是处理不了html中img的路径问题
                test: /\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    limit: 8* 1024,
                    // 关闭es6
                    esModule:false,
                    name:'[hash:10].[ext]' //不重复名字
                },
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            },
            {
                // 打包其他资源
                exclude: /\.(css|js|html)$/,
                loader: 'file-loader'
            }
        ]


    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件，并引入
            template:'./src/index.html'
        })
    ],
    // 模式
    mode:'development'
}

6.devServer

// 自动打包运行
// 指令：npx webpack-dev-server
webpack.config.js文件（配置文件）
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            }
        ]


    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件，并引入
            template:'./src/index.html'
        })
    ],

    // 自动打包运行
    // 指令：npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
    },
    // 模式
    mode:'development'
}

7.提取css成单独文件

用到mini-css-extract-plugin插件
并且将style-loader 改为 MiniCssExtractPlugin.loader,

webpack.config.js文件（配置文件）
const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ]
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            }
        ]


    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件，并引入
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin()
    ],

    // 自动打包运行
    // 指令：npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
    },
    // 模式
    mode:'development'
}

8.css兼容

package.json增加

在这里插入图片描述

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/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options:{
                            ident:'postcss',
                            plugins:()=>{
                                require('postcss-preset-env')()
                            }
                        }
                    }
                ]
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            }
        ]


    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件，并引入
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin()
    ],

    // 自动打包运行
    // 指令：npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
    },
    // 模式
    mode:'development'
}

9.css压缩

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options:{
                            ident:'postcss',
                            plugins:()=>{
                                require('postcss-preset-env')()
                            }
                        }
                    }
                ]
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            }
        ]


    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件，并引入
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin(),
        new OptimizeCssAssetsWebpackPlugin()
    ],

    // 自动打包运行
    // 指令：npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
    },
    // 模式
    mode:'development'
}

10.eslint 语法检查

注意：不检查第三方 node_module

npm i eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import


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


const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options:{
                            ident:'postcss',
                            plugins:()=>{
                                require('postcss-preset-env')()
                            }
                        }
                    }
                ]
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            },
            // {
            //     test:/\.js$/,
            //     exclude:/node_modules/,
            //     loader:'eslint-loader',
            //     options:{
            //         fix:true
            //     }
            // }
        ]


    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件，并引入
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin(),
        new OptimizeCssAssetsWebpackPlugin()
    ],

    // 自动打包运行
    // 指令：npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
    },
    // 模式
    mode:'development'
}

11.js，html压缩只要将mode改为production就会自动压缩

12.开发性能提升：HMR:热模块替换

在devServer中启动hot：true，
css默认启动hmr因为style-loader内部启动了
js：需要在js中添加


if (module.hot){
    module.hot.accept('./print.js',function () {
        print();
    })
}

13.开发性能提升：source-map

方便找出开发中的错误

devtool: "source-map",

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置nodejs环境变量
// process.env.NODE_ENV = "development"
module.exports = {
    // 入口
    entry:'./src/index.js',
    // 输出
    output:{
        // 输出文件名
        filename:'built.js',
        //输出路径
        path:resolve(__dirname,'build')
    },
    // loader的配置
    module:{
        rules:[
            {
                //匹配哪些文件
                test:/\.css/,
                //使用哪些loader进行处理
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: "postcss-loader",
                        options:{
                            ident:'postcss',
                            plugins:()=>{
                                require('postcss-preset-env')()
                            }
                        }
                    }
                ]
            },
            {
                // 处理html中的img
                test: /\.html$/,
                loader:'html-loader'
            }
        ]


    },
    plugins:[
        new HtmlWebpackPlugin({
            // 复制一个html文件，并引入
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin(),
        new OptimizeCssAssetsWebpackPlugin()
    ],

    // 自动打包运行
    // 指令：npx webpack-dev-server
    devServer: {
        contentBase: resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true
    },
    devtool: "source-map",
    // 模式
    mode:'development'
}

13.生产性能提升：tree-shaking（去除没用到的代码）

1.必须es6模块化，2.开启生产环境
在package.json中配置

  "sideEffects":["*.css"]
前端阳光
关注
  • 15
    点赞
  • 踩
  • 82
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Webpack 从零入门到工程化实战.rar
12-29
Webpack 从零入门到工程化实战.rar
学习 Webpack5 之路（优化篇）- 近 7k 字
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-27 583
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群一、前言从 0 到 1 学习的朋友可参考前置学习文章：学习 Webpack5 之路（基础篇）[2]学习 Webpac...
webpack5教程
又逢乱世
08-27 1223
简介 本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 ..................
【基础】webpack5使用总结（一）
weixin_45417195的博客
02-27 30
简单来说，webpack就是将我们使用框架写好的预处理语言，转换为浏览器能识别的js、css语言的工具eslint是检查js和jsx语法的工具，我们先引入eslint，并且通过配置文件rules规则，定义不同的代码检查规范//以.eslintrc.js为例：//可供继承的其他规则//解析选项//具体检查规则，参考文档地址：https://eslint.nodejs.cn/docs/latest/rules//**错误规则分三种：* off或0，不检查该项规则。
使用Webpack5搭建项目（react篇）
coding...
04-26 1128
检测HMR热更新，样式文件是可以触发，但是js文件依旧不行，所以引用插件，react-refresh-webpack-plugin。页面重新启动即可，但是刷新页面会有404的问题，解决方案：historyApiFallback，配置webapck.dev.js。在引入的时候我们没有这里是对js文件有自动补全的功能，但这里是jsx文件，所以继续配置webpack.dev.js。新建项目，生成package.json文件，创建config文件夹，创建webpack.dev.js文件。
webpack5基础使用（1）-介绍、打包文件、处理样式资源（css、less）文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5
lalala_dxf的博客
07-22 1831
webpack5是一个静态资源打包工具。会以一个或多个文件作为打包的入口，将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以直接在浏览器端运行了进一步来说就是当开发时，肯定会使用框架、es6模块化语法、less/sass等css预处理器等语法，而这类语法浏览器识别不了，需要进一步编译成js、css等语法浏览器才能够识别，而这一步就由打包工具完成。常见打包工具Grunt、Gulp、Parcel、Webpack、Rollup、Vite…等。...
wepack4配置入门
letianxf的博客
03-01 648
webpack4生产环境，开发环境配置入门
webpack4配置新手教程
bob的博客
08-05 573
1.初始化项目 先创建一个webpackDemo文件夹，切换进去执行如下命令， npm install --save-dev webpack[email protected] 2.基本概念 1. 入口(entry) Webpack 执行构建的第一步将从 Entry 开始，可理解为输入。 2. 输出(output）输出结果，在 Webpack 经过一系列处理后输出的配置 3. loader （模块转换器） 4. 插件(plugins) 扩展插件，在 Webpack对文件处理的扩展处理 3.配置webp
Webpack：典型的Webpack4配置
weixin_48475463的博客
05-10 928
1. Webpack配置文件的构成 mode 输出模式 entry 入口文件 output 输出位置配置 module.rules 不同源码模块的加载规则配置（即使用不同loader加载不同模块） plugins loader以外的工作配置 devServer 配置开发服务器（代理+热更新） optimization 优化配置 optimization.minify 文件压缩 optimization.splitChunks 分包配置 2. 完整的webpack.config.js配置案例
由浅入深配置webpack4
油墨香^-^的博客
03-30 598
webpack在前端化过程中十分重要，所以花了一段时间学习webpack，以及webpack4新特性，本文是按照从易到难的过程，梳理部分webpack概念，常见的loader，plugins，webpack4新特新，还有部分高级概念。webpack需要掌握的核心概念👇Entry:webpack开始构建的入口模块Output: 如何命名输出文件，以及输出目录，比如常见的dist目录。Loaders:作用在于解析文件，将无法处理的非js文件，处理成webpack能够处理的模块。Plugins。
Webpack4&5学习笔记
m0_66989530的博客
07-08 856
Webpack4&5快速入门，手把手教你如何配置自己的脚手架
webpack4配置demo
12-18
通过webpack4搭建开发环境，适合入门，笔记和搭建流程都在里面
webpack从入门到进阶课程资料
08-10
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块...
04-Webpack入门到精通教程.pdf
11-04
04-Webpack入门到精通教程.pdf
webpack4简单入门实例
10-18
主要介绍了webpack4简单入门实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue2+webpack搭建h5框架
03-12
vue2+webpack搭建h5框架
@media 媒体查询不起效果的原因
weixin_43964148的博客
03-10 5557
今天早上高高兴兴学小bootsrap，可是到了媒体查询，死活没效果，如图是我写的代码 可是效果是这样的*（默认颜色为黑色） 于是向群里大佬询问，大佬一语道破 * ...
商城（技术栈vue+vuecli+vant+axios）
weixin_43964148的博客
09-12 5069
1.细节配置 @@配置Fastclick，在main中引入并使用即可 //1.引入 fastclick import FastClick from "fastclick"; if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { Fa...
nodejs全栈开发 从入门到精通
最新发布
03-07
Node.js全栈开发是指使用Node.js技术栈进行前后端开发的一种方式。下面是从入门到精通的步骤： 1. 入门阶段： - 学习JavaScript基础知识：了解JavaScript的语法、数据类型、函数等基本概念。 - 学习Node.js基础知识：了解Node.js的特点、安装配置、模块系统、事件驱动等基本概念。 - 学习Express框架：Express是Node.js最常用的Web应用框架，学习其基本用法和路由处理等。 2. 后端开发： - 学习数据库：掌握关系型数据库（如MySQL）或非关系型数据库（如MongoDB）的基本操作和使用。 - 学习RESTful API设计：了解如何设计和实现符合RESTful风格的API接口。 - 学习中间件：掌握Express中间件的使用，如身份验证、日志记录等。 - 学习数据验证和安全性：了解如何对用户输入进行验证和防止常见的安全漏洞。 3. 前端开发： - 学习HTML/CSS/JavaScript：掌握前端基础知识，包括页面布局、样式设计和交互效果等。 - 学习前端框架：掌握常用的前端框架，如React、Vue等，以及它们与Node.js的配合使用。 - 学习前端工具：了解构建工具（如Webpack）、包管理器（如npm）等前端开发工具的使用。 4. 全栈整合： - 学习前后端通信：了解前后端数据交互的方式，如AJAX、WebSocket等。 - 学习前后端分离：掌握前后端分离的开发模式，通过API接口实现前后端的解耦。 - 学习部署和调试：了解如何将Node.js应用部署到服务器，并进行调试和性能优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值