前端的工程化和自动化

前端的工程化和自动化

grunt gulp browserify webpack当今主流 webpack vue react angular
当前市面 2 个版本 webpack 3.0 webpack 4.0webpack

一、webpack 基础认识（ webpack是一种静态编译工具(预编译) 我们主要研究： 入口文件、出口、转换器、插件）

1. 官网地址：官网: https://webpack.js.org/ 中文: https://www.webpackjs.com/ 前身: browserify 缺点，只能转化js

2. webpack作用?
   2.1 ：干嘛的: 项目管理、打包、模块管理(依赖问题)、加载资源 (js/css/html/png…/woff/data/vue…),转换器(loader) 前身：grunt/gulp/browserify->webpack->pratcle
   2.2 ： . 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

3. 环境支持： Node 8

4.安装：全局 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–打包

1. development： 开发环境production
   生产环境 浏览器直接运行了
2. 开发环境 程序员而言， 依赖服务器环境来做 webpack --mode development 会自动找src/index.js 到 dist/main.js
3. 要求设置开发模式|生产模式 webpack 入口地址 --mode development 指定出口 webpack aa/index.js --mode development bb/index.js
4. 自定义 环境分离 development: a.浏览器调试工具 b.注释、开发阶段的详细错误日志和提示 c.快速和优化的增量构建机制 production: a.开启所有的优化代码 b.更小的main大小 c.去除掉只在开发阶段运行的代码 d.Scope hoisting(作用域提升)和Tree-shaking(打包的结构只包含实际用到的 exports)

三、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
1.作用: 配置一些webpack需要入口、出口、loader、Chunk代码块、Plugin扩展插件、Module模块
2. 编写： 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 区别环境 }
3. 多入口文件： entry: 入口接收string | json {app:‘index1.js’,app2:‘index2.js’} 输出要求多输出 output: { path:path.resolve(__dirname,‘dist’) //指定编译目录 publicPath:‘dist’, //指定虚拟目录 不写指向编译目录，html引入js时，必填 filename:‘bundle.js’ 单文件输出 | ‘[name].js’ 多输出 html引入app和app2 配合 } webpack 开发环境下编译(打包到bundle.js) webpack -p 生产环境下编译(打包到bundle.js,并压缩) webpack -w 监听文件改动,自动编译,不用每次运行,但不会自动刷新浏览器

webpack --前端服务器
webpack-dev-serverhttp-server / server / webpack-dev-server 第三方服务包需要自动刷新： webServer 搭建前端开发服务器 cnpm install webpack-dev-server -g | -D 参数: 命令行 webpack-dev-server --port 8088 --open --mode development 写到webpack.config.js配置文件: devServer: {//和module同级 port: 8088, open:true } 终端运行方式2: webpack-dev-server 把运行命令放到package.json文件: devServer可以不要了 “scripts”:{ “dev”: “webpack-dev-server --port 8088 --open” } 终端: npm run dev

webpack—优雅降级babel使用
ES6->ES5 tracuer babel 低版本： npm install babel-loader babel-core babel-preset-es2015 -D 高版本： npm install [email protected] @babel/core @babel/preset-env -D 做个js文件模块，测试导出引入 导出模块: export default {} 引入模块: import 名字 from 模块名 配置babel预设: module>rules> + {} { test:/.js$/, exclude:/node_modules/, 排除 use:[{ loader:‘babel-loader’, options:{ presets:[’@babel/preset-env’] } }] }

webpack — 省略引入文件名后缀
配置webpack.config.js resolve: { //与module同级 extensions: [ ‘.js’, ‘.css’, ‘.json’, ‘.jsx’] } require(’./style’)// 可以省略后缀名

webpack — 产出html
webpack webpack-dev-server webpack-cli 本地的 npm i html-webpack-plugin —save-dev const HtmlWebpackPlugin = require(‘html-webpack-plugin’) plugins:[ new HtmlWebpackPlugin({ template: ‘./index.html’, filename: ‘./index.html’,//默认到output目录 hash:true,//防止缓存,会给文件后面加入hash minify:{ removeAttributeQuotes:true//压缩 去掉引号 } }) ] publicPath: ‘/’, 指定虚拟目录为空，因为index进入到dist目录里了，不在外面了 filename: ‘js/[name].js’

css抽离（代码分离）
yarn add extract-text-webpack-plugin@next --dev npm i extract-text-webpack-plugin@next --save-dev | -D //@next 兼容webpack4 未来会不需要 const ExtractTextWebapckPlugin= require(“extract-text-webpack-plugin”) //loader配置： use: ExtractTextWebapckPlugin.extract({ use: ‘css-loader’ }) //不再需要style-loader //pulgin配置 new ExtractTextWebapckPlugin(‘css/[name][hash:6].css’)

图片打包
yarn add url-loader file-loader --devnpm I url-loader file-loader --save-dev //url-loader 存base64 file-loader存文件（woff mp3） { test:/.(png|jpg|gif)/, use:[{ loader: ‘url-loader’, options: { limit: 5000,//字节少于5000 ——》 base64 超过5000 file outputPath: ‘images/’, 5000意思存到images } }] }//css中引入 | js动态(模块化) 引入