这是我参与「第五届青训营」笔记创作活动的第13天

Webpack知识体系

webpack本质上是前端一种资源编译，打包工具

wbepack使用方法

安装依赖 npm i -D webpack webpack-cli
编辑配置文件 module.exports = { entry:"main.js", output: { filename:"[name].js", path: path.join(__dirname,"./dist"), }, module { rules:[{ test:/.lest$/i, use:['style-loader',"css-loader","less-loader"]}] } }
执行编译命令 npx-webpack

核心流程

入口处理-从'entry'文件开始，启动编译流程
依赖解析-从'entry'文件开始，根据require或者import等语句找到依赖资源
资源解析-根据"module"配置，调用资源转移器，将png,css等非标准JS资源转译为JS内容
资源合并打包-将转译后的资源直接导报成可以直接读取的JS资源

第二三步是递归处理所有资源完毕

webpack最终要求就是写配置文件

使用频率高

entry/output
module/plugins
mode
watch/devServer/devtool

CSS安装

npm add -D css-loader style-loader
添加module处理CSS文件

安装babel

npm i -D @babel/core @babel/preset-env babel-loader
声明产物出口 output
执行 npx webpack

课上问题

loader作用

针对不同类型的导报我呢见提供的打包方案

为什么要引用css-style,style-loader

因为webpack运行在nodejs环境之中，默认只是支持js打包，所以在处理时候要使用css-loader,style-loader对css文件进行打包处理。CSS-loader导出的是一个数组，页面无法直接使用，而对于style-loader来讲，它处理的是通过js在页面之中创建标签，并且里面包含css样式，不能单独使用，不处理之前css-loader处理的样式资源。

在页面之中如何接入less-loader,sass-loader

安装less-loader和less npm install less-loader less --save-dev
配置loader { test:/.less$/,use:["less-loader"]}
安装sass-loader和node-sass npm install sass-loader node-sass --save-dev -配置loader {test:/.sass$/,use:["sass-loader"]}

babel有什么具体作用

Babel是将ES6及以上版本的代码转换为ES5的工具。
它用 babel.config.js 或 .babelrc 文件作为配置文件，其中最为重要的配置参数是presets和plugins。
plugins：Babel插件可以将输入源码进行转换，输出编译后的代码。
presets：一组Babel插件，目的是方便使用。官方已经内置了一些preset，如babel-preset-env

babel与webpack分别解决了什么问题，为什么他们能一起使用

webpack

webpack自身：只打包js文件 webpack的loader和plugin： babel-loader：解析es6为js css-loader：解析css文件 style-loader：将解析后的css放到style标签中放到js中 file-loader：解析图片和字体；/.(png|jpg|svg|gif) $/，/.(woff|woff2|ttf|otf|eot)$ / extract-text-webpack-plugin：将css从js中拆分出来，单独打包为css文件 html-webpack-plugin：以某个用户自定义的html为模板，自动生成html；并把打包后的js、css、img等引入该生成后的html babel

Babel 是一个 JavaScript 编译器

@babel/cli：命令行转码工具 @babel/preset-env：转码规则 @babel/core：转换JavaScript句法（syntax），一部分API @babel/polyfill：转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）。 babel-loader：webpack解析babel的loader

npx wbepack

没有webpack,帮你安装一个webpack

webpack工具线

webpack--treeing

代码没有被用到
代码只读不写
代码的执行结果没有被用到 webpack-treeing会将被定义了但是没有被使用的代码不加入模块打包
mode设置成production
optimization: {useExports: true}

loader

将非JS资源转化成JS资源

plugins

我们只需要写最核心的部分，其他全部交给插件

webpack | 青训营笔记