webpack的使用步骤

1.下载和使用yarn

1.先用npm i yarn -g安装包

2.初始化仓库yarn init

3.安装一些需要的配置 yarn add webpack webpack-cli -D

4.在package.json的文件中加入

"scripts": {

"bulid": "webpack"

},

5.（1）新建目录src，（2）新建src/add/add.js - 定义求和函数导出export const addFn = (a, b) => a + b（3）新建src/index.js导入使用import {addFn} from './add/add' console.log(addFn(10, 20));

6.运行打包命令（yarn build ）

2._webpack 更新打包

1.新建src/tool/tool.js - 定义导出数组求和方法export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)

2.src/index.js - 导入使用

import {addFn} from './add/add'

import {getArrSum} from './tool/tool'

console.log(addFn(10, 20));console.log(getArrSum([1, 2, 3]));

3.重新打包

yarn build

3.webpack的配置

1.webpack-入口和出口

默认入口: ./src/index.js，默认出口: ./dist/main.js

webpack配置 - webpack.config.js(默认)

1. 新建src并列处, webpack.config.js

2. 填入配置项

3. 修改package.json, 自定义打包命令 - 让webpack使用配置文件

4. 打包观察效果

4.插件-自动生成html文件

1.下载插件yarn add html-webpack-plugin -D

2.webpack.config.js配置

3.重新打包后观察dist下是否多出html并运行看效果

5.加载器 - 处理css文件问题

目标: 自己准备css文件, 引入到webpack入口, 测试webpack是否能打包css文件

1.新建 - src/css/index.css

2.编写去除li圆点样式代码

3.(重要) 一定要引入到入口才会被webpack打包

4.执行打包命令观察效果

6.加载器 - 处理css文件

目标: loaders加载器, 可让webpack处理其他类型的文件, 打包到js中

原因: webpack默认只认识 js 文件和 json文件