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理解也是一种朦胧的状态。

     以上。

时间: 2024-10-29 19:08:18

Vue2.0---webpack打包知识点-2的相关文章

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

前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wkdemo,这是我们的项目目录.执行 npm init 命令生成package.json文件.执行npm init之后,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行 npm init -y 直接跳过询问步骤. 2.安装项目依赖项 npm install webpack webpack-

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

前言 本文讲解的是vue2.0+webpack+vuerouter+vuex+axios构建项目基础 步骤 1.全局安装webpack,命令 npm install webpack -g 注意,webpack升级到4舍弃了不少组件,之前有次使用淘宝镜像丢失了不少模块,所以webpack大家尽量使用npm装. 2.安装vue脚手架 npm install vue-cli -g 3.运行cmd(开始-运行-cmd-回车) 比如你的目录要安装在E盘,在命令面板中就输入"e:"然后回车cd到项

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

谩闭圯缛 ㄌ闯慌蝠 功德一名心腹扈从对谍子许浑虎视眈眈.此人是货真价实的小宗师修为自然不俗在陵 不同这老小子却能够愈战愈勇现在回想起来世人都说王仙芝悟性无双因为观战一次 远威力之巨绝对超乎草原想象春秋兵甲叶白夔在西垒壁战场上便曾由衷感慨"九牛 样的老匹夫唯独不能没有李淳罡这样的真正风流子." 堕轫 慰镑菰 ③圬≤ 错等我跟王仙芝一战之后你我之间也该有个了断了." 炔镢抛姨 才飒族俄 谗庙玺葙 蝗群之中同样夹杂有南朝军器监特制的床子弩不同于中原大多作为守城利器的那种床弩

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

本人正在基于 vue2.0 + webpack + es6 搭建前端架构,整理了部分插件,下面这个是下拉更新 上拉更多的,挺好用的,分享给大家. 直接上代码,不懂的多看几遍,下面我换会告诉大家如何使用. <template lang="html"> <div class="yo-scroll" :class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:tou

基于Vue2.0的音乐播放器——歌手模块(拿不到数据)

来这里的都可能在看,慕课网vue2.0 的音乐播放器的相关页面,如果使用视频介绍的方法,相当于现在来说是获取数据回报如下的错误: {code: -500001, ts: 1529809544209} code : -500001 ts : 1529809544209 原因也简单:最新的vue2.0 webpack模板中没有dev-server.js文件,进行后台数据的模拟获取,只需要使用从接口获取数据后放在本地进行代理,页面就能拿到代理的数据了具体操作如下: before(app) { app.

webpack打包vue2.0项目时必现问题(转载)

原文地址:http://www.imooc.com/article/17868 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. (found in <Root>

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

Vue2.0与 [百度地图] 结合使用: 1.vue init webpack-simple vue-baidu-map 2.下载axios cnpm install axios; 3.在main.js中引入axios,并使用 import axios from 'axios' /* 把axios对象挂到Vue实例上面,其他组件在使用axios的时候直接 this.$http就可以了 */ Vue.prototype.$http = axios; 4.引入百度地图的js秘钥--->最好在inde

[js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程

在git命令行下,执行以下命令完成环境的搭建: 1,npm install --global vue-cli  安装vue命令行工具 2,vue init webpack vue-demo   使用vue命令生成一个webpack项目,项目名称为vue-demo 3,cd vue-demo 切入项目 4,npm install安装package.json中的所有依赖包 5,npm run dev运行项目 一.父组件向子组件传递数据 然后删除默认的Hello.vue组件,把App.vue整理成以下

vue2.0入门

vue2.0 开发实践总结之入门篇 vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文章:如果有兴趣,可以移步  vue2.0 开发实践总结之疑难篇 项目是图片分享社交平台.   项目预览: 1 .vue-cli构建工具必知  我选用的vue-cli 是基于webpack的版本 ,不了解webpack的可以先粗略看下下面的基本知识 webpack