1.开发模式

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

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

处理CSS资源

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

首先,你需要先安装 css-loadernpm 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-pluginnpm 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基础知识介绍的更多相关文章

  1. nodejs+gulp+webpack基础知识

    nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...

  2. Nginx基础知识介绍

    Nginx基础知识介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Nginx概述 Nginx是免费的.开源的.高性能的HTTP和正向/反向代理服务器.邮件代理服务器.以及T ...

  3. TCP_Wrappers基础知识介绍

    1. TCP_Wrappers基础知识介绍 TCP_Wrappers是在 Solaris, HP_UX以及 Linux中广泛流行的免费软件.它被设计为一个介于外来服务请求和系统服务回应的中间处理软件. ...

  4. Swift Playgrounds for mac基础知识介绍

    Swift Playgrounds是一款适用于iPad和Mac的革命性应用程序,它使Swift学习变得互动而有趣.它不需要编码知识,因此非常适合刚开始的学生.使用Swift解决难题,以掌握基本知识.S ...

  5. WPF Step By Step -基础知识介绍

    回顾 上一篇我们介绍了WPF基本的知识.并且介绍了WPF与winform传统的cs桌面应用编程模式上的变化,这篇,我们将会对WPF的一些基础的知识做一个简单的介绍,关于这些基础知识更深入的应用则在后续 ...

  6. python基础----基础知识介绍

    一  编程语言的划分       编译型:将代码一次性全部编译成二进制,然后运行. 缺点:开发效率低,不能跨平台(windows与linux) 优点:执行效率高 代表语言:c语言 解释型:当程序开始运 ...

  7. android开发学习---linux下开发环境的搭建&& android基础知识介绍

    一.配置所需开发环境 1.基本环境配置 JDK 5或以上版本(仅有JRE不够) (http://www.oracle.com/technetwork/java/javase/downloads/ind ...

  8. Linux基础知识介绍

    1.Linux知识说明1)文件位置 1)/etc/inittab2)模式介绍 0:挂起模式-不推荐 1:单用户模式-只有管理员可以进入该模式,可以修改root密码,处理有登录权限而没有修改文件的权限问 ...

  9. Webpack基础知识总结

    本文将从多个方面回顾下自己了解的Webpack知识,包括常见的配置项,前端搭建的一些方法和项目实际优化方法,有错误的地方还请指出并多多包涵. 一.关于Webpack 1.概念 本质上,webpack ...

  10. ABP VNext框架基础知识介绍(1)--框架基础类继承关系

    在我较早的时候,就开始研究和介绍ABP框架,ABP框架相对一些其他的框架,它整合了很多.net core的新技术和相关应用场景,虽然最早开始ABP框架是基于.net framework,后来也全部转向 ...

随机推荐

  1. SpringBoot中yaml配置对象

    转载请在页首注明作者与出处 一:前言 YAML可以代替传统的xx.properties文件,但是它支持声明map,数组,list,字符串,boolean值,数值,NULL,日期,基本满足开发过程中的所 ...

  2. jmeter+ant+jenkins+mac环境搭建

    一.环境准备 1.JDK环境:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.ANT环境:http://ant ...

  3. python自省函数getattr的用法

    getattr是python里的一个内建函数 getattr()这个方法最主要的作用是实现反射机制.也就是说可以通过字符串获取方法实例.这样,你就可以把一个类可能要调用的方法放在配置文件里,在需要的时 ...

  4. ASP.NET MVC学习之模型验证篇

    一.学习前的一句话 在这里要先感谢那些能够点开我随笔的博友们.慢慢的已经在博客园中度过一年半了,伊始只是将博客园作为自己学习的记录本一样使用,也不敢将自己的随笔发表到博客园首页,生怕自己的技艺不高,反 ...

  5. 数据库表 copy

    db1为原数据库,db2为要导出到的数据库,fromtable 是要导出的表名 1.方法一:登录导出到的数据库,执行create table fromtable select * from db1.f ...

  6. springsecurity源码查看网址

    http://www.boyunjian.com/javasrc/org.springframework.security/spring-security-web/3.1.3.RELEASE/_/or ...

  7. 3d轮播图(另一种方式,可以实现的功能更为强大也更为灵活,简单一句话,比酷狗优酷的炫)

    前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...

  8. MySQL绿色版安装整套流程

    https://www.cnblogs.com/LiuChunfu/p/6426918.html

  9. Wepy在VScode中的高亮显示

    小程序的wepy框架会生成后缀名为.wpy的文件,此文件用VScode打开时并不是高亮的,官方文档给我们提供了两种方案进行高亮 方案一:   1. 在 Code 里先安装 Vue 的语法高亮插件 Ve ...

  10. 构建之法——Team & Scrum & MSF

        第五章(团队和流程)83-99  这一章主要介绍的是团队精神 那是不是说只要能组合在一起的就是组成了一个团队了?其实不然,软件团队有各种形式,适用于不同的人员和需求.适合自己的团队才能共赢! ...