手记

webpack,不可告人的历史?到底是规范的沦丧还是代码的扭曲？ (上)

侠客岛的含笑
2018-09-14 22:41:04浏览 4062

为什么前端会出现”构建“？

开局一条鲲

JS模块化的魔法家族 AMD/CMD/UMD/ES6

CSS模块化的魔法家族

  • OOCSS 面向对象CSS
    • 结构和设计分离，容器和内容分离
    • 在不同地方使用公共的css类
  • SMACSS 可扩展，模块化结构
    • 减少代码量，易维护
  • Atomic css
    • 视觉功能小，单用途的css
  • MCSS 多层
  • AMCSS 属性编码CSS
  • BEM

请用一句话形容webpack

  • 一切皆模块
  • 急速调试响应速度
  • 优化应该自动完成

  • 提取不同Chunk之间相同的代码的
  • 混淆压缩代码
  • CSS提取出成为单独文件
  • 生成html
  • 热更新
  • 拷贝第三方文件

入门

webpack -h
webpack-v
webpack <entry>[<entry>]<output>

编译ES6

Npm I babel-loader babel-core --save-dev
Generator,Set,Map,Array.from,Array.prototype.includes

Npm install @babel/preset-env --save-dev (最新版)

全局垫片(为应用准备)
Npm install babel-polyfill --save
Import "babel-polyfill"

局部垫片（为开发框架准备）
不会污染全局
Npm install babel-plugin-transform-runtime --save-dev
Npm install babel-runtime --save
然后在.babelrc设置相关配置
babel presets
  • es2015
  • es2016
  • es2017
  • env
  • babel-preset-react
  • babel-preset-stage 0-3
  • targets
  • targets.browsers
  • targets.browsers:“last 2 versions”
  • targets.browsers:">1%"
  • browserslist
  • Can I use
  • Babel Polyfill (全局垫片，为应用准备)这两个插件可以支持浏览器不支持的函数和方法
  • npm i babel-polyfill -save
  • Babel Runtime Transform(局部垫片，为开发框架准备，可以复用代码)
  • 然后import 就可以使用了
  • npm install babel-plugin-transform-runtime-save-dev
  • npm install babel-runtime-save
  • 然后在.babelrc设置相关配置
    • 浏览器不支持的方法和函数
    • Generator
    • Set
    • Map
    • Array.from
    • Array.prototype.includes


编译 typescripts（JS超集）

Npm i typescript ts-loader --save-dev 官方
Npm i typescript awesome-typescript-loader --save-dev 三方
声明文件
npm i @types/lodash
npm i @types/vue
或者
npm i typings
typings i lodash
配置
tsconfig.json
常用选项
compilerOptions
include
exclude
配置文件
webpack.config.js
声明文件 (编译及时报错)
Npm I @types/lodash 或者 
npm install typings typings install lodash
不过我们需要再ts文件中添加typeRoots

提取公共代码

  • 减少代码冗余
  • 提高加载速度
webpack.optimize.CommonsChunkPlugin
{
plugins:[
	new webpack.optimize.CommonsChunkPlugin(option)
	]
}
其中的option是
options.name or options.names 表示chunk名称	 
options.filename 公用代码文件名
options.minChunks 可以是数字（出现次数），函数（自定义逻辑），特殊值（不会打包任何模块）
options.chunks （提取代码范围）
options.children 
options.deepChildren
options.async （创建一个异步的公共代码流）

设置单个entry无法提取公共代码


代码分割 和 懒分割 （）

第二种方式： ES 2015 Loader Spec 动态import

System.import()->import)
import()->Promise
importO.then()
通过注释的方法设置
import(
/*webpackChunkName:async-chunk-name */
/*webpackMode:lazy*/
modulename
  • 分离业务代码和第三方依赖
  • 分离业务代码和业务公共代码和第三方依赖
  • 分离首次加载和访问后加载的代码

处理CSs

  • style-loader 创建标签
    • style-loader/url 不推荐使用
    • style-loader/useable
  • css-loader 如何让js import css


style-loader/useable

options
  • insertAt(插入位置）
  • insertinto（插入到dom)
  • singleton（是否只使用一个style标签）
  • transform(转化，浏览器环境下，插入页面前执行）

Post CSS

放在css-loader之后，预处理语言之前
PostCSS
打包时期

  • 安装
  • postcss
  • postcss-loader
  • Autoprefixer
  • postcss-cssnano
  • postcss-cssnext

A tool for transforming CSS with JavaScript
Autoprefixer

CSS-nano
压缩

CSS-next
Use tomorrow’s CSS syntax,today.

新语法
CSS Variables
custom selectors
calc（)

浏览器要求

Broswerslist

所有插件都共用
package.json
.browserslistrc

postcss-import （使用方法：略）
postcss-url
postcss-assets

css-loader

  • options
  • alias(解析的别名）
  • importLoader(@import)
  • Minimize（是否压缩）
  • modules(启用css-modules)
  • css-modules
  • :local 局部样式
  • :global 全局样式
  • compose 继承样式
  • compose … from path 从文件引入样式
  • localldentName:‘[path][name]_[local]--[hash:base64:5]' 定义文件命名

配置Less/Sass

npm install less-loader less--save-dev
npm install sass-loader node-sass--save-dev

提取CSS

  • extract-loader
  • ExtractTextWebpackPlugin

CSS Tree Shaking

  • 常规优化
  • 引入第三方库的某个功能
Webpack.optimize.uglifyJS
plugins: [
	new webpack.optimize.UgLifyJsPlLugin)
]
  • 有些功能比较新，有Bug，记得去github问答区看看
  • Not working
  • lodash-es Not working
  • Babel-plugin-lodash working

CSS Tree Shaking

Purify CSS
https://github.com/purifycss/purifycss
purifycss-webpack

options
paths:glob.sync([])
npm i glob-all --save-dev

Webpack 小三：Vue-cli

npm install vue-cli-g
vue--help
vue list
模板
vue templates
simple
webpack
webpack-simple
browserify
browserify-simple
创建模板
vue init <template name><project name>
vue init <git repo><project name>
打包并分析代码
npm run build --report

面试官：请手写一段你常用的webpack的配置项

  • 概念
  • 配置
  • 开发
  • 优化

概念问题一：什么是webpack和grunt和gulp有什么不同?

答案：Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。他和其他的工具最大的不同在于他支持 code-splitting、模块化（AMD，ESM，CommonJs)、全局分析

概念问题二：什么是bundle，什么是chunk，什么是module?

答案：bundle是由webpack 打包出来的文件，chunk是指webpack 在进行模块的依赖分析的时候，代码分割出来的代码块。module是开发中的单个模块。

概念问题三：什么是Loader?什么是Plugin?

答案：Loaders 是用来告诉 webpack如何转化处理某一类型的文件，并且引入到打包出的文件中。Plugin 是用来自定义webpack打包过程的方式，一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack 打包的各个流程（生命周期）。

配置问题：如何可以自动生成webpack配置？

答案：webpack-cli/vue-cli/et…脚手架工具

开发问题一：webpack-dev-server 和http 服务器如nginx有什么区别？

答案：webpack-dev-server 使用内存来存储webpack 开发环境下的打包文件，并且可以使用模块热更新，他比传统的http 服务对开发更加简单高效。

开发问题二：什么是模块热更新？

websocket回调
答案：模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。

优化问题一：什么是长缓存？在webpack中如何做到长缓存优化？

答案：浏览器在用户访问页面的时候，为了加快加载速度，会对用
户访问的静态资源进行存储，但是每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。在webpack中可以在output给输出的文件指定chunkhash，并且分离经常更新的代码和框架代码。通过NamedModulesPlugin 或是HashedModuleldsPlugin 使再次打包文件名不变。

优化问题二：什么是Tree-shaking ?CSS可以Tree-shaking吗？

答案：Tree-shaking 是指在打包中去除那些引入了，但是在代码中
没有被用到的那些死代码。在webpack中Tree-shaking 是通过uglifyJSPlugin 来Tree-shaking JS。CSS 需要使用Purify-CSS

相关标签
Html/CSS
Html5
CSS3
0人推荐
随时随地看视频
慕课网APP

相关阅读

Sublime Text3安装Emmet时PvY8一直loading的问题解决
原来你是这样的导航条--一个不规则导航条的实现思路
CSS前端基础应用实践～
webpack,不可告人的历史?到底是规范的沦丧还是代码的扭曲？ (上)
webpack4基础入门