![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 71
CaseyWei
感激每个遇见的人
展开
-
(转)webpack简介
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并生成一个或多个 bundle。从 v4.0.0 开始,webpack 可以不用再引入一个配置文件来打包项目,然而,但它仍然有着 高度可配置性,可以很好满足你的需求。在开始前你需要先理解一些核心概念:本文档旨在给出这些概念的高度概述,同时提供具体概念的详尽相关用例。为了更好地理解模块打包工具原创 2022-07-08 10:58:25 · 1547 阅读 · 0 评论 -
( 转)webpack解惑:多入口文件打包策略
本文是我用webpack进行项目构建的实践心得,场景是这样的,项目是大型类cms型,技术选型是vue,只支持chrome,有诸多子功能模块,全部打包在一起的话会有好几MB,所以最佳方式是进行多入口打包。文章包含我探索的过程以及webpack在使用中的一些技巧,希望能给大家带来参考价值。首先,项目打包策略遵循以下几点原则:选择合适的打包粒度,生成的单文件大小不要超过500KB 充分利用浏览器的并发请求,同时保证并发数不超过6 尽可能让浏览器命中304,频繁改动的业务代码不要与公共代码打包 避免加原创 2020-07-31 10:15:19 · 470 阅读 · 0 评论 -
(转)webpack3 、manifest 、runtime 、缓存与CommonsChunkPlugin
通常我们的项目包含三种类型的代码:业务代码、第三方依赖库、webpack打包构建后的manifest。官网经常会看到mainfest这个词,但是它究竟指什么,我们来做个实验找答案吧:(ps:文章把manifest打成mainfest了)1 mkdir webpack_mainfest //在当前目录下,创建项目目录 webpack_mainfest2 npm init3 npm i...原创 2019-12-10 14:01:15 · 268 阅读 · 0 评论 -
webpack3配置中常用的CommonsChunkPlugin介绍
CommonsChunkPlugin主要是用来提取第三方库和公共模块,避免首屏加载的bundle文件或者按需加载的bundle文件体积过大,从而导致加载时间过长,是一把优化项目的利器。先来说一下各种教程以及文档中CommonsChunkPlugin提及到chunk有哪几种,主要有以下三种: 1.webpack当中配置的入口文件(entry)是chunk,可以理解为entry c...原创 2019-10-16 20:00:40 · 902 阅读 · 0 评论 -
Vue—— render: h => h(App) 具体含义
为了方便仍然有疑惑的人,贴一个链接, 其中 @bjunc 的解答可以作为该题的完美回答;大概的翻译下:render: h => h(App)是下面内容的缩写:render: function (createElement) { return createElement(App);}进一步缩写为(ES6 语法):render (createElement) {...原创 2019-06-22 10:09:58 · 323 阅读 · 0 评论 -
vue 用webpack打包文件名添加版本号
部署前端项目以后,你会发现一个问题(为什么必须刷新页面,页面才会更新到最新版本),其实就是因为服务器缓存的问题,接下来我就以我自己所用的方案来解决自动清除缓存的问题。原创 2019-06-20 15:32:17 · 6277 阅读 · 2 评论 -
Webpack 入门
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。接下来我们简单为大家介绍 Webpack 的安装与使用。安装 Webpack在安装 Webpack 前,你本地环境需要支持node...原创 2019-03-06 22:29:01 · 99 阅读 · 0 评论 -
webpack前端构建工具——loader
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过require来加载任何类型的模块或文件,比如 CoffeeScript、 JSX、 LESS 或图片。Loader 可以在require()引......原创 2019-03-06 16:46:38 · 280 阅读 · 0 评论 -
ERROR in multi ./runoob1.js bundle.js Module not found: Error: Can't resolve 'bundle.js' in 'E:\app'
原本输入了 webpack demo.js demo.bundle.js,然后报错了这是为什么呢?原因是我的webpack版本过高,原来的命令已经不适用了如下查询版本号:那应该如何解决?更换打包命令为: webpack runoob1.js -o bundle.js其中 dundle.js是打包后生成的文件的文件名...原创 2019-03-06 16:07:52 · 957 阅读 · 0 评论 -
vue-cli目录结构介绍
前言在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli项目,那么接下来,我们来梳理一下vue-cli项目的结构。总体框架一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可。 vue-cli项目总体结构文件结构细分1.build——[w...原创 2018-10-10 18:28:52 · 190 阅读 · 0 评论 -
解决 webpack 打包文件体积过大方案
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。去除不必要的插件刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin...原创 2018-10-11 10:23:03 · 1398 阅读 · 0 评论 -
webpack配置
文章中以 $ 符号开头的是在终端输入的命令 文章中以 vim 开头为编辑文件内容从零开始$ mkdir dailypaper新建一个项目文件夹dailypaper$ npm init 在该文件夹下npm init初始化项目文件夹会产生package.json文件$ npm install -D webpack 本地局域安装webpack依赖$ npm i...原创 2018-09-04 22:57:59 · 545 阅读 · 0 评论 -
webpack-loader(加载器)
加载器是用于资源文件的转换。 加载器就是以资源文件作为入参并返回新的资源的函数(在Node.js中运行)。例子例如,您可以使用加载器告诉webpack加载CSS文件或TypeScript文件,并将之转换为JavaScript。 首先,安装相应的加载器:npm install --save-dev css-loadernpm install --save-dev ts-loader...原创 2018-09-05 18:31:15 · 380 阅读 · 0 评论