资源分类：
简介：webpack 与 gulp 并不矛盾,甚至一起使用会得到最大化的利益,webpack 与 gulp。使用 webpack 进行 assets 编译,使用 gulp 进行打包似乎就是为了让它们各司其职......
简介：所以就需要 Webpack 了 说说 Webpack 什么是 Webpack?事实上它是一个打包工具,而不是像 RequireJS 或 SeaJS 这样的模块加载器,通过使用 Webpack,能够像 Node.......
简介：第3章 Xilinx ISE WebPack的安装与使用_理学_高等教育_教育专区。数字逻辑第3 章 Xilinx ISE WebPACK 的安装与使用 3.1 课程设计目的与软件程序设计相比,基于硬件......
简介：来源:知乎 Webpack 2 Tree Shaking Configuration 来源:Medium Vue 2 + Web...X+webpack 实现按路由功能打包项目 作者:yang_j_j (译) 通过 Webpack 实现......
简介：webpack 作为当下最为流行的模块打包工具,成 为了 react、vue 等众多热门框架的官方推荐打包工具。其提供的 Code Splittin g(代码分割)特性正是实现模块按需加载......
简介：让每一名学员高薪就业
Webpack 入门教程 1. 简介 Webpack 是当下最热门的前端资源模块化管理和打包工具。 它可以将许多松散的模块按 照依赖和......
简介：$ webpack s)来打包 2. $ webpack 3. $ webpack 4. $ webpack --config XXX.js //使用另一份配置文件(比如 webpack.config2.j --watch //监听变动......
简介：(String Number Boolean Function Object Array) // 局部注册 8 十七、Vue-loader 1 ) vue-loader 可以让你换一种方式来定义组件,它必须配合打包工具 webpack ......
简介：前端工程师通过使用前端构建工具,搭建自动化前端开发,生产环境。视频教程,我们俩文化传播全套教学,在线学习javascript课程,前端自动化构建工具合集之webpack视频下载...
简介：webpack webpack 是一款模块加载器兼打包工具,它能把各种资源,例如 JS (含 JSX)、coffee、样式(含 less/sass)、图片等都作为模块来使用和处 理。 gulp Gulp.......
copyright@ 2013- Inc. All Rights Reserved 果果文库 版权所有 联系站长: ; 经营许可证编号:浙ICP备号vue-cli 快速构建vue应用，实现webpack打包 - 远走的兔子博客 - CSDN博客
vue-cli 快速构建vue应用，实现webpack打包
一、什么是vue-cli
vue-cli是由vue官方发布的快速构建vue单页面的脚手架。参见vue-cli官方网站。http://vuejs-templates.github.io/webpack/
之前需要使用vue的单文件组件的功能，即将不同的模板分离到不同的.vue后缀的文件中，这样做需要使用webpack打包。参见官方说明：https://cn.vuejs.org/v2/guide/single-file-components.html &
然后在网上看来许多关于使用webpack打包文件的教程，如下：
/varHarrie/Dawn-Blossoms/issues/7
普遍采用上面这篇文章介绍的方式。这样需要自己配置很多文件，操作复杂。后面我发现使用vue-cli可以实现webpack的快速打包。具体操作在后面介绍
二、安装vue-cli (基于ubuntu操作)
1、安装node
sudo apt-get install nodejs
sudo apt-get install npm
2. 使用npm安装vue-cli
&npm install --global vue-cli
使用vue -V检查是否安装成功。
在安装vue-cli时，已经自带安装webpack。
在这步中，可能比较慢，可以使用淘宝的镜像文件。可参考：http://riny.net/2014/cnpm/
如下设置：
npm install -g cnpm --registry=https://registry.npm.taobao.org
再使用cnpm安装vue-cli
cnpm install -g vue-cli
三、生成项目模板
&vue init webpack vuedemo
webpack是模板名称，这里我们需要使用webpack的打包功能，所以使用webpack,其他更多模板参见：/vuejs-templates
vuedemo是项目名称
上述命令回车之后，出现如下设置：
Project description :项目描述
Author: 作者
Vue build：打包方式（直接回车就可以）
Install ESL TO lint your code? 是否使用ESL代码检测
Pick an ESLint preset? &standard (设置编码风格采用stardard 参加(/feross/standard)
Setup unit tets with Kara + mocha?&&
是否安装单元测试，我选择安装
Setup e2e tests with Nightwatc?&是否安装e2e测试 ，我选择安装
进入创建的工程下面：
cd vuedemo （这里的vuedemo是之前输入的项目名）
使用tree命令查看项目目录结构如下：（如果没有tree命令，使用&sudo apt install tree安装）
安装依赖的库：
npm install
npm run dev
同时浏览器出现如下界面：
如果没有出现 的话，可能你的8080端口被占用了，可以在config/index.js中将dev中的port改为其他值试试
四、webpack打包
这里需要的知识涉及webpack,可以参考/varHarrie/Dawn-Blossoms/issues/7
对比上面我们提到的关于webpack的教程，我们需要关注下项目文件加下的build/webpack.base.conf.js文件
在这里，我们需要关注的只有注释的两个参数。
至于config.build.assetsRoot的具体值是在哪里设置的呢？第三行：
var config = require('../config')
表明了config这个变量的引入文件加在哪里。
在项目文件夹下的config/index中定义了build.assetsRoot的值
其中：__dirname是当前文件所在项目的文件夹的绝对路径
这时，我们查看文件目录如下：
npm run build .
这样就可以将资源文件打包到上面我们设置的文件夹dist/ 中
再次查看项目文件夹的目录结构：
此时已经自动生成了dist文件夹，在这个文件夹下有index.html文件和public文件夹，public文件夹下存放的就是webpack打包之后的文件。
五、总结：
总的来说，只需要一下几个步骤就可以快速使用vue-cli搭建使用webpack的vue单页面项目：
1、sudo apt-get install nodejs
2、sudo apt-get install nmp
3、nmp install -g vue-cli
4、vue init webpack
5、cd vuedemo
6、npm run dev
7、npm run bulid
六、参考网站
vue-cli官网：http://vuejs-templates.github.io/webpack/e2e.html
webpack打包介绍：/varHarrie/Dawn-Blossoms/issues/7
基于vue-cli快速构建：/p/2769efeaa10a
10
我的热门文章vue+webpack实现异步组件加载
有一段时间没回来了。今天回来看发现这篇文章有不少人看过，羞愧死了。当时写的时候想的不是很深。这里要纠正一下。
vue文档里的写法是确实可以的，下面的第一种写法也是可以的。
AMD的规范写法是：
& define(['r1','r2'],function(r1,r2){
define作用是明确定义一个模块，并起到隔离作用域的作用。把依赖写在依赖数组里，然后再回调中传入依赖的文件模块。
-----------------------------------------------------
本来很简单的事情折腾好久。
1.vue文档只给出了ponent('comp_name',function(resolve,reject){})在回调里ajax加载组件定义内容的例子，但现在习惯.vue文件写组件，在点击路由获取.vue的时候怎么弄呢？
2.webpack的coding-split支持commonjs/amd语法，即有不同的实现。网上查了n多案例乱七八糟的，最后终于弄明白了：
commonjs语法：
const setting = resolve =& require.ensure([], () =&
resolve(require('./components/setting.vue')),
'setting');vue文档写法：
resolve =&
require(['./components/setting.vue')],
resolve);//懒加载
我自己用的第一种，在github上看到的，require.ensure是webpack的语法，在打包的时候将require.ensure部分指定的代码切割出来打包在另一个chunk上，webpack.config.js里面output选项加上chunkFilename:'[name].min.js'即可。
require.ensure的三个参数分别是：依赖的url，回调，自定义的chunk的名字。
其实，code split
本质上就是，将你require的模块单独出来另外打包，等用到的时候再由浏览器发起异步获取，并通过script
dom的形式插入到head中，这是它的底层实现。我自己尝试的时候，每获取一次异步组件，head中都会插入两个标签，一个script标签,一个style标签,因为.vue文件最终会解析成html,css和js。
PS：其实webpack官网的示例代码并没有resolve=&这种写法，直接在函数里require.ensure就是了，一开始有点疑惑，网上找不到讲解，自己研究发现require.ensure这个函数，webpack打包编译之后
是一个_webpack_require_.e的函数，其本身是一个一个thenable实例，require.ensure的回调放到_webpack_require_.e.then(fn)里面，这下子就很明显了，webpack的这个语法本身应该是一个promise实例，只是上面获取vue组件的写法里，因为require.ensure是封装好的语法，只好把resolve传入其父函数中，在require.ensure的回调里通过作用域链获取并调用。这也揭露了，resolve函数不一定要在promise的函数参数中，其出现位置可以灵活设置，在阮一峰老师的ES6入门里提到过，resolve函数是js引擎能提供的，不需要自己部署。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}