webpack的使用详解 |
您所在的位置：网站首页 › webpack使用 › webpack的使用详解 |
webpack的使用详解
|
Webpack
webpack 官网
bundle [ˈbʌndl] 捆绑，收集，归拢，把…塞入
概述
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler) webpack 是一个模块化方案（预编译） webpack 获取具有依赖关系的模块，并生成表示这些模块的静态资源 四个核心概念：入口(entry)、输出(output)、加载器loader、插件(plugins) 模块化方案: webpack 和 requirejs webpack 预编译 (在开发阶段通过webpack进行模块化处理, 最终项目上线, 就不在依赖于 webpack) requirejs 线上的编译( 代码运行是需要依赖与 requirejs 的 ) webpack起源 webpack解决了现存模块打包器的两个痛点： 1 Code Spliting - 代码分离 2 静态资源的模块化处理方案 webpack 的目标 1 分离依赖树到chunks（块，文件），实现按需加载 2 保证初始化加载时间更短 3 每一个静态资源能够被当作一个模块处理 4 能够整合第三方包使其成为模块 5 能够定制模块打包的每一部分（环节） 6 适合大型项目 webpack与模块前端模块系统的演进 在webpack看来：所有的静态资源都是模块 webpack 模块能够识别以下等形式的模块之间的依赖： JS的模块化规范： ES2015 import export CommonJS require() module.exports AMD define 和 require非JS等静态资源： css/sass/less 文件中的 @import 图片连接，比如：样式 url(...) 或 HTML1 开启服务器 2 监视文件的变化，重新编译打包，自动刷新浏览器 3 将输出的文件存储在内存中，提高编译和加载速度，效率更高 注意：webpack输出的文件被放到项目根目录中 webpack output is served from / 在index.html页面中需要通过 /bundle.js 来引入文件 配置说明 - CLI配置配置webpack-dev-server:启动服务器方式一： --contentBase ：主页面目录 --contentBase ./：当前工作目录 --contentBase ./src：webpack-dev-server 启动的服务器，我们在浏览器中打开的时候会自动展示 ./src 中的 index.html 文件 --open ：自动打开浏览器 --port ：端口号 --hot ：热更新，只加载修改的文件(按需加载修改的内容)，而非全部加载 /* package.json */ /* 运行命令：npm run dev */ { "scripts": { "dev": "webpack-dev-server --contentBase ./src --open --port 8888 --hot" } } 配置说明 - webpack.config.js配置webpack-dev-server:启动服务器方式二： /undefined bug const path=require('path') const webpack = require('webpack') devServer: { // 服务器的根目录 Tell the server where to serve content from // https://webpack.js.org/configuration/dev-server/#devserver-contentbase contentBase: path.join(__dirname, './'), // 自动打开浏览器 open: true, // 端口号 port: 8888, // --------------- 1 热更新 ----------------- hot: true, // 解决打开页面出现 /undefined bug //openPage: '' }, plugins: [ // ---------------- 2 启用热更新插件 ---------------- new webpack.HotModuleReplacementPlugin() ] html-webpack-plugin 插件 安装：npm i -D html-webpack-plugin 作用：根据模板，自动生成html页面 优势：页面存储在内存中，自动引入bundle.js、css等文件 /* webpack.config.js */ const htmlWebpackPlugin = require('html-webpack-plugin') // ... plugins: [ new htmlWebpackPlugin({ // 模板页面路径 template: path.join(__dirname, './index.html'), // 在内存中生成页面路径，默认值为：index.html filename: 'index.html' }) ] VUE 第五天 webpack Loaders（加载器） webpack - Loaders webpack - 管理资源示例webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. webpack只能处理JavaScript资源 webpack通过loaders处理非JavaScript静态资源 CSS打包 1 CSS打包文件（加载） 2 SASS打包文件（编译为CSS） 使用webpack打包CSS 安装：npm i -D style-loader css-loader 注意：use中模块的顺序不能颠倒，加载顺序：从右向左加载 /* index.js */ // 导入 css 文件 import './css/app.css' /* webpack.config.js */ // 配置各种资源文件的loader加载器 module:{ // 配置匹配规则 rules:[ // test 用来配置匹配文件规则（正则） // use 是一个数组，按照从后往前的顺序执行加载 {test: /\.css$/, use: ['style-loader', 'css-loader']}, ] } 使用webpack打包sass文件 安装：npm i -D sass-loader node-sass 注意：sass-loader 依赖于 node-sass 模块 /* webpack.config.js */ // 参考：https://webpack.js.org/loaders/sass-loader/#examples // "style-loader" ：creates style nodes from JS strings 创建style标签 // "css-loader" ：translates CSS into CommonJS 将css转化为CommonJS代码 // "sass-loader" ：compiles Sass to CSS 将Sass编译为css module:{ rules:[ {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}, ] } 图片和字体打包安装：npm i -D url-loader file-loader file-loader：加载并重命名文件（图片、字体 等） url-loader：将图片或字体转化为base64编码格式的字符串，嵌入到样式文件中; 如果配置的了最大文件大小，超过这个限制，就会使用file-loader去转化，说明url-loader中包含了file-loader; /* webpack.config.js */ module:{ rules:[ // 打包 图片文件 { test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader' }, // 打包 字体文件 { test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' } ] } 图片打包注意点 1 默认将图片转为base64编码格式 2 limit参数的作用： 限制图片的文件大小，单位为：字节(byte) 文件重命名为哈希值，保证文件不会重复。例如：一张图片拷贝一个副本，这两个图片实际是同一个,同样的图片不会加载多次，即是文件名不一样也可以。 3 规则： 当图片文件大小（字节）小于指定的limit时，图片被转化为base64编码格式 当图片文件大小（字节）大于等于指定的limit时，图片被重命名，不使用base64编码，此时，需要file-loader来加载图片 /* webpack.config.js */ module: { rules: [ // {test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=100'}, { test: /\.(jpg|png|gif|jpeg)$/, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] } ] } 字体文件打包说明 1 可以使用 url-loader 或者 file-loader 2 url-loader 会将字体文件解析为 base64编码格式的字符串，嵌入到CSS样式中 3 file-loader 以文件形式加载字体文件 ES6语法 - class关键字 ES6以前，JS是没有class概念的，而是通过构造函数+原型的方式来实现的 注意：ES6中的class仅仅是一个语法糖，并不是真正的类，与Java等服务端语言中的类是有区别的 ES6 - 文档 class Person { // 静态属性 static testName = '静态属性' static age = 20 constructor() { // 实例属性 this.isLoading = true } } console.log(Person.testName) 静态属性和实例属性 静态属性：直接通过类名就可以访问到，不需要创建类的实例就能访问 实例属性：必须先创建类的实例对象，然后，通过实例对象访问 说明：由于webpack不识别static关键字，需要借助于babel-loader来处理ES6语法 在webpack中配置babel-loader babel全家桶 安装：npm i -D babel-core babel-loader babel-plugin-transform-runtime 安装：npm i -D babel-preset-es2015 babel-preset-stage-0 安装：npm i -S babel-runtime 注意：stage-0 依赖于 es2015 ES6 -> ES7 过程中要经历：4个阶段（0-3），并且 stage-* 的语法比ES6更新 基本使用（两步） 第一步： /* webpack.config.js */ module: { rules: [ // exclude 排除，不需要编译的目录，提高编译速度 {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/} ] } 第二步：在项目根目录中新建.babelrc配置文件 /* .babelrc */ // 将来babel-loader运行的时候，会检查这个配置文件，并读取相关的语法和插件配置 { "presets": ["es2015", "stage-0"], "plugins": ["transform-runtime"] } babel的说明 babel-core 把 js 代码分析成 ast (抽象语法树, 是源代码的抽象语法结构的树状表现形式)，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，再通过`语法转换器`分析其语法后转为低版本 js。 Bable AST： http://www.zcfy.cc/article/347 代码转AST： https://astexplorer.net/ babel原理： https://zhuanlan.zhihu.com/p/27289600 babel-preset-*Babel通过语法转换器，能够支持最新版本的JavaScript语法 作用：将浏览器无法识别的新语法转化为ES5代码 ES6语法提案的批准流程 ES2015 也就是 ES6, 下一个要发布的ES7, 从 ES6 到 ES7之间经历了 5 个阶段 一般进入到 stage 4 就可以认为是下一个版本的语法了! Stage 0 - Strawman（展示阶段） Stage 1 - Proposal（征求意见阶段） Stage 2 - Draft（草案阶段） Stage 3 - Candidate（候选人阶段） Stage 4 - Finished（定案阶段） Stage 0 is "i've got a crazy idea", stage 1 is "this idea might not be stupid", stage 2 is "let's use polyfills and transpilers to play with it", stage 3 is "let's let browsers implement it and see how it goes", stage 4 is "now it's javascript". babel-polyfill 和 transform-runtime 作用：实现浏览器对不支持API的兼容（兼容旧环境、填补） polyfill transform-runtime 命令：npm i -S babel-polyfill 命令：npm i -D babel-plugin-transform-runtime 和 npm i -S babel-runtime 区别： polyfill 污染全局环境、支持实例方法 runtime 不污染全局环境、不支持实例方法 polyfill：如果想要支持全局对象（比如：`Promise`）、静态方法（比如：`Object.assign`）或者**实例方法**（比如：`String.prototype.padStart`）等，那么就需要使用`babel-polyfill` babel-runtime ：提供了兼容旧环境的helper函数，使用的时候，需要我们自己手动引入 比如：const Promise = require('babel-runtime/core-js/promise') 说明： 1 手动引入太繁琐 2 多个文件引入同一个helper（定义），造成代码重复，增加代码体积 3 安装该插件即可 babel-plugin-transform-runtime： 1 自动引入helper 2 babel-runtime提供定义，使用的位置引入这个helper，避免重复 3 babel-runtime包中的代码会被打包到你的代码中（-S） 4 依赖于 babel-runtime 插件 // 第一行引入 require("babel-polyfill") var s = 'abc'.padStart(4) console.log(s) // webpack.config.js 配置 module.exports = { entry: ['babel-polyfill', './app/js'] } 总结: babel-core 将新的JS语法解析为 抽象语法树(AST) babel-preset-es2015 能够将 抽象语法树 转化为浏览器能够识别的语法 注意: 只能处理新的语法( static / 箭头函数 ) , 但是对于一些新的JS API 无法处理 transform-runtime / babel-polyfill 提供浏览器不识别的全局对象或者新的API的兼容实现，以达到兼容浏览器的目的 // 判断浏览器是否兼容 padStart 这个 API if (!String.prototype.padStart) { // 如果不兼容, 就自己模拟 padStart的功能实现一份 String.prototype.padStart = function padStart(targetLength,padString) { } } |
【本文地址】
今日新闻 |
推荐新闻 |