- 综合排序
- 最热优先
- 最新优先
- 来自专栏雪胖纸的玩蛇日常
9.生命周期函数
生命周期函数，也叫生命周期钩子，是指组件挂载以及组件销毁所触发的一系列的方法。 在components目录下新建Life.vue组件，用于演示生命周期函数 <template>
</template> <script> export default { name: 'life', data () { return { msg:'生命周期函数演示{{msg}}
49410发布于 2019-10-06 - 来自专栏coding for love
5-8~9 webpack 性能优化（1）
简介 接下来几节，我们一起学习如何优化 webpack 性能，提升打包速度。 1. 跟上技术的迭代，使用最新的依赖 首先，webpack 版本在迭代更新的过程中会做很多的优化。 同样的道理， webpack 打包依赖的 node ，npm ，yarn，也应尽可能使用新版本。 2. 3. plugin 尽可能精简并确保可靠 不需要使用的 plugin 应该精简，比如 dev 环境下我们并不需要去压缩代码，那么诸如：uglifyjs-webpack-plugin，terser-webpack-plugin ，optimize-css-assets-webpack-plugin 等。 另外，因为 webpack 的插件非常多，选用的时候尽可能选择官方推荐或者已经比较成熟经过验证的插件。 4. resolve 参数合理配置 resolve 用来设置模块如何被解析。
44810发布于 2020-05-18 - 来自专栏前端修炼之路
【第9期】webpack入门学习手记（三）
webpack有两大特色： 动态打包。在webpack中，每个模块都会声明所引用的依赖，这样就避免了打包没有使用到的模块。另外通过配置，可以避免重复打包相同的引用，提高打包效率。 强大的loader。 用浏览器检查一下页面，就会知道webpack是怎么做到的了。 说明webpack将css代码自动添加到head标签中了，非常的智能化~ 加载图片 接下来尝试下加载图片和在css中引用背景图片。 首先告诉webpack字体文件使用file-loader进行加载。 加载数据 webpack可以加载任何类型的数据，例如JSON, CSV, TSV, 和XML。webpack默认内置了JSON加载数据。 照着官网的例子一步步来。 需要将webpack4版本 降到webpack3版本。我找到的版本是3.11.0。我将wepack卸载掉，然后安装这个版本之后，再次打包，就成功了。
1.3K20发布于 2020-03-24 - 来自专栏vue学习
9、webpack从0到1-devServer初探
webpack's Watch Mode webpack-dev-server webpack-dev-middleware 2、Watch模式 watch模式其实很简单，就是在package.json ", "scripts": { "build": "webpack", + "watch": "webpack --watch", "start": "webpack-dev-server 3、安装配置 首先我们进入chapter9，安装这个插件： $ cd chapter9 $ npm install webpack-dev-server --save-dev 接下来我们需要配置它，进入 /chapter9/dist/index.html； 现在我们使用它会帮我们自动打开浏览器且地址为http://localhost:8080/，它为我们起了一个新的服务器。 3、webpack-dev-middleware webpack-dev-middleware就是是一个中间件，用处就是可以把webpack打包后的文件传递给一个我们自建的服务器。
82230发布于 2020-03-20 - 来自专栏大史住在大前端
webpack4.0各个击破（9）—— karma篇
一. webpack与自动化测试 webpack对应的关键词是模块化，它的主要任务就是打包和管理模块，所以首先需要明确的概念就是webpack之所以关联自动化测试，是因为它能够为测试脚本提供模块管理的能力 ，本质上来讲，是将webpack的打包功能嵌入了自动化测试框架，而不是将自动化测试框架作为插件集成进了webpack，理解这个区别是非常关键的。 二. karma-webpack 插件地址：https://github.com/webpack-contrib/karma-webpack 2.1 自动化单元测试库简介 先对基本的单元测试工具做一个简要说明 处理 'test/*_test.js': [ 'webpack' ], 'test/**/*_test.js': [ 'webpack' ] }, webpack 低版本的webpack可以参考karma-webpack-example这个开源项目的示例进行配置。webpack4.0以上版本可以参考下文推荐的示例。 单元测试结果： ? 覆盖率报告： ? 四.
1.5K20发布于 2018-09-10 - 来自专栏盛开在夏天的太阳
9.Vue之webpack打包基础---模块化思维
现实工作中, 一个项目可能会有多个人同时开发. 然后, 将所有人开发的内容, 合并到一个文件中. 比如: 1. 有3三个人同时开发, 一个人一个js文件, 最后引入到main.js 2. 每个人单独写, 这样, 定义的变量可能会重名, 那么在main.js中取值赋值就可能会出现问题
57910发布于 2021-03-05 - 来自专栏韩东吉的Unity杂货铺
零基础入门 9： Unity脚本的生命周期
因为接下来的几篇分享，可能会开始编写脚本，所以索性用这篇来介绍下Unity脚本的常用生命周期函数。 一说到生命周期函数，很多小伙伴的表情就是这样的 ? Unity脚本还有生命周期函数？吃惊！ （Σ(⊙▽⊙"a ） 这篇主要分享下有关生命周期的内容。 ---- 实际上Unity脚本的生命周期函数有很多，但是常用的却只有一部分。 先来贴一张qitian67博文曾发出来的一张图。大家来感受下。 （请注意：上面的流程图，是Unity3.4版本的生命周期函数时序） 下面我们创建一个空的脚本，来重新验证下，现在的Unity生命周期函数的调用顺序。 打开脚本，进行编辑，增加生命周期函数。 ? 上图内的自带生命周期函数是创建脚本的模板，至于如何创建一个新的脚本就自带模板内容，请翻看之前分享的内容重温一下。 如上图，当脚本内没有生命周期函数的时候，脚本前的对勾就消失了。如果把生命周期函数的注释去掉，那么对勾就会出现。
1.4K40发布于 2018-10-19 - 来自专栏前端森林
你可能不知道的9条Webpack优化策略
// 在这里查看更多选项：https： //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21 statsOptions: terser-webpack-plugin 不知道你有没有发现：webpack4 已经默认支持 ES6语法的压缩。 而这离不开terser-webpack-plugin。 DLLPlugin 插件是在一个额外独立的webpack设置中创建一个只有dll的bundle，也就是说我们在项目根目录下除了有webpack.config.js，还会新建一个webpack.dll.js 主要在两块配置，分别是webpack.dll.js和webpack.config.js（对应这里我是webpack.base.js） webpack.dll.js const path = require = require('add-asset-html-webpack-plugin'); const webpack = require('webpack'); const plugins = [
2.2K31发布于 2020-07-24 - 来自专栏前端人人
React多页面应用9(webpack4 引入eslint代码检查)
本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04 2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等 5、React多页面应用5(webpack4 多页面自动化生成多入口文件)---2018.04.11 6、React多页面应用6(webpack4 开发环境打包性能小提升)---2018.04.12 9、React多页面应用9(webpack4 引入eslint代码检查)---2018.04.17 开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2 完整代码 const webpack = require('webpack');//引入webpack const opn = require('opn');//打开浏览器 const merge =
1.7K80发布于 2018-04-24 - 来自专栏全栈程序员必看
手把手教你webpack3（9）File-Loader配置简述
实际上是相对于context的路径，context默认是webpack.config.js 的路径； [name] 表示原文件的文件名（不含后缀名）。 2.2、context 名称 类型 默认值 描述 context {String} this.options.context 配置自定义文件 context，默认为 webpack.config.js ext]'； 打包结果：dist/file_loader/src/logo.png； 2.3、publicPath 名称 类型 默认值 描述 publicPath {String|Function} __webpack_public_path __ 为你的文件配置自定义 public 发布目录 publicPath 这个一般会用webpack本身配置的，和那个效果也一样，但假如你想单独配置，就用这个。
1.3K20编辑于 2022-07-20 - 来自专栏全栈程序员必看
webpack（6）webpack处理图片
图片处理url-loader(webpack5之前的处理方式) 在项目开发中，我们时长会需要使用到图片，比如在img文件夹中有图片test1.png，然后在normal.css中会引用到图片 body{ /img/test1.png"); } 但是此时，我们直接使用webpack打包是会报错的，我们需要安装url-loader，它是用于将文件转换为 base64 URI 的 loader。 接着我们在webpack.config.js中配置url-loader的设置 module.exports = { module: { rules: [ { test 图片字体之类的资源的时候等，需要用到url-loader，file-loader，raw-loader，webpack5则放弃了这三个loader，这三个loader在github上也停止了更新。 webpack5使用四种新增的资源模块（Asset Modules）替代了这些loader的功能。
1.2K10编辑于 2022-09-19 - 来自专栏Golang开发
webpack
6 将单文件组件(*.vue)类型的文件，转化成浏览器识别的内容 基本使用 webpack的两种使用方式：1命令行 2 配置文件 webpack.config.js package 创建webpacktest npm i -D webpack webpack-cli 当前webpacktest目录下文件结构 tree -L 1 . ├── node_modules ├── package-lock.json /node_modules/.bin/webpack helloworld.js Hash: 4f3b3b08a01b5cace0ff Version: webpack 4.34.0 Time: 322ms /src/main.js --mode development" }, 在终端中执行执行命令 npm run build webpack打包处理的过程： 1 运行webpack的打包命令 2 webpack 找到我们指定的入口文件main.js 3 webpack 分析main.js 中的代码，当遇到imort $....语法的时候，那么webpack就会导入模块代码 配置文件webpack.config.js
1.7K31发布于 2019-06-16 - 来自专栏Renda
前端技术 Webpack（学习 Webpack 的原因，Webpack 快速入门）
现代化前端开发工作，离不开 Webpack 相关技术栈，是提升前端生产力的利器 Webpack 在前端项目中实践模块化思想 Webpack 本质上是一个模块化打包工具，它通过“万物皆模块”这种设计思想， ： npm init --yes npm i webpack webpack-cli --save-dev webpack 是 Webpack 的核心模块，webpack-cli 是 Webpack 的 这里我们使用的 Webpack 版本是 v4.42.1，有了 Webpack 后，就可以直接运行 webpack 命令来打包 JS 模块代码，具体操作如下： $ npx webpack 这个命令在执行的过程中 更多 Webpack 相关的配置可以在 Webpack 的官网中找到：https://webpack.js.org/configuration/#options 让配置文件支持智能提示 因为 Webpack /webpack.config.js // 一定记得运行 Webpack 前先注释掉这里。
2.1K40发布于 2020-09-08 - 来自专栏软件工程
Webpack
关于webpack和node和npm的关系 四.关于Webpack的一个简单应用 五.webpack.config.js配置和package.json配置 六.webpack中使用css文件的配置 webpack . " 这样我们执行npm run build 就会执行webpack了 六.webpack中使用css文件的配置 在说使用css文件之前我们要说一些webpack的能力问题以及loader概念 webpack loader是webpack中一个非常核心的概念,他负责对webpack打包功能做拓展。 npm install webpack,这样就在项目内安装了一个本地webpack,但是如果我们还用的cmd终端的话肯定还是用的全局webpack,如果想用局部的应该使用node_modules/.bin
1.3K30编辑于 2021-12-23 - 来自专栏快乐阿超
webpack
首先是官方文档：https://webpack.docschina.org/ 本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。 当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容 接下来我们跟着快速上手一下，将一个普通的html文件使用webpack改造 https://webpack.docschina.org/guides/getting-started 创建目录，安装依赖 mkdir webpack-demo cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev 新建index.html --config webpack.config.js 我们在package.json中新建一个脚本 { "name": "simple-webpack", "version": "1.0.0"
81210编辑于 2022-09-23 - 来自专栏前端小哥哥
webpack
我们常说的Module是什么 webpack支持 ESModule, CommonJS, AMD, Assests 如何表达各种依赖关系？ 我们常说的chunk和bundle的区别是什么？ Chunk 是Webpack打包过程中Modules的集合，是打包过程中的概念。 Webpack的打包是从⼀个⼊⼝模块开始，⼊⼝模块引⽤其他模块，模块再引⽤模块。 Webpack通过引⽤关系逐个打包模块，这些module就形成了⼀个Chunk。 当然如果有多个⼊⼝模块，可能会产出多条打包路径，每条路径都会形成⼀个Chunk。 Loader 模块转换器，将非js模块转化为webpack能识别的 Plugin 扩展插件,webpack各个阶段都会广播出对应的事件 Compiler 对象，也可以理解为webpack的实例 Compliation 模块资源 简单描述一下打包过程 初始化参数：shell webpack.config.js 开始编译 确定入口 编译模块 完成模块编译 输出资源
48910编辑于 2023-05-04 - 来自专栏进击的君君的前端之路
webpack
var path = require('path') // 安装完webpack自带的 --dirname代表webpack.config.js文件当前所在的路径 webpack只支持原生js模块的打包 Toast 模块文件名b.js // 加载a.js模块 var Toast = require('a.js').Toast; // 这么写 ，require('a.js')是对象，加载它的Toast方法 webpack -w // 观察模式，对js代码改动会自动重新打包 webpack -p // 压缩打包js代码
71520发布于 2018-06-28 - 来自专栏clz
webpack
早期的前端工程化解决方案： grunt gulp 目前主流的前端工程化解决方案：[webpack](webpack 中文文档 | webpack 中文网 (webpackjs.com)) 2. webpack 解决问题 在项目中安装 webpack 安装 webpack 相关的两个包 npm install webpack webpack-cli -D（-D 是–save-dev 的缩写） 配置 webpack 插件 3.1 webpack-dev-server 每当修改了源代码，webpack 会自动进行项目的打包和构建 安装 webpack-dev-server，npm install webpack-dev-server 是**webpack 中的 HTML 插件，通过此插件可以复制 html 文件放到其他位置（内存中） 安装 html-webpack-plugin 插件， npm install html-webpack-plugin @5.3.2 -D 配置 html-webpack-plugin，(在 webpack.config.js 中) //1.
2.1K30编辑于 2023-01-02 - 来自专栏生如夏花绚烂
webpack系列---webpack-dev-server
上一篇文章我们介绍了webpack的基本使用，但我们每次打包都要运行下webpack很是麻烦，有没有一种办法使得自动监控，自动打包，我们只需ctrl+s就行了？ 通过webpack-dev-server可实现我们的需求，他会自动帮我们监控代码并完成打包 如何使用？ cnpm i webpack-dev-server -D 2.在package.json配置命令 这样我们在命令框输入 npm run dev 即可执行webpack-dev-server 运行发现报错，Cannot find module 'webpack' 这是因为webpack-dev-server依赖webpack并且强制我们项目本地安装webpack，虽然我们之前全局安装过webpack 但是项目依赖并没有所有我们执行cnpm i webpack -D 安装完成再次运行 提示我们安装webpack-cli cnpm i webpack-cli -D 安装完成再次运行 可以看到项目运行在
95110编辑于 2022-09-08 - 来自专栏前端卡卡西
webpack
常用loader 安装webpack cnpm install webpack -D 安装webpack-cli cnpm install webpack-cli -D 安装css-loader
47520编辑于 2022-02-25
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号