介绍webpack
使用场景:
个人认为webpack的使用场景是在你使用框架,如vue要做一个单页面应用的项目时,各个组件(相当于各个页面)都存在css样式、js逻辑代码、UI层元素。而使用webpack可以达到将各个组件中的css、js、html打包生成对应的单个css、js、html文件
好处总结:
- 能够处理静态资源的依赖关系
- 能够优化项目代码,比如:压缩合并文件,把图片转为base64编码格式
- 能够把高级的语法转为低级的语法
- webpack 能够转换一些模板文件如:’.vue’文件
首先创建项目
npm init
(生成package.json文件,记录了项目的基本信息)- 常用npm命令:
- npm install vue –save 或 -S 安装到项目本地的生产依赖
- npm install vue –save-dev 或 -D 安装开发依赖
- npm install vue –Save-D (错误的~~这只能默认装到生产依赖)
安装webpack
npm install webpack --save-dev
既要在项目本地安装,- 全局也要安装目的是在全局使用webpack命令
npm i webpack -g
- 如果不全局安装webpack那么在使用webpack命令时就要将webpack在node_module中的全部路径在命令行中加上,如:./node_modules/webpack
配置webpack
- 新建webpack.config.js配置文件
- dos命令新建 type nul>webpack.config.js
- 创建完配置文件,在配置文件中导入‘path’模块
- 再在module.exports中配置打包的入口及出口,
- 最后打包:在控制台输入 webpack –config webpack.config.js 生成bundle.js即表示成功
- 基于每次打包都要输入上步过于繁琐的命令,所以可直接在webpack.config.js文件中配置 ‘打包指令’
1 | // webpack.config.js 文件基本配置 |
webpack 中的 Loader 的作用是什么?
1 | 1. 实现对不同格式的文件的处理,比如说将 scss 转换为 css,或者 typescript 转化为 js |