课堂笔记

什么是webpack

webpack本质上是一种前端资源「编译」、「打包」工具。 webpack本身默认只对「JavaScript」文件进行处理，其他类型的文件需要配置「loader」或者l plugins」进行处理; webpack将多种静态资源js、css、less转换成「一个静态文件」，减少了页面的请求。多份资源文件打包成一个Bundle 。支持Babel、 Eslint、 Ts、coffeScript、 Less. Sass 。支持模块化处理css、图片等资源。支持HMR +开发服务器。支持持续监听、持续构建。支持代码分离。支持Tree-shaking

Webpack的用法

运用流程

安装Webpack
编辑配置文件
执行编译命令:

// webpack.config.js
module.exports = {
entry: './src/index.js '，output: {
filename: "[name].js ",
path: path.join(__dirname, " ./ dist " )，}，
module: {rules: [{
test: /\.less $/i，
use: [ 'style-loader ' , 'css-loader ' , 'less-loader']}]，
}
}

会在根目录的dist文件夹下得到编译出的打包文件main.js

核心流程:入口处理、依赖解析、资源解析、资源合并打包

3、webpack使用方法

关于Webpack的使用方法，基本都围绕配置展开，而这些配置大致可划分为两类:

流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
工具类:主流程之外，提供更多工程化能力的配置项流程类配置

QQ截图20220823231311.png

使用示例

1、声明入口entry

module.exports = {entry: "./src/index"};

2、声明产物出口output

const path = require(" path " );module.exports = {
entry: "./src/index"，output: {
filename : "[name].js "，
path: path.join(__dirname, "./ dist " ) ,)
};

3、运行npx webpack

loader webpack可以处理js代码，并且webpack会自动处理js之间相关的依赖; 但是，在开发中不仅仅只有基本的js代码需要被处理，也需要加载「css」. 「img」、也包括将一些高级的ES6的转化成ES5、将ts转化成es5，将scss、less转化成css、将.jsx，.vue转化成js文件; 对于webpack本身的能力来说，这些转化是不支持的; 解决:给webpa ck扩展对应的loader

通过npm安装所需要的使用的loader
添加module处理

const path = require("path");
module.exports = {
  entry: "./src/index",
  output: {
    filename : "[name].js",
    path: path.join(__dirname, "./dist")，
  },
  module: {
// css处理器
  rules: [{
    test: /\.css/i,
    use: [
      "style-loader",
      "css-loader"
      ],
  }],
},
};

Tree-Shaking

Tree-shaking的本质是「消除无用的js代码」。无用代码消除在广泛存在于传统的编程语言编译器中，编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这个称之为「DCE (deadcode elimination) l 在webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过Tree-Shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。开启Tree-shaking:

module.exports = {
entry: "./src/ index",
mode: "production " ,
devtool: false,
optimization: {usedExports: true,
},

webpack知识体系基础│青训营笔记