Webpack基础打包
认识webpack
事实上随着前端的快速发展,目前前端的开发已经变的越来越复杂了:
- 比如开发过程中我们需要通过模块化的方式来开发;
- 比如也会使用一些高级的特性来加快我们的开发效率或者安全性,比如通过ES6+、TypeScript开发脚本逻辑,通过sass、less等方式来编写css样式代码;
- 比如开发过程中,我们还希望实时的监听文件的变化来并且反映到浏览器上,提高开发的效率;
- 比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化;
- 等等….
但是对于很多的前端开发者来说,并不需要思考这些问题,日常的开发中根本就没有面临这些问题:
- 这是因为目前前端开发我们通常都会直接使用三大框架来开发:Vue、React、Angular;
- 但是事实上,这三大框架的创建过程我们都是借助于脚手架(CLI)的;
- 事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化等的;
脚手架依赖webpack
事实上我们上面提到的所有脚手架都是依赖于webpack的:
Webpack到底是什么呢?
我们先来看一下官方的解释:
webpack is a static module bundler for modern JavaScript applications.
webpack是一个静态的模块化打包工具,为现代的JavaScript应用程序;
我们来对上面的解释进行拆解:
- 打包bundler:webpack可以将帮助我们进行打包,所以它是一个打包工具
- 静态的static:这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到静态服务器);
- 模块化module:webpack默认支持各种模块化开发,ES Module、CommonJS、AMD等;
- 现代的modern:我们前端说过,正是因为现代前端开发面临各种各样的问题,才催生了webpack的出现和发展。
下图来自webpack官网
Vue项目加载的文件有哪些呢?
JavaScript的打包:
- 将ES6转换成ES5的语法;
- TypeScript的处理,将其转换成JavaScript;
Css的处理:
- CSS文件模块的加载、提取;
- Less、Sass等预处理器的处理;
资源文件img、font:
- 图片img文件的加载;
- 字体font文件的加载;
HTML资源的处理:
- 打包HTML资源文件;
处理vue项目的SFC文件.vue文件;
Webpack的使用前提
webpack的官方文档是https://webpack.js.org/
- webpack的中文官方文档是https://webpack.docschina.org/
- DOCUMENTATION:文档详情,也是我们最关注的
Webpack的运行是依赖Node环境的,所以我们电脑上必须有Node环境
- 所以我们需要先安装Node.js,并且同时会安装npm;
- 我当前电脑上的node版本是v16.13.2,npm版本是8.3.1(你也可以使用nvm或者n来管理Node版本);
- Node官方网站:https://nodejs.org/
Webpack的安装
webpack的安装目前分为两个:webpack、webpack-cli
那么它们是什么关系呢?
- 执行webpack命令,会执行node_modules下的.bin目录下的webpack;
- webpack在执行时是依赖webpack-cli的,如果没有安装就会报错;
- 而webpack-cli中代码执行时,才是真正利用webpack进行编译和打包的过程;
- 所以在安装webpack时,我们需要同时安装webpack-cli(第三方的脚手架事实上是没有使用webpack-cli的,而是类似于自己的vue-service-cli的东西)
npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装
Webpack的默认打包
我们可以通过webpack进行打包,之后运行打包之后的代码:在目录下直接执行 webpack 命令
生成一个dist文件夹,里面存放一个main.js的文件,就是我们打包之后的文件:
- 这个文件中的代码被压缩和丑化了;
- 另外我们发现代码中依然存在ES6的语法,比如箭头函数、const等,这是因为默认情况下webpack并不清楚我们打包后的文件是否需要转成ES5之前的语法,后续我们需要通过babel来进行转换和设置;
我们发现是可以正常进行打包的,但是有一个问题,webpack是如何确定我们的入口的呢?
- 事实上,当我们运行webpack时,webpack会查找当前目录下的 src/index.js作为入口;
- 所以,如果当前项目中没有存在src/index.js文件,那么会报错;
当然,我们也可以通过配置来指定入口和出口—>npx webpack --entry ./src/main.js --output-path ./build
创建局部的webpack
前面我们直接执行webpack命令使用的是全局的webpack,如果希望使用局部的可以按照下面的步骤来操作。
- 第一步:创建package.json文件,用于管理项目的信息、库依赖等
npm init
- 第二步:安装局部的webpack和webpack-cli
npm install webpack webpack-cli -D
- 第三步:使用局部的webpack:npx webpack
npx webpack
- 第四步:在package.json中创建scripts脚本,执行脚本打包即可
npm run build
Webpack配置文件
在通常情况下,webpack需要打包的项目是非常复杂的,并且我们需要一系列的配置来满足要求,默认配置必然是不可以的。
我们可以在根目录下创建一个webpack.config.js文件,来作为webpack的配置文件:
const path = require('path');//导出配置信息
module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "./build"),filename: "bundle.js"}
}
继续执行webpack命令,依然可以正常打包
npm run build
指定配置文件
但是如果我们的配置文件并不是webpack.config.js的名字,而是其他的名字呢?
- 比如我们将webpack.config.js修改成了 wk.config.js;
- 这个时候我们可以通过 --config 来指定对应的配置文件;
webpack --config wk.config.js
但是每次这样执行命令来对源码进行编译,会非常繁琐,所以我们可以在package.json中增加一个新的脚本:
"scripts": {"build": "webpack --config wk.config.js"},"devDependencies": {"webpack": "^5.37.1","webpack-cli": "^4.7.0"}
之后我们执行npm run build,来打包即可
Webpack的依赖图
webpack到底是如何对我们的项目进行打包的呢?
- 事实上webpack在处理应用程序时,它会根据命令或者配置文件找到入口文件;
- 从入口开始,会生成一个 依赖关系图,这个依赖关系图会包含应用程序中所需的所有模块(比如.js文件、css文件、图片、字体等);
- 然后遍历图结构,打包一个个模块(根据文件的不同使用不同的loader来解析);
假如我们创建一个element.js,通过JavaScript创建了一个元素,并且希望给它设置一些样式;
//title.less
.title {color: #12345678;font-weight: 700;font-size: 30px;user-select: none;
}//style.css
@bgColor: blue;
@textDecoration: underline;.title {background-color: @bgColor;text-decoration: @textDecoration;
}//element.js
import "../css/style.css";
import "../css/title.less";const divEl = document.createElement("div");
divEl.className = "title";
divEl.innerHTML = "你好啊,浮游";document.body.appendChild(divEl);
之后我们执行npm run build,发现报错了
You may need an appropriate loader to handle this file type, currently no loaders…
css-loader的使用
上面的错误信息告诉我们需要一个loader来加载这个css文件,但是loader是什么呢?
- loader 可以用于对模块的源代码进行转换;
- 我们可以将css文件也看成是一个模块,我们是通过import来加载这个模块的;
- 在加载这个模块时,webpack其实并不知道如何对其进行加载,我们必须制定对应的loader来完成这个功能;
那么我们需要一个什么样的loader呢?
- 对于加载css文件来说,我们需要一个可以读取css文件的loader;
- 这个loader最常用的是css-loader;
- css-loader的安装:npm install css-loader -D
css-loader的使用方案
如何使用这个loader来加载css文件呢?有三种方式:
- 内联方式;
- CLI方式(webpack5中不再使用);
- 配置方式;
内联方式:内联方式使用较少,因为不方便管理;
在引入的样式前加上使用的loader,并且使用!分割;
import "css-loader!../css/style.css"
CLI方式
- 在webpack5的文档中已经没有了–module-bind;
- 实际应用中也比较少使用,因为不方便管理;
loader配置方式
配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息:
- module.rules中允许我们配置多个loader(因为我们也会继续使用其他的loader,来完成其他文件的加载);
- 这种方式可以更好的表示loader的配置,也方便后期的维护,同时也让你对各个Loader有一个全局的概览;
module.rules的配置如下:
- rules属性对应的值是一个数组:[Rule]
- 数组中存放的是一个个的Rule,Rule是一个对象,对象中可以设置多个属性:
- test属性:用于对 resource(资源)进行匹配的,通常会设置成正则表达式;
- use属性:对应的值时一个数组:[UseEntry]
- UseEntry是一个对象,可以通过对象的属性来设置一些其他属性
- loader:必须有一个 loader属性,对应的值是一个字符串;
- options:可选的属性,值是一个字符串或者对象,值会被传入到loader中;
- query:目前已经使用options来替代;
- 传递字符串(如:use: [ ‘style-loader’ ])是 loader 属性的简写方式(如:use: [ { loader: ‘style-loader’} ]);
- UseEntry是一个对象,可以通过对象的属性来设置一些其他属性
- loader属性: Rule.use: [ { loader } ] 的简写。
Loader的配置
const path = require('path');module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "./build"),filename: "bundle.js"},module: {rules: [{test: /\.css$/,// loader: "css-loader"//写法一// use: ["css-loader"]//写法二//写法三 use: [{loader: "css-loader"}]}]}
}
认识style-loader
我们已经可以通过css-loader来加载css文件了
- 但是你会发现这个css在我们的代码中并没有生效(页面没有效果)。
这是为什么呢?
- 因为css-loader只是负责将.css文件进行解析,并不会将解析之后的css插入到页面中;
- 如果我们希望再完成插入style的操作,那么我们还需要另外一个loader,就是style-loader;
- 安装style-loader:npm install style-laoder -D
配置style-loader
那么我们应该如何使用style-loader:
- 在配置文件中,添加style-loader;
- 注意:因为loader的执行顺序是从右向左(或者说从下到上,或者说从后到前的),所以我们需要将style- loader写到css-loader的前面;
use: [//注意:style-loader在css-loader的前面{ loader: "style-loader" },{ loader: "css-loader" },
]
如何处理less文件?
在我们开发中,我们可能会使用less、sass、stylus的预处理器来编写css样式,效率会更高。
那么,如何可以让我们的环境支持这些预处理器呢?
- 首先我们需要确定,less、sass等编写的css需要通过工具转换成普通的css;
比如我们编写如下的less样式:
@bgColor: blue;
@textDecoration: underline;.title {background-color: @bgColor;text-decoration: @textDecoration;
}
我们可以使用less工具来完成它的编译转换:
执行如下命令:npm install less -D npx lessc ./src/css/title.less title.css
less-loader处理
但是在项目中我们会编写大量的css,它们如何可以自动转换呢?
这个时候我们就可以使用less-loader,来自动使用less工具转换less到css;
配置webpack.config.js
use: [{ loader: "style-loader" },{ loader: "css-loader" },{ loader: "less-loader" },
]
执行npm run build ,less就可以自动转换成css,并且页面也会生效了。
认识PostCSS工具
什么是PostCSS呢?
- PostCSS是一个通过JavaScript来转换样式的工具;
- 这个工具可以帮助我们进行一些CSS的转换和适配,比如自动添加浏览器前缀、css样式的重置;
- 但是实现这些功能,我们需要借助于PostCSS对应的插件;
如何使用PostCSS呢?主要就是两个步骤:
- 第一步:查找PostCSS在构建工具中的扩展,比如webpack中的postcss-loader;
- 第二步:选择可以添加你需要的PostCSS相关的插件;
命令行使用postcss
当然,我们能不能也直接在终端使用PostCSS呢?
- 也是可以的,但是我们需要单独安装一个工具postcss-cli;
- 我们可以安装一下它们:postcss、postcss-cli
我们编写一个需要添加前缀的css:
- https://autoprefixer.github.io/
- 我们可以在上面的网站中查询一些添加css属性的样式;
因为我们需要添加前缀,所以要安装autoprefixer: npm install autoprefixer -D
直接使用使用postcss工具,并且制定使用autoprefixer:npx postcss --use autoprefixer -o end.cs
postcss-loader
真实开发中我们必然不会直接使用命令行工具来对css进行处理,而是可以借助于构建工具:
在webpack中使用postcss就是使用postcss-loader来处理的;
我们来安装postcss-loader: npm install postcss-loader -D
我们修改加载css的loader:(配置文件已经过多,给出一部分了)
注意:因为postcss需要有对应的插件才会起效果,所以我们需要配置它的plugin;
{loader: "postcss-loader",options: {postcssOptions: {plugins: [require("autoprefixer")]}}
}
单独的postcss配置文件
当然,我们也可以将这些配置信息放到一个单独的文件中进行管理: 在根目录下创建postcss.config.js
module.exports = {plugins: [require("autoprefixer")]
}
postcss-preset-env
事实上,在配置postcss-loader时,我们配置插件并不需要使用autoprefixer。
我们可以使用另外一个插件:postcss-preset-env
postcss-preset-env也是一个postcss的插件;
它可以帮助我们将一些现代的CSS特性,转成大多数浏览器认识的CSS,并且会根据目标浏览器或者运行时环境 添加所需的polyfill;
也包括会自动帮助我们添加autoprefixer(所以相当于已经内置了autoprefixer);
首先,我们需要安装postcss-preset-env: npm install postcss-preset-env -D
之后,我们直接修改掉之前的autoprefixer即可:
module.exports = {plugins: [require("postcss-preset-env")]
}
Webpack基础打包相关推荐
- webpack - 基础打包实现
目录 webpack基础打包 webpack函数打包 分析webpack基础打包后产出的bundle.js 自定义webpack函数 Compiler类实现 实现代码分享 webpack基础打包 we ...
- Vue2.0开发之——webpack基础-打包发布项目(10)
一 概述 配置webpack打包发布 优化图片和js文件的存放路径 配置和使用clean-webpack-plugin插件自动删除dist目录 发布流程总结 二 配置webpack打包发布 在pack ...
- webpack打包php资源,webpack不打包指定的js文件
背景: 在项目实际开发中,有一些IP地址需要随时修改,进行部署,例如websocket的地址.因此在项目打包的时候,不希望保持IP地址的文件被打包,因此就需要把需要修改的常量独立出来,存放在一个js文 ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- webpack增量打包多页应用
一,webpack打包存在的问题 webpack的打包顺序: var path = require('path'); module.exports = {entry: {one: "./sr ...
- webpack基础webpack-dev-server配置
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server 一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根 ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- html打包成app的缓存问题,webpack 独立打包与缓存处理
关于 微信公众号:前端呼啦圈(Love-FED) 个人博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpa ...
- html引入css webpack_深入剖析webpack——webpack 基础
现在做前端开发用 webpack 很多,之前有深入研究过,并且做了很多相关笔记.一直想着整理出来,刚好同事这两天有问到我 webpack 相关的问题,趁着这个机会我自己也好好梳理一下. 准备写 web ...
最新文章
- 项目管理——WBS工作分解法
- 《软件需求规格说明书》 ---学士之路
- HDFS设计思路,HDFS使用,查看集群状态,HDFS,HDFS上传文件,HDFS下载文件,yarn web管理界面信息查看,运行一个mapreduce程序,mapreduce的demo...
- 2019蓝桥杯省赛---java---C---4(质数)
- Nvidia CUDA初级教程4 GPU体系架构概述
- kvm上添加万兆网卡_烂泥:为KVM虚拟机添加网卡
- python爬取系统_python应用:爬虫框架Scrapy系统学习第四篇——scrapy爬取笔趣阁小说...
- C++ 面向对象程序三大特性之 多态
- @程序员,解读 5G 中性命攸关的时延! | 技术头条
- Qt之QSS:带CheckBox的QGroupBox及其样式设计
- 数字图像处理(dip)
- Ant安装与配置build.xml文件说明
- 骑士CMS01 74cms v4.2.111 后台getshell漏洞复现
- Word 2016 大括号多行公式左对齐详解(转载)
- 小米电视联网后显示无法解析小米电视服务器,小米电视机功能详解 教你轻松使用...
- 红米5plus开发者选项怎么打开?
- 【导数术】14.凹凸反转
- Laravel -- 实战篇 自制二维码 Simple QrCode
- Ubuntu下最便捷好用微信、QQ(Wine-Tim Wine-QQ )没有之一
- LeNet-5网络结构解析
热门文章
- Word2vec Parameter Learning Explained (UMich 2016)
- 使用python高效办公Excel(直接模板套用)
- 人工智能 Java 坦克机器人系列: 神经网络,下部
- 良心推荐:机器学习入门资料汇总及学习建议(2018版)
- 告别繁琐的签到,使用 dailycheckin 就可以解决
- android 系统设置向导,详解Android 手机卫士设置向导页面
- 北大计算机结构专业排名,中国大学专业排名出炉,涵盖509个专业,北大A+专业数遥遥领先...
- 51 SJA1000驱动程序
- 人间不值得:我们一起走过的2018
- Sangoma7 (FreePBX)安装后局域网使用eyebeam登陆403错误