代码编织梦想

第一次发博客,发现错误请及时纠正我

一、webpack的基本使用

1.安装webpack相关包

npm i webpack@5.5.1 webpack-cli@4.10.0, -D // -D 表示安装到开发环境

2.配置webpack

① 在项目根目录创建名为webpack.config.js的配置文件,并且初始化如下配置

module.exports={
    mode:"development", // 构建模式 "production"
}

2.1mode可选

①delelopment
  • 开发环境
  • 不会对打包的文件进行代码压缩和性能优化
  • 打包速度快,适合在开发阶段使用
②production
  • 生产环境
  • 会对打包生成的文件进行压缩和性能优化
  • 打包速度慢,仅适合在发布阶段使用

2.2 webpack.config.js作用

在真正开始构建之前,会线读取这个文件,从而基于配置文件对项目进行打包

2.3 默认约定

默认打包入口文件为src->index.js

默认的文件输出路径为dist->main.js

2.4自定义打包出入口

// 操作路径的包
const path = require('path');
module.exports={
    mode:"development", // 构建模式 "production"
    entry: path.join(__dirname, './src/index.js'), // 入口文件
    output: {
        path: path.join(__dirname, './dist'), // 出口文件路径
        filename: 'bundle.js' // 出口文件名
    }
}

3.在package.json中的srcipt中新增一个dev脚本

"scripts": {
    "dev": "webpack"
  },

4.运行命令npm run dev生成dist目录

请添加图片描述
请添加图片描述

5.引入打包好的mian.js

	<!-- 有兼容性问题 -->
    <!-- <script src="./indes.js"></script> -->
    <script src="../dist/main.js"></script>

6.devServer节点

  • 设置知否自动打开浏览器
  • 指定地址
  • 指定端口
    +devServer: {
        +open: true, // 自动打开浏览器
        +port: 80, // 端口号
        +host: '127.0.0.1'
    +}

二、webpack中常用的插件

webpack-dev-serverhtml-webpack-plugin

1.webpack-dev-server

npm i webpack-dev-server@3.11.0 -D
  • 当检查到源码发生变化,则会自动进行项目的打包和构建

配置webpack-dev-server

  "scripts": {
    "dev": "webpack serve" // 添加serve,会启动一个http服务器http://localhost:8080
  },

之后每次按ctrl+s都会制动打包,打包的文件会放在电脑内存里面,路径为(http://localhost:8080/bundle.js)资源管理器中不可见

<!-- 有兼容性问题 -->
    <!-- <script src="./indes.js"></script> -->
    <!-- 手动打包js引入 -->
    <!-- <script src="../dist/bundle.js"></script> -->
    <!-- 自动打包js引入 -->
    <script src="http://localhost:8080/bundle.js"></script>

2.html-webpack-plugin

npm i html-webpack-plugin@5.5.0 -D
  • webpack中的html插件,类似于一个模板引擎
  • 可以通过此插件定制index.html中的内容

解决根目录显示

在这里插入图片描述

配置插件html-webpack-plugin

在webpack.config.js中添加如下代码

+const HtmlPlugin = require('html-webpack-plugin');

+const htmlPlugin = new HtmlPlugin({
    +template: './src/index.html',// 原文件存放路径
    +filename: './index.html'// 指定生成的文件存放路径
+})
module.exports={
    mode:"development", // 构建模式 "production"
    entry: path.join(__dirname, './src/index.js'), // 入口文件
    output: {
        path: path.join(__dirname, './dist'), // 出口文件路径
        filename: 'bundle.js' // 出口文件名
    },
    +plugins: [htmlPlugin],
}

会自动注入,但是生成的页面也是在内存中,资源管理器看不到

<script src="bundle.js"></script> <!-- // 无需手动添加 -->

三、loader配置

协助webpack打包处理一些特定的文件模块

  • css-loader可以打包.css的相关文件
  • less-loader可以打包.less的相关文件
  • babel-loader可以打包webpack无法处理的高级JS语法
    请添加图片描述

1.处理css文件

安装loader

npm i style-loader@2.0.0 css-loader@5.0.1 -D

webpack.config.js配置文件中

module: { // 放左右第三方模块的匹配规则
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']},  //  ['style-loader', 'css-loader']顺序不能乱,从后往前识别
        ]
    }

在index.js中引入

import "./css/index.css";

2.处理less文件

安装loader

npm i less-loader@7.1.0 less@3.12.2 -D

webpack.config.js配置文件中

module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
        ]
    }

在index.js中引入

import "./css/index.less";

3.处理url路径相关文件

安装loader

npm i url-loader@4.1.1 file-loader@6.2.0 -D

webpack.config.js配置文件中

module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']}, // 处理css
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, // 处理less
            {test: /\.png|jpg|gif$/, use:'url-loader?limit=22229'}, // 处理url limit=22229表示小于22229kb的图片转为base64
        ]
    }
#box{
    width: 60px;
    height: 30px;
    background-color: aquamarine;
    background: url("../image/22.png");
}

请添加图片描述

4.loader的另一种配置方式

module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']}, // 处理css
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, // 处理less
            // {test: /\.png|jpg|gif$/, use:'url-loader?limit=1351'}, // 处理url limit=1351表示小于1351kb的图片转为base64
            {
                test: /\.png|jpg|gif$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1351,
                    }
                }},
        ]
    }

5.处理js高级语法

webpack只能打包处理一部分高级的JavaScript语法,对于哪些不能处理的JavaScript语法需要借助babel-loader进行打包处理,例如webpack不能处理一下语法

class Person{
    static info = 'person info'
}

console.log(Person.info)

安装loader(低版本webpack需要,新版不需要)

npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D

在webpack.config.js的module->rules数组中,添加

			{
                test: /\.js$/,
                exclude: /node_modules/, // 排除模块
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                }
            }

四、打包发布

build命令

–mode production会覆盖webpack.config.js的mode

"scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
  },

打包之后

请添加图片描述

文件类型归类 配置

//js
output: {
        path: path.join(__dirname, './dist'), // 出口文件路径
        filename: 'js/bundle.js' // 出口文件名
    }
// 图片
{
                test: /\.png|jpg|gif$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1349,
                        // outputPath: 'image',
                        //哈希截取,让图片的名字变短
                        name: 'img/[name].[hash:6].[ext]'
                    }
                }},

请添加图片描述

自动清理dist目录

插件clean-webpack-plugin

安装

npm i clean-webpack-plugin@3.0.0 -D

配置

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const cleanPlugin = new CleanWebpackPlugin();
module.exports={
    plugins: [htmlPlugin,cleanPlugin],
}

企业级项目的打包发布

  • 生成打包报告,根据报告分析具体的优化方案
  • Tree-Shaking
  • 为第三方库启用CDN加载
  • 配置组件的按需加载
  • 开启路由懒加载
  • 自定制首页内容

Source Map

生产环境的问题

  • 变量被替换
  • 空行和注释被剔除

Source Map 就是一个信息文件,里面存储的是位置信息,也就是对应了代码压缩混淆前后的对应关系。有了它。出错的时候,除错工具直接显示原始代码,而不是转换之后的代码。

解决Source Map的问题

解决保存行数保持一致,仅限开发模式

module.exports={
    mode:"development",
	devtool: 'eval-source-map', // 开发模式下的配置, 保证错误代码提示行数真确
}

生产环境下的Source Map

生产环境下为了安全,不会生成Source Map文件,防止源代码暴露给有图之人。nosource-source-map只会定位问题行,不会暴露源码

module.exports={
    mode:"production",
	devtool: 'nosource-source-map',
}

定位错误同时暴露源码

module.exports={
    mode:"production",
	devtool: 'source-map',
}

五、完整配置

package.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "babel-loader": "^8.2.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.2",
    "less": "^3.12.2",
    "less-loader": "^7.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.5.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js

// 操作路径的包
const path = require('path');

// 解决根目录显示
const HtmlPlugin = require('html-webpack-plugin');
// 自动清理dist目录
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 实例化一个插件
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',
    filename: './index.html'
})
// 实例化一个插件
const cleanPlugin = new CleanWebpackPlugin();

module.exports={
    mode:"development", // 构建模式 "production"
    entry: path.join(__dirname, './src/index.js'), // 入口文件
    output: {
        path: path.join(__dirname, './dist'), // 出口文件路径
        filename: 'js/bundle.js' // 出口文件名
    },
    plugins: [htmlPlugin,cleanPlugin],
    devServer: {
        open: true, // 自动打开浏览器
        port: 80, // 端口号
        host: '127.0.0.1'
    },
    devtool: 'eval-source-map', // 开发模式下的配置, 保证错误代码提示行数真确
    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader', 'css-loader']}, // 处理css
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, // 处理less
            // {test: /\.png|jpg|gif$/, use:'url-loader?limit=1351'}, // 处理url limit=1351表示小于1351kb的图片转为base64
            {
                test: /\.png|jpg|gif$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 1349,
                        outputPath: 'image',
                        //哈希截取,让图片的名字变短
                        // name: 'img/[name].[hash:6].[ext]'
                    }
                }},
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除模块
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: ['@babel/plugin-proposal-class-properties'],
                    }
                }
            }
        ]
    }
}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Mr_zhang0211/article/details/125370874

webpack 入门教程详细教程_爱睡的虫虫的博客-爱代码爱编程_webpack教程

webpack 中文网:https://www.webpackjs.com/ 一、webpack是什么? 4.x webpack是一个现代javascript应用程序的静态模块打包器(module bundler)。

webpack入门教程(基础版)-爱代码爱编程

文章目录 一、webpack是什么?二、安装webpack1.全局安装2.局部安装三、webpack的四个核心概念1、entry(入口)2、output(出口)3、loader(转换器)4、plugins(插件)四、使用webpack1、安装2、执行打包3、启动本地服务4、启动热更新5、区分开发环境和生产环境6、babel-loader 一、w

webpack基础教程(简单使用)-爱代码爱编程

目录   一 、webpack是什么? 二、 安装webpack  三、webpack基本打包命令 1. webpack起步 2. webpack打包js 3. webpack编译es6  4. webpack提取公共代码(多页面应用)   5. webpack单页面解决方案–代码分割和懒加载 6. webpack处理CSS  7.

超详细 WebPack 入门教程-爱代码爱编程

前端工程化 1.什么是前端工程化 前端工程化指的是: 在企业级的前端项目开发中,把前端开发所需要的工具,技术,流程,经验等进行规范化,标准化。 1)模块化 (js的模块化,css的模块化,资源的模块化) 2)组件化(复用现有的UI结构,样式,行为) 3)规范化(目录结构的划分,编码规范化,接口规范化,文档规范化,Git分支管理) 4)自动化(自动化构

【webpack】webpack 入门教程-爱代码爱编程

一、Webpack 是什么         Webpack是一种前端资源构建工具,一个静态模块打包器(module bundler)         在Wbpack看来,前端的所有资源文件( js / json / css / img / less / ... )都会作为模块处理。         他将根据模块的依赖关系进行静态分析,打包生成对应的静

vue脚手架搭建及vue项目创建【详细教程】_m0_67402096的博客-爱代码爱编程

目录 Vue脚手架 环境安装Vue项目创建Vue项目目录结构项目运行流程组件结构Vue脚手架 Vue脚手架指的是vue-cli,它是一个快速构建**单页面应用程序(SPA)**环境配置的工具,cli是(command-line-interface )命令行界面。 补充:单页面应用程序 单页面应用程序简称SPA,指一个Web网站中只

webpack使用方法(一):安装webpack_m0_67390969的博客-爱代码爱编程

文章目录 一、安装Node.js二、安装webpack一、安装Node.js 首先,webpack是构建在Node.js的基础之上的,所以安装webpack之前,需确保本地安装了Node.js。 Node.js官网:https://nodejs.org/en/ 这里有两个版本可供选择,对于开发用户,推荐下载LTS版本(长期支持版本),建议

webpack的打包流程是什么?_永不磨灭的小黑的博客-爱代码爱编程

1.初始化一个管理包 yarn init 2 、安装使用webpack所需要的依赖包 yarn add webpack webpack-cli -D 3、 在package.json文件中配置scripts(自定义命令) scripts: {     "build": "webpack" } 4、将新建的打包文件引入webpack的默认打包入口src

wangeditor富文本编辑器使用过程中遇到的问题以及解决办法_前端-阿来的博客-爱代码爱编程

背景 我的项目之前用的富文本编辑器是quill,之前其实考虑用过wangeditor,但是当时wangeditor V3的英文支持不友好,而我们业务是面向海外的,所以综合考虑下来用了quill。 最近需求富文本要支持表格,quill的表格支持一塌糊涂,建议不要花时间尝试,直接上wangeditor v5,下面我把wangeditor主要用到的地方和有坑的

webpack 入门教程_webpack入门教程-爱代码爱编程

webpack是什么? 简而言之,webpack是一个开源的JavaScript模块打包器。在github上有超过60k星量,它是这个领域的领导者。 Webpack允许你在开发中将JavaScript拆分为单独的模块(更好