Webpack:知识点总结以及遇到问题的处理办法 - 蓝蓝设计_UI设计公司

帝皇彩票官网

Webpack:知识点总结以及遇到问题的处理办法

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




Powered by sitemap
帝皇彩票平台 迪士尼彩乐园 上海11选5 帝皇彩票 帝皇彩票登陆 迪士尼彩乐园主页 大象彩票APP 桔子彩票注册 状元彩票开奖 帝皇彩票官网