值得一学的webpack4
初识webpack
webpack是帮助我们管理复杂项目的工具。
学习webpack会极大扩充前端开发视野。
webpack可以实现:
Tree shaking
懒加载
代码分割
webpack4速度更快,大型项目甚至可以节约90%构建时间。
内置了更多的默认配置,变更了许多API。
Loader
HMR
Create React App
Caching
Plugin
SourceMap
Vue cli 3.0
Shimming
WebpackDevServer
TreeShaking
CodeSplitting
babel
React
Library
Eslint
PWA
Vue
Mode
性能优化
多页应用
原理
PreLoading
PreFetching
环境变量
TypeScript
在项目内安装webpack
npm init -y:自动生成默认配置项package.json,不用一步一步选择
不推荐在全局安装,因为可能出现两个项目用的webpack版本不一样的情况
安装:npm install webpack webpack-cli -D(或者 --save-dev)
查看版本号:npx webpack -v :npx会帮你在当前项目的node_modules里找webpack
查看webpack所有历史版本:npm info webpack
指定版本号安装:npm install webpack@4.25.1 webpack-cli -D
打包项目:npx webpack index.js
如果后续创建了webpack.config.js配置文件之后,就可以直接运行npx webpack了。
在当前项目目录下创建:webpack.config.js:配置文件
用commonJS语法,module.exports导出,
下面的entry是简写,实际上是:
entry: {
main: './index.js'
}
// 引入node的核心模块
const path = require('path')
module.exports = {
// 入口文件,从index.js打包
entry: './index.js',
// 打包生成的文件放到dist文件夹下,__dirname是webpack.config.js所在的当前目录路径
output: {
// filename指定生成的文件名
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
}
}
// 使用npx webpack --config config1.js可以修改默认关联的配置文件由webpack.config.js变成config1.js,以config1.js为配置文件进行打包
// 在package.json中可以修改"script"标签后的配置,比如"bundle":"webpack",这样在命令行输入npm run bundle也可以将项目进行打包打包输出的内容:
npm run bundle之后,终端命令行里会显示几行信息表示打包成功,Chunks是打包的id,Chunk Names就是entry下面的main。
如果没有设置mode: 'production',命令行会提示警告,在entry之前加上mode的配置就不会再提示警告了,如果不想打包出来的文件压缩,可以把'production'改成'development'。'production'是默认压缩打包之后的文件的。
webpack核心概念
loader: webpack不能识别非js后缀结尾的模块,就需要通过loader让webpack识别出来,在配置文件中增添module配置项,使用'file-loader'(需要npm install file-loader)
webpack进阶
webpack实战配置案例
webpack底层原理及脚手架工具分析
最新文章
- C#中考虑为大对象使用弱引用
- C#时间转整型(时间戳),模仿php strtotime函数的部分功能
- Python正则表达式学习摘要及资料
- [NOIP2011] 提高组 洛谷P1003 铺地毯
- Python学习笔记--XML的应用
- 锋利的jQuery第2版学习笔记8~11章
- AspectJ 出现错误::0 can't find referenced pointcut 的解决之道
- PHP 做 RSA 签名 生成订单(支付宝例子)
- SQL Server--导入和导出向导
- 【Vue】详解Vue生命周期
- 深入java虚拟机学习 -- 类的加载机制(三)
- iOS9中关于地址簿ABAddressBookXXX之类方法被废弃的解决
- [FromBody]与[FromForm]区别
- [AI开发]视频多目标跟踪高级版(离自动驾驶又‘近’了一点点)
- 02-Django框架介绍
- linux ps top 命令 VSZ,RSS,TTY,STAT, VIRT,RES,SHR,DATA的含义
- css 制作翻页布局
- 牛客网 Python 编程输入规范
- Vue-Router 学习笔记
- mmm和mmma的区别