前言: 为何使用webpack? 为何相对于gulp&grunt更有优势

而WebPack是一种模块化的方案,通过给定的主文件(如:index.js)使用不同的loaders处理项目的所有依赖文件,最后打包为一个浏览器可识别的JavaScript文件。Webpack + vue 搭建-LMLPHP

   其实两者并不具备太多可比性,grunt/gulp 在配置上比较简单,环境搭建更容易实现;而webpack的处理速度更快更直接,能打包更多不同类型的文件。

开始使用webpack

相关的技术:webpack@2,vue@1,vue-router@0.7,vuex@1

目录结构:

<ul>
<li>config全局变量
<li>dist编译后的项目代码</li>
<li>src项目代码
<ul> <li> apis api封装

<li>webpack.config Webpack各种环境的配置文件
<li>package.json
</ul>

   初始化项目 ---- Webpack 使用npm安装

1.创建项目文件夹,  npm init -y 创建 package.json

2.项目根目录下建立srcdist文件夹,分别用来存放项目源码webpack编译后的代码

   入口文件--- 简单跑一下

1.在根目录下直接建立一个index.html,作为页面的入口文件

2.在src下建立一个main.js,作为Vue的入口文件

3.安装模块: vue  npm install vue@1 --save ; webpack npm install webpack --save-dev(在本地安装)

本地安装的webpack 需要在package.json的 scripts 配置中添加运行脚本

运行npm run dev,再用浏览器打开index.html就能看到效果了:

全局安装webpack  npm install -g webpack 则无需指定脚本~

   编写webpack配置文件 !!

在上一步中专门指定了webpack运行脚本去运行指定的文件,但实际开发中,对于不同环境的大型项目/系统开发显然是不满足的。因此创建一个文件专门存放webpack配置~

1.在根目录下创建 webpack.config 文件夹来存放webpack的配置文件;

2.在上面的目录下首先创建一个base.js文件来存在一些公共环境下的配置文件(例如loaders的配置)

以上便实现了“webpack src/main.js dist/main.js”webpack指定 入口文件 -> 出口文件 的功能了。

此外还可以拓展一下,使得兼容更多的功能~  (webpack@2 resolving)

根目录下添加.babelrc用于配置 babel :

关于 Babel 是什么 : 通常与webpack搭配一起使用,webpack可以看作是是打包工具,babel则视为编译工具,可把最新标准编写的js代码(例如 es6,react..)编译成当下随处可用的版本。是一种“源码到源码”的编译(转换编译)!

而.babelrc就是让 Babel 做你要它做的事情的配置文件。

使用了vue-loader和babel-loader需要安装包: 运行如下命令(可能有坑哦,若踩可见文末 bug修复篇==。)

npm install --save-dev vue-loader@8 babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 css-loader vue-style-loader vue-hot-reload-api@1 vue-html-loader

3.在  webpack.json 中创建 dev.js

其中 webpack-merge 用于合并两个配置文件,需要安装 => npm install --save-dev webpack-merge

4.自行搭建一个小型服务器,以免手动调试 index.html 。定义使用 webpack dev server 。 (webpack@2 Proxy) 
因此需要继续配置dev.js如下: 还有其他一切配置,可查阅 webpack-dev-server-cli

5.添加热替换配置 HotModuleReplacementPlugin ,每次改动文件不会再整个页面都刷新。该配置是webpack内部插件,不需要安装。

6.使用 HtmlWebpackPlugin ,实现js入口文件自动注入。npm install --save-dev html-webpack-plugin,且需要在头部引入 => const HtmlWebpackPlugin = require('html-webpack-plugin') (还在dev.js中哦)

7.修改index.html(根目录i 啊),去掉入口文件的引入: 
8.修改package.json 的运行脚本:

再来跑一下,检测是否webpack配置都成功运作了。创建一个vue组件 src/components/Hello.vue

相应的main.js也做出修改:

运行npm run dev,浏览器打开 localhost:3800 查看结果 Hello Vue.js! 并且改动页面会自动刷新,不需要再一遍遍command+r刷新啦。

   配置路由

1.安装 vue-router: npm install --save vue-router@0.7 (当然了当下的vue + axois 会更搭哦)

2.src下创建views文件夹,用于存放页面组件;另外再创建router文件夹,用于存放所有路由相关的配置

3.添加路由页面 src/views/Home.vue:

4.添加 src/router/routes.js 文件,用于配置项目路由:

5.添加路由入口文件 src/router/index.js

6.再次修改main.js

7.最后别忘了index.html:

可以再次执行 npm run dev: 浏览器直接访问 localhost:3800查看效果。

    配置Vuex

其他 几个概念:  
state:状态,即数据 ;  
store:数据的集合,一个vuex引用,仅有一个store,包含n个state 
mutation:state不能直接赋值,通过mutation定义最基本的操作 
action:在action中调用一个或多个mutation 
getter:state不能直接取值,使用getter返回需要的state 
module:store和state之间的一层,便于大型项目管理,store包含多个module,module包含state、mutation和action

1.安装 : npm install --save vuex@1 添加 src/store 文件夹,存放vuex相关文件,添加 src/store/modules 用于vuex分模块管理 ;  
2.添加 src/store/types.js,vuex的所有mutation type(操作类型)建议放在一起,有效避免重名情况:

3.vuex模块,添加 counter 模块目录 store/modules/counter添加 store/modules/counter/actions.js

添加 store/modules/counter/index.js

4.vuex入口文件:  store/index.js:

5.修改main.js,将store引入并添加到App中:

6.改造一下 src/components/Hello.vue,把action用上:

   配置eslint ---规范js编码

网上也已经有很多现有的配置了,建议(standard) 
1.配置.eslintrc文件

用了啥就安装啥:npm install --save-dev eslint babel-esli nt eslint-config-standard eslint-plugin-standard eslint-plugin-html eslint-plugin-promis

 webpack生产环境配置 ---对于编译出来的文件进行压缩,提取公共模块等操作

1.添加webpack.config/pro.js文件,相比dev.js把生产环境用不到的删掉,比如webpack-dev-server、webpack-hot-replacement.

extract-text-webpack-plugin 提取css到单独的文件  
compression-webpack-plugin 压缩gzip  
webpack.optimize.UglifyJsPlugin 压缩js文件,内置插件  
.....

2.在package.json中添加运行脚本:"build": "webpack --config webpack.config/pro.js";

3.运行npm run build,可以在dist文件夹中看到打包好的文件~~

webpack+vue的环境搭建到此算是初见雏形了,具体时实际运用还需要更多的实践

安装一些npm包失败: 出现背景:执行npm install --save dev ....时

Webpack + vue 搭建-LMLPHP

查问题shasum check failed

Webpack + vue 搭建-LMLPHP
人话:npm镜像源错误。

解决:1.通过config命令

2.命令行指定

以上两种都可以快速解决安装问题,但治标不治本,下次安装时仍会出现。因此推荐?,直接在配置中指定写死,一劳永逸~

3.编辑  ~/.npmrc 加入如下配置:

npm版本太低报错:

Webpack + vue 搭建-LMLPHP
解决:  
1、首先安装n模块 npm install -g n

2、升级node.js到最新稳定版 n stable 
若确定在最新版本中还是在报错的话,则需要检查是否时webpack.config中配置有错误,webpack@1.xx->webpack@2.xx 各中的(升级特性) 还是很重要的

出现segmentation fault 11报错: 出现背景:在一次需要最新版本的node时,舍弃了$n stable稳定版(因为系统还是提示需要升级最新版)执行 sudo n latest 后升级过慢,中间不够稳定,直接强行被退出。之后再运行,关于npm 和node 的所有命令均在报segmentation fault 11这个错误。

Webpack + vue 搭建-LMLPHP

以为os被玩坏了,系统错乱,吓死宝宝了==。

原因:执行n命令,显示当前没有选中任何版本。 解决:用n命令重新设置要使用的版本 sudo n 版本号
Webpack + vue 搭建-LMLPHP

版本太低的报错

Webpack + vue 搭建-LMLPHP
解决:执行npm install --save-dev eslint-plugin-import@^2.0.0 
npm install --save-dev eslint-plugin-node@4.2.2

05-11 09:36
查看更多