webpack是什么

构建工具

初始化

pnpm init -y

生成一个package.json文件

为什么使用webpack

• 很难直观的去感受到你的某个文件依赖了哪些外部车或者其他组件
• 如果一个依赖没有加上或者说顺序故错了，整个项目可能都步起来
• 如果一个依赖已经装了但是没有用。试览器会产生额外的开销去下骤不必要的代码

打包分析

配置文件

module.exports = {mode: '',entry: {// ...},module: {rules: [// ...]},plugins: [],devServe: {},resolve: {extensions:['.ts', '.js', '.cjs', '.json'] //配置文件引入时省略后缀名},
}

entry(入口)

字符串形式

module.exports = {entry: './index.ts'
}

数组形式(多个入口)

module.exports = {entry: ['./index.ts','./a.ts']
}

对象形式

module.exports = {entry: {main: {filename: 'taget.js', //输入文件名import: './index.ts', //指定入口文件runtime: 'mainRuntime', //指定一个运行时环境,如果不存在就创建这个运行时环境// dependOn: 'mainRuntime', //指定一个运行时环境,如果不存在也不会创建这个运行时环境,不能与runtime同事存在},// 多个入口test: {filename: 'target.js', //输入文件名import: './index.ts', //指定入口文件}},output: {clean: true, //每次打包前清楚dist目录}
}

出口(output)

module.exports = {entry: {main: {filename: 'target.js', //输入文件名import: './index.ts', //指定入口文件runtime: 'mainRuntime', //指定一个运行时环境,如果不存在就创建这个运行时环境// dependOn: 'mainRuntime', //指定一个运行时环境,如果不存在也不会创建这个运行时环境,不能与runtime同事存在},//多入口test: './a.ts',},output: {clean: true, //每次打包前清除打包输出目录path: path.resolve(__dirname, 'app'), //指定输出目录名字filename: '[name].[contenthash:5].js', //指定输出文件名,name表示入口指定的文件名,不指定默认输入为入口时指定的文件名,hash表示给文件名加上一个hash}
}

深入理解devDependencies和dependencies

devDependencies(生成依赖)

dependencies(开发依赖)

loaders

我们之间在js中引入css文件是原生js所接受的吗?
答案是不可以的,我们js中引入css文件,完全是构建工具(webpack)loaders的功劳。

loaders 处理css

• 安装css-loader&style-loader

pnpm i css-loader style-loader -D

• 配置文件中处理

const path = require('path')
/**@type {import('webpack'.Configuration)} */
module.exports = {entry: './index.ts',module: {rules: [// css loader{test: /\.css$/,use: [{ loader: 'style-loader' },{loader: 'css-loader',options: {modules: true,},},// sass处理// { loader: 'sass-loader' },],},],},
}

loaders 处理less

• 安装css-loader&style-loader&less&less-loader

pnpm i less less-loader -D

• 配置文件中处理

const path = require('path')
/**@type {import('webpack'.Configuration)} */
module.exports = {entry: './index.ts',module: {rules: [// css loader{test: [/\.css$/, /\.less$/],use: [{ loader: 'style-loader' },{loader: 'css-loader',options: {modules: true,},},// less处理{ loader: 'less-loader' },],},],},
}

webpack 处理ts

• 安装typescript&ts-loader

pnpm i typescript ts-loader -D

• 配置文件中处理

const path = require('path')
/**@type {import('webpack'.Configuration)} */
module.exports = {entry: './index.ts',resolve: {extensions:['.ts', '.js', '.cjs', '.json'] //配置文件引入时省略后缀名},module: {rules: [// css loader{test:  /\.ts/,use: [// ts-loader{ loader: 'ts-loader' },],},],},
}

插件