Vue2.0---webpack打包知识点-2
先贴一篇对vue-cli#2.0进行webpack配置的详细分析:
https://zhuanlan.zhihu.com/p/24322005
一、看一下webpack的打包流程
1、package.json中的“script”的"build": "node build/build.js",
在build.js中 var webpackConfig = require('./webpack.prod.conf')
2、所以我们进入到webpack.prod.conf.js中,然后又require('./webpack.base.conf')
3、进入到webpack.base.conf.js中----重点在module.exports中:因为我们现在考虑的是单入口,所以entry一般是main.js,
对于出口文件中的libraryTarget属性:共有四个属性值------umd,amd,commonjs,commonjs2。如果我们想开发一些工具库,这些库既可以用commonjs和
amd方式使用也可以用script方式引入。通常我们使用umd方式打包完成之后,浏览器可以识别。项目正常运行;但是使用amd方式,会报错---提示在打包
之后的app.js中define is not defined;使用commonjs方式,会报错---提示在打包之后的app.js中exports is not defined;使用commonjs2方式,会报错---提示在打包之后的app.js中module is not defined;
注:amd和cmd的依赖是通过define的参数来确定的,比如define('B', ['A'], () => {})
就是说当前模块的名字是B,并且依赖A模块。但是实际上amd和cmd中,第一个参数不设置,因为设置了会有问题;commonjs的用法规范既是依赖一个模块就require进来,暴露出这个模块供其他模块使用就exports。
4、我们最常使用的模块化方案是commonjs2和umd,前者是为node环境,后者是为浏览器环境。如果只是项目的话,libraryTarget属性可以不加的,如果是产品的话,需要另外讨论。
5、对externals属性理解尚浅-----
webpack中如果想不打包引用第三方类库、框架、自定义插件等,可以设置此属性;
externals使用场景是外部依赖不需要打包到输出文件。
externals: {
jquery: 'jQuery',
} 最后,对libraryTarget理解也是一种朦胧的状态。
以上。
Vue2.0---webpack打包知识点-2的更多相关文章
- Vue2.0+Webpack项目环境构建到发布
前言:为什么要用webpack搭建项目呢,因为这个工具可以把目前浏览器不全部支持的ES6语法,通过打包工具生成所有浏览器都支持的单个JS文件. 参考: https://blog.csdn.net/u0 ...
- 一步步构造自己的vue2.0+webpack环境
前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...
- vue2.0+webpack+vuerouter+vuex+axios构建项目基础
前言 本文讲解的是vue2.0+webpack+vuerouter+vuex+axios构建项目基础 步骤 1.全局安装webpack,命令 npm install webpack -g 注意,web ...
- Node + Express + vue2.0 + Webpack项目实践
技术 Express.Vue.Vue-Router.Vue-Resource.Webpack Vue vue 的组件化思想和 React 很像,一个 vue 组件将 html.css 和 js 都写在 ...
- Vue2.0+Webpack+Element+Axios+vueRouter技术栈使用过程总结
搭建项目架构 目采用Webpack+Vue-router的架构方式,开始安装(一切操作都在windows系统上完成) 1.按Win+R,然后在文本框中输入cmd,回车打开命令行,输入vue-cli安装 ...
- mintUI配合vue2.0,webpack,vue-cli脚手架从零搭建
步骤说明: 1.确保安装了vue-cli 安装:cnpm install vue-cli -g 验证版本:vue --version 2.生成项目模板: vue init webpack-simple ...
- 关于vue2.0+hbuilder打包移动端app之后空白页面的解决方案
楼主是使用vue-cli构建的页面,代码是vscode,然后使用hbuilder打包成移动端的安装包.首先确认在npm run build 之后没有问题(默认dist文件夹),可以使用anywhere ...
- Vue2.0项目打包后只能访问首页,其他页面路径错误找不到
原因是你使用了vue-router的history,可以尝试去掉 // mode:"history",
- vue2.0 练习项目-外卖APP(1)
前言 vue这个框架现在挺流行的,作为一个专注前端100年的代码爱好者,学习下路径流行的框架是必须的!在网上搜索vue的项目是比较少的,在官网进行了入门学后,没有一个项目练习巩固下,学了就等于没学,所 ...
- vue2.0 移动端,下拉刷新,上拉加载更多 插件
本人正在基于 vue2.0 + webpack + es6 搭建前端架构,整理了部分插件,下面这个是下拉更新 上拉更多的,挺好用的,分享给大家. 直接上代码,不懂的多看几遍,下面我换会告诉大家如何使用 ...
随机推荐
- ac自动机(tree+kmp模板)
Keywords Search Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others ...
- 关于php中trim、ltrim和rtrim
以ltrim为例 先看手册说明先 定义和用法 ltrim() 函数从字符串左侧删除空格或其他预定义字符. 语法 ltrim(string,charlist) 参数 描述 string 必需.规定要转换 ...
- anaconda安装教程、管理虚拟环境
原文链接:https://blog.csdn.net/ITLearnHall/article/details/81708148 另可参看文章:https://www.cnblogs.com/jonin ...
- hdu3664 Permutation Counting(dp)
hdu3664 Permutation Counting 题目传送门 题意: 在一个序列中,如果有k个数满足a[i]>i:那么这个序列的E值为k,问你 在n的全排列中,有多少个排列是恰好是E值为 ...
- MIT 6.824学习笔记1 MapReduce
本节内容:Lect 1 MapReduce框架的执行过程: master分发任务,把map任务和reduce任务分发下去 map worker读取输入,进行map计算写入本地临时文件 map任务完成通 ...
- ApacheHttpServer修改httpd.conf配置文件
转自:https://blog.csdn.net/dream1120757048/article/details/77427351 1. 安装完 Apache HTTP Server 之后,还需要修改 ...
- shell本地变量和环境变量的对比
- Kintex7 XC7K325T 板卡三剑客
(226)基于Xilinx Kintex-7 FPGA K7 XC7K325T PCIeX8 四路光纤卡 (227)基于Xilinx Kintex-7 FPGA K7 XC7K325T的FMC U ...
- 137-基于TMS320C6678、FPGA XC5VSX95T的四路Base模式全景影像处理平台
基于TMS320C6678.FPGA XC5VSX95T的四路Base模式全景影像处理平台 一.板卡概述 本板卡由我公司自主研发,基于CPCI架构,符合CPCI2.0标准,采用两片TI DSP TMS ...
- ubuntu-12.04.5-desktop-amd64 安装vmwaretools
百度文库地址:https://wenku.baidu.com/view/7c1cd211a216147917112820.html 注意:一定要把此文档中的vmwaretools 版本号换成你自己下载 ...