2020-4-21 前端达人
文章目录
0.官方文档：
1.webpack概述：
2.webpack的基本使用：
3.在项目中安装和配置 webpack：
4.配置自定义打包的自定义入口和出口：
4.配置自动打包功能：
5.配置生成预览页面功能：
6.配置自动打包相关参数：
7.webpack 中的加载器：
8.loader加载器的基本使用：
9.Vue单文件组件：
10.webpack 打包发布：
11.以上所有配置 webpack.config.js 截图
1.webpack概述：
webpack是一个流行的前端项目构建工具(打包工具) ,可以解决当前web开发中所面临的困境
webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能,从而让程序员把工作的重心放到具体的功能实现上,提高了开发效率和项目的可维护性
2.webpack的基本使用：
2.1：打开终端运行命令 npm init -y 初始化包管理配置文件 package.json
2.2：新建 src 源文件目录（里面放程序员自己写的代码比如 html css js images …）
2.3：如果需要引入 jquery 库 终端运行以下命令npm install jquery -S 安装 jquery
自己在src文件夹中创建 index.js 引入下载的jquery包import $ from 'jquery'
3.在项目中安装和配置 webpack：
3.1：终端运行 npm install webpack-cli -D 命令，安装webpack相关的包
这里要注意一个问题 : package.json 和 package-lock.json 文件里的名字默认为 “name”=“webpack”,在配置 webpack-cli 之前要把name 改成 其他名字 比如 “name”=“webpack_” 不然的话为出现无法安装的问题
具体可点击这里 Webpack依赖包安装问题解决方案
3.2：在项目根目录中 ，创建名为 webpack.config.js 的 webpack 配置文件
3.3：在 webpack.config.js 中，初始化一下基本配置
建议选择 development （打包速度快，体积大），项目上线是才改成 production (如果选择production会进行代码的压缩和混淆，打包速度慢，体积小)
3.4：在package.json中的 script节点 新增一个dev脚本 值为 webpack ，就可以实现打包功能
在终端运行命令：npm run dev 就可以打包 默认打包成main.js在 dist文件夹中
在src自己新建的index.html 中引入打包后的 js