先贴一篇对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的更多相关文章

  1. Vue2.0+Webpack项目环境构建到发布

    前言:为什么要用webpack搭建项目呢,因为这个工具可以把目前浏览器不全部支持的ES6语法,通过打包工具生成所有浏览器都支持的单个JS文件. 参考: https://blog.csdn.net/u0 ...

  2. 一步步构造自己的vue2.0+webpack环境

    前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...

  3. vue2.0+webpack+vuerouter+vuex+axios构建项目基础

    前言 本文讲解的是vue2.0+webpack+vuerouter+vuex+axios构建项目基础 步骤 1.全局安装webpack,命令 npm install webpack -g 注意,web ...

  4. Node + Express + vue2.0 + Webpack项目实践

    技术 Express.Vue.Vue-Router.Vue-Resource.Webpack Vue vue 的组件化思想和 React 很像,一个 vue 组件将 html.css 和 js 都写在 ...

  5. Vue2.0+Webpack+Element+Axios+vueRouter技术栈使用过程总结

    搭建项目架构 目采用Webpack+Vue-router的架构方式,开始安装(一切操作都在windows系统上完成) 1.按Win+R,然后在文本框中输入cmd,回车打开命令行,输入vue-cli安装 ...

  6. mintUI配合vue2.0,webpack,vue-cli脚手架从零搭建

    步骤说明: 1.确保安装了vue-cli 安装:cnpm install vue-cli -g 验证版本:vue --version 2.生成项目模板: vue init webpack-simple ...

  7. 关于vue2.0+hbuilder打包移动端app之后空白页面的解决方案

    楼主是使用vue-cli构建的页面,代码是vscode,然后使用hbuilder打包成移动端的安装包.首先确认在npm run build 之后没有问题(默认dist文件夹),可以使用anywhere ...

  8. Vue2.0项目打包后只能访问首页,其他页面路径错误找不到

    原因是你使用了vue-router的history,可以尝试去掉  // mode:"history",

  9. vue2.0 练习项目-外卖APP(1)

    前言 vue这个框架现在挺流行的,作为一个专注前端100年的代码爱好者,学习下路径流行的框架是必须的!在网上搜索vue的项目是比较少的,在官网进行了入门学后,没有一个项目练习巩固下,学了就等于没学,所 ...

  10. vue2.0 移动端,下拉刷新,上拉加载更多 插件

    本人正在基于 vue2.0 + webpack + es6 搭建前端架构,整理了部分插件,下面这个是下拉更新 上拉更多的,挺好用的,分享给大家. 直接上代码,不懂的多看几遍,下面我换会告诉大家如何使用 ...

随机推荐

  1. python学习第十五天集合的创建和基本操作方法

    集合是python独有的数据列表,集合可以做数据分析,集合是一个无序的,唯一的的数据类型,可以确定列表的唯一性,说一下集合的创建和基本常见操作方法 1,集合的创建 s={1,2,4} 也可以用set( ...

  2. Mata标签,og标签

    一.Mata标签 meta是用来在HTML文档中模拟HTTP协议的响应头报文,meta 标签用于网页的<head>与</head>中.meta 的属性有两种:name和http ...

  3. macos系统安装mysql

    MacOS系统安装mysql 一.下载 官网下载链接地址:https://dev.mysql.com/downloads/mysql/ 二.安装 打开文件是pkg包,双击进行安装: 按照提示: 点击最 ...

  4. Sass函数-comparable 判断两个数是否可进行加减、合并

    comparable() 函数主要是用来判断两个数是否可以进行“加,减”以及“合并”.如果可以返回的值为 true,如果不可以返回的值是 false: >> comparable(2px, ...

  5. oracle的分析函数over

    参考地址:https://www.cnblogs.com/chinas/p/7058771.html?utm_source=itdadao&utm_medium=referral#_lab2_ ...

  6. ssm科普篇

    springMVC执行步骤: 1.用户发送请求到前端控制器,前端控制器根据请求信息来决定选择页面控制器,并将请求委托给它 2.页面控制器收到请求后,进行功能处理,首先需要收集和绑定请求参数到一个对象, ...

  7. gps位置坐标转百度坐标

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. kd树解平面最近点对

    早上起来头有点疼,突然就想到能不能用kd树解平面最近点对问题,就找了道题试了一下,结果可以,虽然效率不高,但还是AC了~ 题目链接:http://acm.hdu.edu.cn/showproblem. ...

  9. JAVA学习笔记--赋值(“=”)

    参考来源:<java编程思想(第四版)> 见第三章3.4节 基本数据类型存储了实际的数值,并非指向一个对象的引用,故其赋值,就是直接将一个地方的内容复制到了另一个地方.例如,对基本数据类型 ...

  10. phpLite 压缩包 百度云网盘资源

    链接: https://pan.baidu.com/s/1b6EnClYOznWa0OFgk4aNQg 密码: gpup