前端进阶(一)webpack 概述

编程之家收集整理的这篇文章主要介绍了前端进阶(一)webpack 概述编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
# webpack 概述 >本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 >可以从这里了解更多关于 JavaScript 模块和 webpack 模块的信息。 从 webpack v4.0.0 开始,可以不用引入一个配置文件。然而,webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念: **入口(entry) 输出(output) loader 插件(plugins)** [webpack官网](https://webpack.js.org/) ![在这里插入图片描述](https://www.icode9.com/i/ll/?i=20210624144132973.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MDk4NTI2,size_16,color_FFFFFF,t_70) ## webpack 能做什么 webpack是一个静态模块打包器 1. 语法转换 + less/sass/stylus转换成css + ES6转换成ES5 + ... 2. html/css/js 代码压缩合并 (打包) 3. webpack可以在开发期间提供一个开发环境 + 自动打开浏览器 + 保存时自动刷新 4. 项目一般先打包再上线 # webpack 的基本使用 ## webpack基本打包配置 1. 建目录 dist src/main.js 2. 初始化 ``` yarn init -y ``` 3. 安装依赖包 (-D 将依赖记录成开发依赖, 只是开发中需要用的依赖, 实际上线不需要的) ``` yarn add webpack webpack-cli -D ``` 4. 到package.json文件中, 配置scripts ```js scripts: { "build": "webpack --config webpack.config.js" } ``` 5. 提供 webpack.config.js 参考文档: [https://webpack.docschina.org/concepts/#entry](https://webpack.docschina.org/concepts/#entry) ```js const path = require('path') module.exports = { // entry: 配置入口文件 (从哪个文件开始打包) entry: './src/main.js', // output: 配置输出 (打包到哪去) output: { // 打包输出的目录 (必须是绝对路径) path: path.join(__dirname, 'dist'), // 打包生成文件名 filename: 'bundle.js' }, // 打包模式 production 压缩/development 不压缩 mode: 'development' } ``` 6. 执行配置的scripts脚本 ``` yarn build ``` 小测试: ​ 假定在main.js中导入一个 aa.js, 多个文件需要打包, wepack会打包成一个文件, 可以节约请求的次数 ```js require('./aa.js') console.log('这是main模块') ``` ## 基于 webpack 实现隔行变色 - 新建 public/index.html 编写代码 - 在 index.html 中新建一些 li 玩玩 ```html <Meta charset="utf-8"/> <Meta content="width=device-width, initial-scale=1.0" name="viewport"/> <Meta content="ie=edge" http-equiv="X-UA-Compatible"/> Document <body>
  • 我是第1个li
  • 我是第2个li
  • 我是第3个li
  • 我是第4个li
  • 我是第5个li
  • 我是第6个li
  • 我是第7个li
  • 我是第8个li
  • 我是第9个li
``` 需求: **使用 jquery 隔行变色** 安装jquery ``` yarn add jquery ``` `main.js` ```js // 需求: 通过jquery实现隔行变色 const $ = require('jquery') $(function() { $('#app li:nth-child(odd)').css('color', 'red') $('#app li:nth-child(even)').css('color', 'green') }) ``` ## **自动生成html** html-webpack-plugin插件 在 index.html 中 手动引入 打包后的资源,是有缺点的 比如: `如果webpack 配置中的输出文件修改了,需要及时在 index.html 中同步修改` 1. 下载 (-D 将依赖记录成开发依赖, 只在开发阶段用, 实际上线是不需要的) ``` yarn add html-webpack-plugin -D ``` 2. **在`webpack.config.js`文件中,引入这个模块** : ```js // 引入自动生成 html 的插件 const HtmlWebpackPlugin = require('html-webpack-plugin') ``` 3. 配置 ```js plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' }) ] ``` > 配置好了之后, public 目录的 index.html 就不需要引入打包后的文件了, 会自动插件生成 html 引入 # webpack - loaders 的配置 webpack认只认识 js 文件, 但是webpack 可以使用 [loader](https://www.webpackjs.com/concepts/loaders) 来加载预处理文件, 允许webpack也可以打包 js之外的静态资源。 所以webpack如果要处理其他文件类型, **记得要先配置对应的 loader** ## webpack中处理 css 文件 需求: 去掉小圆点, 新建 css 目录 1. 安装依赖 ``` yarn add style-loader css-loader -D ``` 2. 配置 ```js module: { // loader的规则 rules: [ { // 正则表达式,用于匹配所有的css文件 test: /\.css$/, // 先用 css-loader 让webpack能够识别 css 文件内容 // 再用 style-loader 将样式, 以动态创建style标签的方式添加页面中去 use: [ "style-loader", "css-loader"] } ] }, ``` ## 分离 css 文件 将css放到了style标签中, 请求次数是少了, 但是如果css文件太大的话,也不是太好,那有没有什么办法把`css`分离出来呢? - 有一个插件,`mini-css-extract-plugin`,这个插件支持`webpack4.x` - 之前的插件`extract-text-webpack-plugin`对`webpack3.x`的版本支持 (目前已废弃) 1. 安装依赖包 ``` yarn add mini-css-extract-plugin -D ``` 2. **在`webpack.config.js`文件中,引入这个模块** ```js // 引入分离 css 文件的 模块 const MiniCssExtractPlugin = require('mini-css-extract-plugin') ``` 3. 配置loaders ```js // 模块加载 module: { // loader的规则 rules: [ // 配置 css 文件的解析 { test: /\.css$/, use: [ // 根据官方文档写的,注意'css-loader'的书写位置 { loader: MiniCssExtractPlugin.loader, options: { publicPath:'../', }, }, 'css-loader' ] }, ], } ``` 4. 插件的配置 ```js // 配置插件 plugins: [ ... // 定义打包好的文件的存放路径和文件名 new MiniCssExtractPlugin({ filename:'css/index.css' }) ], ``` ## webpack 中处理 less 文件 1. 下载依赖包 注意: 解析less文件需要识别 less 语法, 所以除了 `less-loader` 需要额外下载 `less` 包 less-loader: 将less转换成 css ``` yarn add less less-loader -D ``` 2. 配置 ```js // 配置 less 文件的解析 { test: /\.less$/, use: [ // 分离出 css 内容 { loader: MiniCssExtractPlugin.loader, options: { publicPath:'../', }, }, 'css-loader', 'less-loader' ] } ``` ## webpack 中处理图片 - url-loader 我们试了一下,在`css`中用到一下背景图片,结果就报错了,难道`webpack`连图片也认不出来吗? 没有错,的确认不出来, 此时需要转换图片的 loader, 来处理图片的问题, 主要用到 `url-loader` 和 `file-loader` 注意: `url-loader` 中的部分功能要用到 `file-loader`, 要下载两个模块 1. 下载依赖包 ``` yarn add url-loader file-loader -D ``` 2. 配置loader ```js { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader' } ] } ``` 图片认转成 base64 字符串了, - 好处就是浏览器不用发请求了,直接可以读取 - 坏处就是如果图片太大,再转`base64`就会让图片的体积增大 30% 左右, 得不偿失 所以需要通过 options 配置选项进行配置 limit, 可以设置一个临界值, 大于这个值会整个文件直接打包到目录中, 得到是路径, 如果小于这个值, 就会转成 base64, 节约请求的次数 ```js { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { // 超过 8k 就不转 base64, 小于 8k 才转 limit: 8 * 1024 } } ] } ``` ## 清除dist目录的插件 使用 [clean-webpack-plugin插件](https://www.webpackjs.com/guides/output-management/#%E6%B8%85%E7%90%86-dist-%E6%96%87%E4%BB%B6%E5%A4%B9) 在每次打包前清除下dist文件夹。 安装依赖包 ``` yarn add clean-webpack-plugin -D ``` `webpack.config.js` ```js // 其他代码 // 导入清除插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { // 其他配置 plugins: [ // .... // 调用清除打包目录插件 new CleanWebpackPlugin() ] }; ``` ## 配置图片的打包输出目录 认是直接输出到了 dist 根目录, 可以通过 options 进行配置 ```js { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { // 超过 8k 就不转 base64, 小于 8k 才转字符串 limit: 8 * 1024, // 配置输出文件名 name: '[name].[ext]', // 配置静态资源的引用路径 publicPath: "../images/", // 配置输出文件目录 outputPath: "images/" } } ] } ```

总结

以上是编程之家为你收集整理的前端进阶(一)webpack 概述全部内容,希望文章能够帮你解决前端进阶(一)webpack 概述所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

猜你在找的CSS相关文章

常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而
Y(^o^)Y css动画大乱弹之animation。 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧)。@keyframe算是一个动画模板。在其中,
我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放
用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border
开发场景中用到display:inline-block;然后呢,div间就有间隙,但是ajax加载出来的数据没有间隙,解决办法如下 display:inline-block表示行内块元素,后面自带空格
弹窗是一种常见的交互方式,而蒙层则是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,我们会发现,当弹出遮罩层后,底层body的内容也是可以滚动,显然这不是我们想要的效果,而这个问
html代码是这样的 &lt;div class=&quot;arrow-up&quot;&gt; &lt;!--向上的三角--&gt; &lt;/div&gt; &lt;div class=&quo
前言 还在用图片制作箭头,三角形,那就太lou了。css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题。 先来看看这段代码: CSS绘制三角形和箭头,不用再用图片了 CSS绘制
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注