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 搭建前端架构,整理了部分插件,下面这个是下拉更新 上拉更多的,挺好用的,分享给大家. 直接上代码,不懂的多看几遍,下面我换会告诉大家如何使用 ...
随机推荐
- python学习第十五天集合的创建和基本操作方法
集合是python独有的数据列表,集合可以做数据分析,集合是一个无序的,唯一的的数据类型,可以确定列表的唯一性,说一下集合的创建和基本常见操作方法 1,集合的创建 s={1,2,4} 也可以用set( ...
- Mata标签,og标签
一.Mata标签 meta是用来在HTML文档中模拟HTTP协议的响应头报文,meta 标签用于网页的<head>与</head>中.meta 的属性有两种:name和http ...
- macos系统安装mysql
MacOS系统安装mysql 一.下载 官网下载链接地址:https://dev.mysql.com/downloads/mysql/ 二.安装 打开文件是pkg包,双击进行安装: 按照提示: 点击最 ...
- Sass函数-comparable 判断两个数是否可进行加减、合并
comparable() 函数主要是用来判断两个数是否可以进行“加,减”以及“合并”.如果可以返回的值为 true,如果不可以返回的值是 false: >> comparable(2px, ...
- oracle的分析函数over
参考地址:https://www.cnblogs.com/chinas/p/7058771.html?utm_source=itdadao&utm_medium=referral#_lab2_ ...
- ssm科普篇
springMVC执行步骤: 1.用户发送请求到前端控制器,前端控制器根据请求信息来决定选择页面控制器,并将请求委托给它 2.页面控制器收到请求后,进行功能处理,首先需要收集和绑定请求参数到一个对象, ...
- gps位置坐标转百度坐标
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- kd树解平面最近点对
早上起来头有点疼,突然就想到能不能用kd树解平面最近点对问题,就找了道题试了一下,结果可以,虽然效率不高,但还是AC了~ 题目链接:http://acm.hdu.edu.cn/showproblem. ...
- JAVA学习笔记--赋值(“=”)
参考来源:<java编程思想(第四版)> 见第三章3.4节 基本数据类型存储了实际的数值,并非指向一个对象的引用,故其赋值,就是直接将一个地方的内容复制到了另一个地方.例如,对基本数据类型 ...
- phpLite 压缩包 百度云网盘资源
链接: https://pan.baidu.com/s/1b6EnClYOznWa0OFgk4aNQg 密码: gpup