前端的工程化和自动化
grunt gulp browserify webpack
- 当今主流
- webpack vue react angular
- 当前市面 2 个版本
- webpack 3.0
- webpack 4.0
一、webpack 基础认识
- 官网地址
- 官网: https://webpack.js.org/
- 中文: https://www.webpackjs.com/
- 前身: browserify 缺点,只能转化js
webpack作用?
- 项目管理、打包、模块管理(依赖问题)、加载资源(js/css/html/png../woff/data/vue...),转换器(loader)
- 前身:grunt/gulp/browserify->webpack->pratcle
webpack的历史
- webpack1支持CMD和AMD,同时拥有丰富的plugin和loader,webpack逐渐得到广泛应用。
- webpack2 支持ES Module,分析ESModule之间的依赖关系,webpack1必须将ES,Module转换成CommonJS模块,2支持tree sharking
- webpack3 新的特性大都围绕ES Module提出,如Scope Hoisting和Magic Comment;
前端的模块化
- AMD : require.js
- CMD : sea.js( 弃用了 )
- COMMON.js : node.js
- 环境支持: Node 8
安装 :
- 全局
- npm i webpack webpack-cli -g
- cnpm i webpack webpack-cli -g
- yarn add webpack webpack-cli global
- cli 命令行工具 打包会依赖cli
- 本地(项目目录)
- npm i webpack webpack-cli --save-dev 开发依赖
- 项目: 优先找本地 ----》 全局
概念:
webpack是一种静态编译工具(预编译)
我们主要研究: 入口文件、出口、转换器、插件
二、webpack--打包
development: 开发环境
production; 生产环境
- 二阶段项目
- 生产环境 浏览器直接运行了
- 开发环境 程序员而言, 依赖服务器环境来做
- webpack --mode development 会自动找src/index.js 到 dist/main.js
- 要求设置开发模式|生产模式
webpack 入口地址 --mode development 指定出口
webpack aa/index.js --mode development bb/index.js 自定义
- 环境分离
- development:
- a.浏览器调试工具
- b.注释、开发阶段的详细错误日志和提示
- c.快速和优化的增量构建机制
- production:
- a.开启所有的优化代码
- b.更小的main大小
- c.去除掉只在开发阶段运行的代码
- d.Scope hoisting(作用域提升)和Tree-shaking(打包的结构只包含实际用到的 exports)
- development:
三、webpack----自动解决依赖:
原理:
- Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 main.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 main.js 中的代码,其它模块会在运行 require 的时候再执行。
四、webpack - loader:
- webpack默认只支持javascript文件(默认)
- 其他文件(CSS/LEASS/..) 需要用加载器(loader)
- loader: 类似一种转化器, 它可以把一个东西,转成另一个
- 需要下载 style-loader(读取到的css文件插到页面) css-loader(读取css文件)
- 下载: npm install style-loader css-loader -D
- require('style-loader!css-loader!./xx.css')
五、配置:
webpack.config.js 是一个nodejs
- 作用: 配置一些webpack需要入口、出口、loader、Chunk代码块、Plugin扩展插件、Module模块
编写:
module.exports={
entry:'./src/index.js' 入口文件
output:{ 默认输出到dist
path:path.resolve(__dirname,'dist')//指定编译目录 不写默认指定到dist
filename:'js/boundle.js'//以编译目录为根的出口文件路径
},
module: {
rules:[
{test:'/\.css$/',use:['style-loader','css-loader']}
]
},
mode:'development' | production 区别环境
}