![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
webpack
主要是webpack的配置和webpack的使用
前路茫茫——何处无香
没有平庸的人,只是你不愿意远离平庸!成为我的粉丝,让你成为一个不平庸的人!
展开
-
parcel将取代webpack
当我发现了新大陆parcel的时候内心很激动,终于不用再使用webpack了,webpack不是不好,只是不兼容。很多插件或者loader都不能共存。而且对css中的图片和html中的图片互相有着冲突(webpack4.0).而且webpack跟新后很多的loader直接弃用,我们原先的webpack导致不饿能用。而且webpack的文档其实对于初级程序员来说并不友好。所以建议大家可以使用parcel。几乎0配置,速度是webpcak的10倍...原创 2021-03-15 17:22:00 · 290 阅读 · 0 评论 -
webpack图片压缩的坑
如果我们想将图片文件打包到指定路径下,我们需要在前面准备加载器插件:npm install url-loader --save-devnpm install file-loader --save-dev在rules中添加{ test: /\.(png|jpg|jpeg|gif)$/, use:[ { loader: "url-loader", options: { name:'[name][hash原创 2021-03-12 15:02:45 · 609 阅读 · 8 评论 -
Webpack五大核心概念
一、Entry入口(Entry)指示webpack以哪个文件为入口起点开始打包,分析构建内部依赖图。二、Output输出(Output)指示Webpack打包后的资源bundles输出到那里去,以及如何命名。三、LoaderLoader让Webpack能够取处理那些非JavaScript文件(Webpack自身子理解JavaScript)四、Plugins插件(Plugins)可以用于执行范围更广的任务,插件的范围包括,从打包优化和压缩,一直到重新定义环境的变量等。五、Mod原创 2021-03-11 13:34:50 · 1125 阅读 · 0 评论 -
webpack对css进行压缩
在html中我们引用css代码一般是用link标签,如今我们借助webpack将css代码引入到我们的.js文件中,并让其生效。接下来进入正题,我们将使用webpack中的css-loader和style-loader进行代码压缩。大家一定要注意css-loader和style-loaderstyle-loaderstyle-loader是通过一个JS脚本创建一个style标签,里面包含一些样式。style-loader是不能单独使用的,因为它不负责解析css之前的依赖关系,每个loader原创 2021-03-10 17:51:02 · 363 阅读 · 0 评论 -
webpack配置之HtmlWebpackPlugin第三方引用
HtmlWebpackPlugin该插件可以为你生成一个HTML文件。首先我们使用这个插件我们就需要先安装这个插件npm insatall --save-dev html-webpack-plugin然后引用插件const HtmlWebpackPlugin=require('html-webpack-plugin');最后我们就可以使用了 plugins: [new HtmlWebpackPlugin({ filename: "index.html",原创 2021-03-10 14:27:50 · 423 阅读 · 0 评论 -
webpack配置之——出口配置(output)
首先我们要知道如果没有配置output出口,它的默认出口是什么,它的默认出口是"dist/main.js"。如何使用output属性在webpack配置中,output属性的最低要求是,将它的值设置为一个对象,然后为将输出文件的文件名配置为output.filename。webpack.config.js //配置出口文件 output: { filename: "bundle.js" }此时文件将输送到dist目录中的bundle.js文件中。..原创 2021-03-10 12:01:05 · 455 阅读 · 0 评论 -
webpack中webpack.config.js的入口配置
webpack.config.js的配置以我自己的需求为标准配置入口的起点entry属性是入口的意思,我们可以将entry定义为一个字符串或者一个数组,甚至一个对象都可以。我们根据自己的需求来定。如果是一个单个入口entry: './src/index.js',如果是多个入口 entry: ['./src/file_1.js', './src/file_2.js'],或者 entry: { app: './src/app.js', adminApp:原创 2021-03-10 11:52:54 · 221 阅读 · 0 评论 -
webpack配置使用步骤
一、初始化一个项目1、创建项目也可以(手动创建一个文件夹),执行npm init -y,让项目进行初始化,并生成package.json文件。注意:项目名不能有汉字,不能取名为webpack2、安装webpack:npm i webpack webpack-cli -Dwebpack:代表webpack工具的核心包 webpack-cli:提供了一些在终端中使用的命令 -D(--svae-dev):表示项目开发期间的依赖,也就是:线上代码中用不到这些包了。(developers)原创 2021-03-10 11:41:10 · 199 阅读 · 0 评论 -
webpack到底是干什么用的?
根据官网介绍,我们可以从本质上说,webpack是一个用于现代JavaScript应用程序的_静态模块打包工具。实际上我们可以理解成,当我们项目中有多个模块的时候,webpack会根据自身的依赖图,并生成一个或多个bundle。那么究竟webpack能给我们带来哪些便利呢?浏览器不识别SASS、LESS ==>需要对less/sass预编译成css,供浏览器使用; 项目中的模块化以及相互之间引用以来造成文件分散==>需要把各个分散的模块集中打包成大文件,减少HTTP的链接请求次数;原创 2021-03-10 10:32:13 · 1817 阅读 · 0 评论 -
面向对象设计的七大基本原则
面向对象设计的七大基本原则1、开闭原则(Open Closed Principle,OCP)2、单一职责原则(Single Responsibility Principle,SRP)3、里氏替换原则(Liskov Substitution Principle,LSP)4、依赖倒置原则(Dependence Inversion Principle,DIP)5、接口隔离原则(Interfac...原创 2020-03-12 20:42:15 · 738 阅读 · 0 评论