webpack基础知识介绍

1.开发模式

开发模式顾名思义就是我们开发代码时使用的模式

webpack默认只处理js文件，对样式是没办法处理的。因此要处理css资源需要引入CSS-loader

处理CSS资源

如果要使用 css-loader，你需要安装 webpack@5

首先，你需要先安装 css-loader：npm install --save-dev css-loader style-loader

然后把 loader 引用到你 webpack 的配置中。如下所示：

在入口（entry）main.js文件中引入css资源文件。 import "./css/file.css";

webpack.config.js

module.exports = {

  module: {

    rules: [

      {

        test: /\.css$/i,  //只检测以.css结尾的文件

        use: ["style-loader", "css-loader"],   //use的执行顺序，从右到左，从下到上 先执行css-loader 再执行style-loader

                                                //css-loader:将css资源编译成commonjs的模块到js中， style-loader 将js中css通过创建style标签添加html文件中生效

      },

    ],

  },

};

然后运行 webpack。

如果由于某种原因你需要将 CSS 提取为一个文件（即不要将 CSS 存储在 JS 模块中），你可能想要查看推荐示例。

处理less资源

首先，你需要先安装 less 和 less-loader： $ npm install less less-loader --save-dev

在入口（entry）main.js文件中引入css资源文件。 import "./less/file.less";

module.exports = {

  module: {

    rules: [

      {

        test: /\.less$/i,

        // loader：'xxx' 只能使用1个loader

        use: [

          // compiles Less to CSS

          'style-loader',

          'css-loader',

          'less-loader',

        ],

      },

    ],

  },

};


处理Sass和SCSS资源

npm install sass-loader sass  --save-dev
在入口（entry）main.js文件中引入css资源文件。  import  "./scss/file.scss";

module.exports = {

  module: {

    rules: [

      {

        test: /\.s[ac]ss$/,

        // loader：'xxx' 只能使用1个loader

        use: [

          // compiles Less to CSS

          'style-loader',

          'css-loader',

          'sass-loader',  //将sass编译成CSS文件

        ],

      },

    ],

  },

};

处理图片资源  （本身就会自动打包，但是优化可以处理的更好）

  test:/\.(png|jpe?g|gif|webp|svg)$/,

  type:"asset",

  parser:{

  dataUrlConditon:{

maxSize:10 *1024, //10KB

   }

}
generator:{
  //输出图片名称
 filename:'static/images/[hash][ext][query]',   //hash 是根据文件内容生成hash值，内容是唯一的 [hash:10] hash值取前10位  ext是文件扩展名，你之前是什么的，之后还是什么，query是携带一些参数

}
}

修改输出文件目录

output:{

//所有文件的输出路径

//_dirname nodejs的变量，代表当前文件的文件夹目录

path:path.resolve(_dirname,'dist') //绝对路径

//入口文件打包输出文件名

filename:'static/js/main.js',

 }

自动清空上次打包内容

output:{

//所有文件的输出路径

//_dirname nodejs的变量，代表当前文件的文件夹目录

path:path.resolve(_dirname,'dist') //绝对路径

//入口文件打包输出文件名

filename:'static/js/main.js',

clear:true,  //自动清空上次打包的内容，原理：在打包前，将整个path目录内容清空，再进行打包

 }

处理字体图标资源

阿里巴巴矢量图标库https://www.iconfont.cn/search/index

处理其他资源

开发中可能还存在一些其他资源，如音视频等。

处理js资源

原因是webpack对js处理是有限的，只能编译js中ES模块化语法，不能编译其他语法，导致js不能再IE等浏览器运行，所以我们希望左一些兼容性处理

。其次开发中，团队对代码有严格要求的，我们不能由肉眼取检测代码格式，需要使用专业的工具来检测。

针对js兼容性处理，我们使用Babel来完成。

针对代码格式，我们使用EsLint来完成。

我们先完成EsLint，检测代码格式无误后，在由Babel做代码兼容性处理。

Eslint

在webpack 4 的时候是loader ，在webpack5的时候是一个插件。

Eslint的官方文档地址 https://eslint.bootcss.com/ ，可以检查配置选项。

可组装的Javascript 和jsx检查工具

这句话意思就是：它是用来检测js和jsx语法的工具，可以配置各项功能。

我们使用Eslint，关键是写Eslint配置文件，里面写上各种rules规则，将来运行Eslint时就会以写的规则对代码进行检查

Eslint 在rules中写规则，或者继承extends现有的规则

现在以下较为有名的规则：

Eslint 官方的规则 eslint:recommendded

Vue Cli 官方的规则 plugin：vue/essential

React Cli 官方的规则 react-app

off或0 -关闭规则

warn 或 1 开启规则，使用警告级别的错误 warn（不会导致程序退出）

error 或 2 开启规则，使用错误级别的错误，error（当被触发的时候，程序会退出）

首先，需要安装 eslint-webpack-plugin：npm install eslint-webpack-plugin eslint --save-dev

然后把插件添加到你的 webpack 配置。例如：

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {

  // 所有的插件都是构造函数，需要用new调用

  plugins: [new ESLintPlugin({
       //检测哪些文件
     context:path.resolve(_dirname,'src')

})],

  // 在options 中可以传入eslint参数
 


};

然后创建一个文件，文件名 .eslintrc.js

//列如react项目中，我们可以这样写配置

module.exports ={

extends:['react-app'],

env:{

node:true,//启动node中全局变量

browser:true //启动浏览器中全局变量

},

parserOptions:{

ecmaVersion:6, //es6

sourceType:"module " //es module

},

rules:{

//rules参考eslint官网

//我们的规则会覆盖掉react-app的规则

//所以想要修改规则直接改就是了

 eqeqeq:['warn','smart'],

"no-var":2 //不能使用var 定义变量

}}

在根目录创建.eslintignore

作用是让编译器不检查 dist目录

Babel

javascript编译器

主要用于将ES6语法编写的代码转换为向后兼容的JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

具体配置

我们以babel.config.js 配置文件为例

module.exports = {

//预设

presets:[],

}

1.presets 预设

简单理解：就是一组Babel插件，扩展Babel功能

@babel/preset-env 一个智能预设，允许您使用最新的JavaScript

@babel/preset-react 一个用来编译React jsx语法的预设

@babel/preset-typescript 一个用来编译Typescript语法的预设

安装 npm install -D babel-loader @babel/core @babel/preset-env

在webpack.config.js文件中加入

module: {

  rules: [

    {

      test: /\.m?js$/,

      exclude: /node_modules/, //排除node——modules中的js文件（这些文件不处理）

      loader: 'babel-loader',

 } ] }

然后再根目录建立一个文件夹 babel.config.js

module.exports={

//智能预设，能够编译ES语法

presets:[@babel/present-env]

}

处理html资源

开发服务器&自动化

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化

会创建一个开发服务器，监视src下面的文件，一旦发生变化会自动的重新打包

npm i webpack-dev-server -D

在webpack.config.js的plugins:[]中加入

//开发服务器：不会输入资源，在内存中编译打包的，所以dist文件中没有任何东西

devServer：{

host:'localhost', //启动服务器域名

port:'3000', //启动服务器端口号

open:true //是否自动打开浏览器

}

启动的指令会变化，变成npx webpack serve

生产模式介绍
生产模式是开发完成代码后，我们需要得到代码将来部署上线。
这个模式下我们主要对代码进行优化，让其运行性能更好。
生产模式准备
我们分别准备两个配置文件来放不同的配置
准备一个文件夹config，放不同的配置文件，将根目录的下的webpack.config.js移入其中，将其改名为，webpack.dev.js作为开发模式下的webpack配置。
然后再创建一个webpack.prod.js作为生产模式下的webpack配置文件。

放到config目标下，的webpack配置文件中的入口文件路径是不需要修改的。因为实际运行代码还是在外面运行的，
但是，output中的绝对路径是需要修改的 path中 ../要回退一层，但是开发模式中path不需要输出，因为是在内存中编译，path可以指定为path：undefined
绝对路径都是需要回退一层目录 ../

webpack基础知识介绍的更多相关文章

nodejs+gulp+webpack基础知识
nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创阅读数 22 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...
Nginx基础知识介绍
Nginx基础知识介绍作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Nginx概述 Nginx是免费的.开源的.高性能的HTTP和正向/反向代理服务器.邮件代理服务器.以及T ...
TCP_Wrappers基础知识介绍
1． TCP_Wrappers基础知识介绍 TCP_Wrappers是在 Solaris, HP_UX以及 Linux中广泛流行的免费软件.它被设计为一个介于外来服务请求和系统服务回应的中间处理软件. ...
Swift Playgrounds for mac基础知识介绍
Swift Playgrounds是一款适用于iPad和Mac的革命性应用程序,它使Swift学习变得互动而有趣.它不需要编码知识,因此非常适合刚开始的学生.使用Swift解决难题,以掌握基本知识.S ...
WPF Step By Step -基础知识介绍
回顾上一篇我们介绍了WPF基本的知识.并且介绍了WPF与winform传统的cs桌面应用编程模式上的变化,这篇,我们将会对WPF的一些基础的知识做一个简单的介绍,关于这些基础知识更深入的应用则在后续 ...
python基础----基础知识介绍
一编程语言的划分编译型:将代码一次性全部编译成二进制,然后运行. 缺点:开发效率低,不能跨平台(windows与linux) 优点:执行效率高代表语言:c语言解释型:当程序开始运 ...
android开发学习---linux下开发环境的搭建&& android基础知识介绍
一.配置所需开发环境 1.基本环境配置 JDK 5或以上版本(仅有JRE不够) (http://www.oracle.com/technetwork/java/javase/downloads/ind ...
Linux基础知识介绍
1.Linux知识说明1)文件位置 1)/etc/inittab2)模式介绍 0:挂起模式-不推荐 1:单用户模式-只有管理员可以进入该模式,可以修改root密码,处理有登录权限而没有修改文件的权限问 ...
Webpack基础知识总结
本文将从多个方面回顾下自己了解的Webpack知识,包括常见的配置项,前端搭建的一些方法和项目实际优化方法,有错误的地方还请指出并多多包涵. 一.关于Webpack 1.概念本质上,webpack ...
ABP VNext框架基础知识介绍（1）--框架基础类继承关系
在我较早的时候,就开始研究和介绍ABP框架,ABP框架相对一些其他的框架,它整合了很多.net core的新技术和相关应用场景,虽然最早开始ABP框架是基于.net framework,后来也全部转向 ...

随机推荐

SpringBoot中yaml配置对象
转载请在页首注明作者与出处一:前言 YAML可以代替传统的xx.properties文件,但是它支持声明map,数组,list,字符串,boolean值,数值,NULL,日期,基本满足开发过程中的所 ...
jmeter+ant+jenkins+mac环境搭建
一.环境准备 1.JDK环境:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.ANT环境:http://ant ...
python自省函数getattr的用法
getattr是python里的一个内建函数 getattr()这个方法最主要的作用是实现反射机制.也就是说可以通过字符串获取方法实例.这样,你就可以把一个类可能要调用的方法放在配置文件里,在需要的时 ...
ASP.NET MVC学习之模型验证篇
一.学习前的一句话在这里要先感谢那些能够点开我随笔的博友们.慢慢的已经在博客园中度过一年半了,伊始只是将博客园作为自己学习的记录本一样使用,也不敢将自己的随笔发表到博客园首页,生怕自己的技艺不高,反 ...
数据库表 copy
db1为原数据库,db2为要导出到的数据库,fromtable 是要导出的表名 1.方法一:登录导出到的数据库,执行create table fromtable select * from db1.f ...
springsecurity源码查看网址
http://www.boyunjian.com/javasrc/org.springframework.security/spring-security-web/3.1.3.RELEASE/_/or ...
3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）
前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...
MySQL绿色版安装整套流程
https://www.cnblogs.com/LiuChunfu/p/6426918.html
Wepy在VScode中的高亮显示
小程序的wepy框架会生成后缀名为.wpy的文件,此文件用VScode打开时并不是高亮的,官方文档给我们提供了两种方案进行高亮方案一: 1. 在 Code 里先安装 Vue 的语法高亮插件 Ve ...
构建之法——Team & Scrum & MSF
第五章(团队和流程)83-99 这一章主要介绍的是团队精神那是不是说只要能组合在一起的就是组成了一个团队了?其实不然,软件团队有各种形式,适用于不同的人员和需求.适合自己的团队才能共赢! ...

webpack基础知识介绍

webpack基础知识介绍的更多相关文章

随机推荐

热门专题