代码编织梦想

一、webpack了解

什么是Webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

模块化,让我们可以把复杂的程序细化为小的文件;
类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能能装换为JavaScript文件使浏览器可以识别;
Scss,less等CSS预处理器…
这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的,这就为WebPack类的工具的出现提供了需求。

webpack打包原理

把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。

webpack的优势

(1) webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。

(2)能被模块化的不仅仅是 JS 了。

(3) 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。

(4)扩展性强,插件机制完善

官方文档:

概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。https://www.webpackjs.com/concepts/#entry

二. webpack打包工具的安装

webpack打包工具依赖nodejs. nodejs环境依赖各种包, 这些包使用npm进行管理 npm就是用来管理node下的各种包的

第一步: 安装nodejs

在官网下载nodejs:https://nodejs.org/zh-cn/ 安装好以后可以查看nodejs的版本

node -v

第二步: 安装webpack

首先查看本机是否已经安装了webpack, 使用命令查询

 webpack --version

如果没有安装, 则安装全局的webpack

npm i webpack webpack-cli -D

三. webpack的基本使用

 Loader的使用

npm i class-loader style-loader -D

css-loader处理.css文件style-loader把css加载到style标签内

module.exports = {
    module: {
        rules: [
            // 当文件名test通过,使用如下插件
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
        ]
    },
}

 

处理图片

安装 npm i file-loader url-loader -D

作用 加载图片和文件

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
                use: [{
                    loader: "url-loader", // 使用url加载器
                    options: { limit: 5000, name: 'images/[hash].[ext]' },
                    // 文件命名 images文件夹,hash值(计算出图片的名称) ext后缀名
                }]
            }
        ]
    },
}

plugin插件

Plugin 的配置很简单,plugins 配置项接受一个数组,数组里每一项都是一个要使用的 Plugin 的实例,Plugin 需要的参数通过构造函数传入。

安装:npm i html-webpack-plugin -D

作用:生成html模板文件,自动把打包好的js插入到模板文件

在webpack.config.js 导入

const HtmlwebpackPlugin = require(“html-webpack-plugin”)
plugins:[
​        new HtmlwebpackPlugin({template:"./public/index.html"})    
​]

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

webpack_dear_mr的博客-爱代码爱编程

认识Webpack Webpack可以看作是模块打包机,做的事情就是,分析项目结构,找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言(Sass,TypeScript),并将其转换和打包为合适的格

webpack 入门到进阶_王道长的编程之路的博客-爱代码爱编程

webpack是一个 现代JavaScript应用程序的静态模块打包器。当webpack处理应用程序时,它会递归地构建一个 依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打

vue webpack-爱代码爱编程

1.webpack概述 webpack是一个前端项目构建工具(打包工具),webpack提供了友好的模块化支持,以及代码压缩混淆、处理js 兼容问题,性能优化等强大的功能 2.webpack的基本使用 (1)创建列表各行变色项目 新建项目空白目录,并运行npm init -y命令,初始化包管理配置文件package.json新建src源代码目录新建

webpack-爱代码爱编程

webpack笔记 ## 五大核心 1.entry 入口 webpack以哪个文件作为入口开始打包 单入口,使用字符串指定一个入口文件,打包一个chunk,输出bundle,chunk名称可以默认 多入口entry:[ " “,” “] 数组写法 多入口entry:{ one:’./src/index.js’, two:’./src/main.js’ }

webpack入门教程_tingfr的博客-爱代码爱编程

目录 一、webpack的基本使用1.安装webpack相关包2.配置webpack2.1mode可选①delelopment②production2.2 webpack.config.js作用2.3 默认约定2.4自定义打包出入口3.在package.json中的srcipt中新增一个dev脚本4.运行命令`npm run dev`生成dist目

vue全家桶 (vue-cli、vue-route、vuex)学习笔记__揽的博客-爱代码爱编程

Es6 let 是变量 2.const 1. 是常量不能修改 创建的时候一定要赋值 要不报错定义的类 里面的属性值可以修改 3.对象创建 1.可以先定义const name=1; Const a={name}; 输出a的话就是{“name”:1}; 可以直接放进去函数 Const a={ Run(){ }, Set(){ }