自学必学 webpack，在学习之前需要先配置好需要的 学习工具，首先需要安装好yarn 因为yarn下载更快 。 下载包实在太慢可以 用nrm ls (查看可选镜像) , nrm use taobao 更换taobao镜像下载，下载完成可以在切换回 npm
1.安装yarn ： 方法一：使用安装包安装 官方下载安装包，yarnpkg.com/zh-Hans/doc… 安装完毕后，一定要配置环境变量。 方法二：使用npm安装 npm i yarn -g (-i：install 简写 -g：全局安装（global）,使用 -g 或 --global)。使用npm需要先下载node.js 内置了npm。
使用流程：
1 初始化工程 yarn init -y (注意工程名不能是中文 大写 空格)
2 安装依赖包 yarn add webpack webpack-cli -D
3 配置自定义脚本 在package.json中 配置"scripts":{"build":"webpack"}
可以进行一些简单的 js文件的打包 新建src文件夹 在此文件夹下 新建main.js文件(打包入口)， 可以在src文件夹下 新建src/add/add.js - 定义求和 函数导出 用export 在main.js导入，import { 函数名 } from 'add.js文件路径' 。
在src同级目录下新建 webpack.config.js文件 导出一个配置对象 配置项：
const path = require('path') module.exports = { entry:"./src/main.js" ，//入口 output:{ path:path.join(__dirname,"dist"),//出口“文件夹名” }， filename:"bundle.js"//出口文件名 } （概念 | webpack 中文文档 (docschina.org)） 可以查看 webpack中文文档，里面也有详细配置可以直接 VC
4 终端运行 yarn build或npm run build 进行打包
5 输出在 dist/main.js webpack打包自动生成的
下面来整体了解一下用webpack打包前端项目，用yarn下的包作用在前端项目上： 1
- 初始化包环境
- 下载依赖包
- 配置自定义打包命令 2 下载jquery --- yarn add jquery
3 新建public/index.html - 前端首页
4 新建src/main.js - webpack打包入口
5 在index.html 准备一下简单的样式
6 在src/main.js引入jquery
7 在main.js中 编写一下 页面相关JS代码
8 执行打包命令 yarn build
9 把public/index.html手动复制到dist下
10 再手动引入打包后bundle.js
用webpack插件 自动生成html文件 [HtmlWebpackPlugin | webpack 中文网 (webpackjs.com)(www.webpackjs.com/plugins/htm…)
1 下载插件 yarn add html-webpack-plugin -D
2 webpack.config.js配置 const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
]}
3 重新打包后观察dist下
- 自动生成html文件
- 自动引入打包后js文件 总结: webpack就像一个人, webpack.config.js是人物属性, 给它穿什么装备它就干什么活
还可以打包css ，less，图片，字体图标，JS 降级处理 等等 操作也都大同小异 具体可以查看一下 官网文档操作步骤哦
开发服务器-配置
在内存中开启一个服务器, 每次更新打包时, 不会输出到硬盘, 只会在内存中更新, 大大缩短了打包时间
用法：
1：下载包yarn add webpack-dev-server@3.11.2 -D
2配置自定义命令serve
scripts: {
"build": "webpack",
"serve": "webpack serve"}
3运行命令-启动webpack开发服务器yarn serve 或者 npm run serve
4启动一个web服务器和端口, 在浏览器访问查看
以上是小弟拙见，总的来说Webpack 主要是用来 分析 转译 压缩（混淆） 打包代码，是一个静态模块打包工具。
