问题一:引入前端库,方法也是不一样的

比如 lodash.js ,作为一个 chunk 用 html-webpack-plugin 打包到页面里,会生成一个全局变量 window._ ,在其它 js 中不必 require('lodash'); 就可以直接使用 window._

比如 webpack-zepto,作为一个 chunk 用 html-webpack-plugin 打包到页面里,不会生成 window.$ ,如果在其它 js 中直接使用 window.$ ,就会报错。需要在其它 js 中 var $ = require('webpack-zepto'); 这样 zepto 和页面 js 会打包到一个文件里,体积太大,而且不利于浏览器缓存

为了有效利用浏览器缓存,避免单个 js 体积太大,我们希望每个前端库打包成一个 js ,和页面逻辑分开

问题二:CommonsChunkPlugin

针对上一个问题,大家会提出使用 CommonsChunkPlugin ,参考这里

然而,使用 CommonsChunkPlugin 后,被指定的公共文件成了 js 的入口,其它 js 包括其它前端库都依赖这个 js ,如:

entry : {
'lodash' : ['lodash'],
'zepto' : ['webpack-zepto'],
}, plugins : [
new CommonsChunkPlugin({
names : ['zepto', 'lodash']
}),
...
]

打包后的 zepto.js

/******/ (function(modules) { // webpackBootstrap
/******/ // install a JSONP callback for chunk loading
/******/ var parentJsonpFunction = window["webpackJsonp"];
/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {

打包后的 lodash.js

webpackJsonp([2],{

/***/ 0:
/***/ function(module, exports, __webpack_require__) {

那么必须指定 zepto.js 放在 lodash.js 的前面,不然就会报 webpackJsonp 未定义的错误!

然而原本 zepto 和 lodash 是没有相互依赖的关系的,能忍?

还有更不能妥协的场景,我要引入一个 jsA,它原本没有任何依赖,但它必须放在 head 里,因为它加载时会执行 document.write

打包时,我可以指定 jsA 放在 head 里,然而现在它依赖于 zepto 了,就必须把 zepto + jsA 放在 head 里

目前的解决方案:

不使用 CommonsChunkPlugin,每一个前端库,新建一个 js 专门 require 它,并生成一个全局变量,如:

lib/_zepto.js

window.$ = require("webpack-zepto");

然后作为一个 chunk 打包到页面中

这样解决了以上两个问题:

1. 每个前端库打包成一个独立 js,可以有效利用浏览器缓存,生成全局变量,页面 js 中可以直接使用

2. 不相互依赖的前端库位置随意,只要确保它们都在页面逻辑 js 前引入就可以了

抛砖引玉,请高手批评指正!谢谢!

webpack 打包时到底如何组织js的更多相关文章

  1. webpack打包时排除其中一个css、js文件,或单独打包一个css、js文件

    在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单 ...

  2. js webpack打包时保留指定注释

    optimization: { minimizer: [ new TerserJSPlugin({ terserOptions: { format: { comments: /(\s*#if)|(\s ...

  3. vue用webpack打包时引入es2015插件

    1.安装依赖包 $ npm install --save-div babel-preset-es2015 ps:babel-loader.babel-core应该是默认装好的,如果没有安装,请重新安装 ...

  4. 使用vue+webpack打包时,去掉资源前缀

    在build文件夹下找到webpack.prod.conf.js文件,搜索 filename: utils.assetsPath('css/[name].[contenthash].css'), 将[ ...

  5. Webpack打包时警告 - Critical dependency: the request of a dependency is an expression

    关于解决 [Webpack] Critical dependency: the request of a dependency is an expression ------------------- ...

  6. 关于webpack,打包时遇到的错误

    最近在研究webpack这玩意,然后遇到一个问题,执行npm run build的时候,出现下面这个问题,各种搜索后,各种尝试,都没解决 运行时报错ERROR in ./src/app.vue Mod ...

  7. nodejs+react使用webpack打包时控制台报错

    一.错误:Uncaught ReferenceError: process is not defined 解决方法: new webpack.DefinePlugin({ 'process.env': ...

  8. 打包时ElementUI使vendor.js文件体量过大优化方法

    <h1> 1.在index.html中以CDN的方式引入 </h1> <p> 引入的时候注意:要先在引入之前引入VUE否则会报undedined prototype ...

  9. webpack打包时删除console.log,和debugger

    开发过程中我们不可避免的需要console.log调试,然而在上线时如果不删除这些console.log可能会造成内存泄漏,因为console.log出来的变量是不会被GC的,webpack给我们提供 ...

随机推荐

  1. bookshelf

    nodejs mysql ORM 比node-mysql好用多了. bookshelf 支持restful功能,用到的时候研究下:https://www.sitepoint.com/getting-s ...

  2. 从0开始学Swift笔记整理(三)

    这是跟在上一篇博文后续内容: --Swift中相关的属性 存储属性 Swift中的属性分为存储属性和计算属性,存储属性就是Objective-C中的数据成员,计算属性不存储数据,但可以通过计算其他属性 ...

  3. GitLab:解决Merge Request中Commits不更新的问题

    最近在使用 GitLab 的 Merge Requests 功能进行 Code Review .操作流程是这样的: 1)开发人员A要给一个项目增加一个新功能,先在这个项目上创建一个 Git 分支. 2 ...

  4. uv纹理坐标设定与贴图规则

    1.什么是UV?   对于三维模型,有两个最重要的坐标系统,一是顶点的位置(X,Y,Z)坐标,另一个就是UV坐标.什么是UV?简单的说,就是贴图影射到模型表面的依据. 完整的说,其实应该是UVW(因为 ...

  5. [安卓] 5、SeekBar拖动条

    越来越发现这些控件用法大同小异了,这里注意几个函数:seekBar.setSecondaryProgress(0);设置初始进度为0,总共为0~99,对其监听用setOnSeekBarChangeLi ...

  6. [ACM_数学] Fibonacci Nim(另类取石子,2-4组合游戏)

    游戏规则: 有一堆个数为n的石子,游戏双方轮流取石子,满足: 1)先手不能在第一次把所有的石子取完: 2)之后每次可以取的石子数介于1到对手刚取的石子数的2倍之间(包含1和对手刚取的石子数的2倍). ...

  7. CSS关于元素垂直居中的问题

    今天碰到了一个问题,给一个父容器和一个子元素,子元素不定高和不定宽,怎么让子元素居中在父容器中,比如下段代码 方法1: <div class="div1"> <d ...

  8. paip.提升性能3倍--使用栈跟VirtualAlloc代替堆的使用.

    paip.提升性能3倍--使用栈跟VirtualAlloc代替堆的使用. #----为什么要设计堆栈,它有什么独特的用途? 为了性能 ....  堆比栈的性能 也有的说法为了编程容易...这个是错误的 ...

  9. springmvc中@PathVariable和@RequestParam的区别

    顾名思义, @PathVariable和@RequestParam,分别是从路径里面去获取变量,也就是把路径当做变量,后者是从请求里面获取参数. 我的url; http://localhost:808 ...

  10. log4qt的使用

    Log4Qt替换成新版本使其支持Qt5:https://github.com/devbean/log4qt/tree/master/src/log4qt 1. 解压log4qt到目标文件夹,如D:\Q ...