CaseyWei

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle。从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，但它仍然有着 高度可配置性，可以很好满足你的需求。在开始前你需要先理解一些核心概念：本文档旨在给出这些概念的高度概述，同时提供具体概念的详尽相关用例。为了更好地理解模块打包工具

本文是我用webpack进行项目构建的实践心得，场景是这样的，项目是大型类cms型，技术选型是vue，只支持chrome，有诸多子功能模块，全部打包在一起的话会有好几MB，所以最佳方式是进行多入口打包。文章包含我探索的过程以及webpack在使用中的一些技巧，希望能给大家带来参考价值。首先，项目打包策略遵循以下几点原则：选择合适的打包粒度，生成的单文件大小不要超过500KB 充分利用浏览器的并发请求，同时保证并发数不超过6 尽可能让浏览器命中304，频繁改动的业务代码不要与公共代码打包 避免加

通常我们的项目包含三种类型的代码：业务代码、第三方依赖库、webpack打包构建后的manifest。官网经常会看到mainfest这个词，但是它究竟指什么，我们来做个实验找答案吧：（ps：文章把manifest打成mainfest了）1 mkdir webpack_mainfest //在当前目录下，创建项目目录 webpack_mainfest2 npm init3 npm i...

CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，是一把优化项目的利器。先来说一下各种教程以及文档中CommonsChunkPlugin提及到chunk有哪几种，主要有以下三种： 1.webpack当中配置的入口文件（entry）是chunk，可以理解为entry c...

为了方便仍然有疑惑的人，贴一个链接, 其中 @bjunc 的解答可以作为该题的完美回答；大概的翻译下：render: h => h(App)是下面内容的缩写：render: function (createElement) { return createElement(App);}进一步缩写为(ES6 语法)：render (createElement) {...

部署前端项目以后，你会发现一个问题（为什么必须刷新页面，页面才会更新到最新版本），其实就是因为服务器缓存的问题，接下来我就以我自己所用的方案来解决自动清除缓存的问题。

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。接下来我们简单为大家介绍 Webpack 的安装与使用。安装 Webpack在安装 Webpack 前，你本地环境需要支持node...

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过require来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。Loader 可以在require()引......

原本输入了 webpack demo.js demo.bundle.js,然后报错了这是为什么呢?原因是我的webpack版本过高,原来的命令已经不适用了如下查询版本号:那应该如何解决?更换打包命令为: webpack runoob1.js -o bundle.js其中 dundle.js是打包后生成的文件的文件名...

webpack 把我们所有的文件都打包成一个 JS 文件，这样即使你是小项目，打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。去除不必要的插件刚开始用 webpack 的时候，开发环境和生产环境用的是同一个 webpack 配置文件，导致生产环境打包的 JS 文件包含了一大堆没必要的插件，比如 HotModuleReplacementPlugin, NoErrorsPlugin...

前言在上一篇项目搭建文章中，我们已经下载安装了node环境以及vue-cli，并且已经成功构建了一个vue-cli项目，那么接下来，我们来梳理一下vue-cli项目的结构。总体框架一个vue-cli的项目结构如下，其中src文件夹是需要掌握的，所以本文也重点讲解其中的文件，至于其他相关文件，了解一下即可。 vue-cli项目总体结构文件结构细分1.build——[w...

加载器是用于资源文件的转换。 加载器就是以资源文件作为入参并返回新的资源的函数（在Node.js中运行）。例子例如，您可以使用加载器告诉webpack加载CSS文件或TypeScript文件，并将之转换为JavaScript。 首先，安装相应的加载器：npm install --save-dev css-loadernpm install --save-dev ts-loader...

文章中以 $ 符号开头的是在终端输入的命令 文章中以 vim 开头为编辑文件内容从零开始$ mkdir dailypaper新建一个项目文件夹dailypaper$ npm init 在该文件夹下npm init初始化项目文件夹会产生package.json文件$ npm install -D webpack 本地局域安装webpack依赖$ npm i...