文章开始之前, 首先推荐一篇文章. 新手向: vue 2.0 的建议学习顺序 https://zhuanlan.zhihu.com/p/23134551
webpack
再做这个工程之前也做过很多调研查看文档, 由于英文是半吊子, 所以大部分查看的是中文文档的搭建, 只有碰到不会的时候才会去官网文档查看文献
感谢大百度, Google,Webpack,Vue 的文献输出.
confg 基础配置目录结
1.entry: 基础目录引入
1.1 引入目录方式
1.1.1 配置输出(我使用的方式)
根目录新建一个 config 文件目录, 专门管理路径配置文件比如: config.json
目录输出内容
html 代码
- {
- path : './build',// 主目录
- publicPath : '//test.webpack.com/dist',// 线上引用地址
- js : [
- { src : './src/js/router.js', dest : 'router/router'},
- ]
- }
webpack.config.js 目录输出
html 代码
- var buildJSON = require('./config/config.json');
- // 万年不变的基础库输出
- var enterDest = {
- // 第三方 jquery 插件
- "lib/jquery" : ['jquery'],
- // 第三方 VUE 插件
- "lib/vue" : ["vue","vue-router"]
- };
- // 遍历目录结构取出业务配置代码
- if( buildJSON.buildJs ){
- buildJSON.js.forEach(function(item){
- var enterDest = item.dest,
- enterSrc = item.src;
- configEntry[enterDest] = enterSrc;
- })
- }
1.1.2 直接查找目录输出(webpack.config.js)
html 代码
- // 引入查询文件引入库
- var glob = require('glob');
- var entry = {};
- glob.sync( '基础目录','{ ui,page,app }/**/*.js' ).forEach( function(filePath){
- var chunk = path.relative(srcPath, filePath).slice(0, -3);
- entry[chunk] = chunk;
- })
output 输出目录结构
html 代码
- output : {
- // 对外输出路径
- path : path.join(__dirname, buildUrl),
- chunkFilename : '[name].js',// 这个跟后期 vue-router 分文件目录打包有直接关系, 具体为什么会这样目前不清楚
- publicPath : ROOT_STATIC_URL,
- filename : '[name].js'//.[chunkhash:8]
- }
resolve 忽略文件编译(百度或者 Google 有很多解决方案, 打包编译耗时问题)
至于 MD5 值文件目录管理其实很简单一句话 [chunkhash:8] 数字代表着你要用几位数字代表你的文件名或者目录名
module:Object // 模块加载方式
5.1 loaders : 加载规则, 由于我没有用 sass 或者 less 或者 coffee 所以没有做任何处理
5.2 Plugins
html 代码
- var ExtractTextPlugin = require("extract-text-webpack-plugin");
- // 编译 HTML 代码管理
- var HtmlWebpackPlugin = require('html-webpack-plugin');
- // 模块加载方式
- module : {
- loaders : [
- // 独立编译 VUE 组件化 WebComponent
- {
- test : /\.vue/,
- loader : 'vue',
- devtool: 'source-map',
- exclude : /node_modules/
- },
- //CSS 独立加载
- {
- test : /\.css$/,
- loader : ExtractTextPlugin.extract( 'style-loader','css-loader' )
- },
- //images 独立提取
- {
- test : /\.(png|jpe?g|gif)$/,
- loader : "file-loader?name=images/[hash:8].[name].[ext]"
- }
- ]
- },
- plugins : [
- // 提取第三方库
- new webpack.optimize.CommonsChunkPlugin({
- name : ['lib/jquery','lib/vue','lib/common'],
- minChunks : 3
- }),
- // 提取公用模块变量
- new webpack.ProvidePlugin( {
- $ : 'jquery',
- Vue : 'vue',
- VueRouter : 'vue-router'
- }),
- //// 插入 HTML 代码编译包括自定生成按序的文件目录
- new HtmlWebpackPlugin({
- title: 'Hello World app',
- template : path.resolve( TEM_PATH,'index.html' ),
- filename : 'template/index.html',
- chunksSortMode : 'dependency',//dependency-- 依赖生成页面
- inject : "body"
- }),
- // 独立编译 css
- new ExtractTextPlugin("[name].css",{ allChunks : true,resolve : ['modules'] })
- ]
- VUE+Vue-router
VUE 基础使用和说明直接去看官网
VUE 官网 http://vuejs.org/
Vue-Router API 官网
目录文件管理
html 代码
- webcomponent/
- timeout/timeout.vue
- <style type="text/css">
- .timeout{
- width: 200px;
- height: 100px;
- background: red;
- }
- </style>
- <template>
- <div class="container" id="app">
- <h2 class="red">the Number is_{{count}}_times</h2>
- </div>
- </template>
- <script>
- module.exports = {
- data : function(){
- return {
- count : 0
- }
- },
- ready : function(){
- var _this = this;
- console.log(11)
- this.handle = setInterval(function(){
- _this.count++;
- },1e3 );
- },
- destroyed : function(){
- clearInterval( this.handle )
- }
- }
- </script>
- index/index.vue
- <style type="text/css">
- .index{
- background: blue;
- color: #fff;
- }
- </style>
- <template>
- <div class="X6jHbb"></div>
- <p>
- This is {{ index }} Test
- </p>
- <p class="test">
- -----------
- </p>
- <div class="timeout">
- <word></word>
- </div>
- </template>
- <script type="text/javascript">
- // 引入模块路径文件
- var Counter = require( ./timeout.vue' );
- module.exports = {
- components : {
- word : Counter
- },
- data : function(){
- return {
- index : "index.html"
- }
- },
- ready : function(){
- //
- }
- };
- </script>
- //.... 依次类推目录文件分模块管理
- /page/page.vue
- <style type="text/css">
- .page{
- background: green;
- }
- </style>
- <template>
- <div class="test">
- This is {{ page }};
- </div>
- </template>
- <script type="text/javascript">
- module.exports = {
- data : function(){
- return {
- page : "page Test"
- }
- }
- }
- </script>
路由文件管理
2.1 路由文件打包生成一个文件
html 代码
- // 初始化告诉 VUE 使用路由模块, 对外暴漏的全局变量为 VueRouter
- Vue.use( VueRouter )
- // 创建一个路由实例
- var router = new VueRouter();
- // 路由阻止 404 页面
- router.redirect({
- '*' : '/index'
- })
- // 分发路由关系
- router.map({
- '/index' : {
- component : require('../webcomponent/index/index.vue')
- },
- '/page' : {
- component : require('../webcomponent/page/page.vue')
- }
- })
- var App = Vue.extend({})
- router.start(App, '#app')
2.2 路由文件独立管理每一个模块的文件, 通过路由关系去输出 JS, 如果项目体积特别大是很值得这样做的.
html 代码
- // 初始化告诉 VUE 使用路由模块, 对外暴漏的全局变量为 VueRouter
- Vue.use( VueRouter )
- // 创建一个路由实例
- var router = new VueRouter();
- // 路由阻止 404 页面
- router.redirect({
- '*' : '/index'
- })
- // 分发路由关系
- router.map({
- '/index' : {
- component : function( reslove ){
- // 目前官网书写方式
- require( ["../webcomponent/index/index.vue"],resolve );
- // 这样写的有个不好的方式是, 编译之后的文件管理不方便, 而且生成的文件名一连串莫名其妙的数字, 对于有目录概念的人是很难接受编译之后的文件
- // 比如会是这样 0.0.js, 1.1.js
- // 我可能猜测是这样的 vue-loader 跑出给 webpack 的代码, 没有特别标识, webpack 也不认识, 既然你不给我标识那我就自己根据我协议 id 关系给你生成一个数字文件目录.
- // 曾经也提交过这样的问题给 Vue-router 作者, 不过由于这不是路由自身的问题, 所以不了了之
- // 之后查阅了 webpack 官网, 他的确提出了这样的解决方案: require.ensure([],function(){});
- // 代码如下:
- require.ensure(["../webcomponent/index/index.vue"], function(require) {
- require( ["../webcomponent/index/index.vue"],resolve );
- },'component/module-index');// 目录结构 / 文件名
- require.ensure(["../webcomponent/page/page.vue"], function(require) {
- require( ["../webcomponent/page/page.vue"],resolve );
- },'component/module-page');// 目录结构 / 文件名
- // 这样的确能解决自定义命名和文件目录 但是生成的文件或者文件名你会惊奇的发现会是这样的
- // 3.component/index.vue 奇异的数字加符号开头文件
- // 这样就使用到我上面提过的 output 中的 chunkFilename 这个属性去完美解决数字目录问题
- }
- },
- '/page' : {
- component : require('../webcomponent/page/page.vue')
- }
- })
- var App = Vue.extend({})
- router.start(App, '#app')
来源: http://www.qdfuns.com/article/42141/b73b9592c06b26281963e8a286017915.html