简单vue项目脚手架（vue+webpack2.0+vuex+vue-router）

发布时间：2017-06-09 15:22:13.373作者：IT网络文摘

github地址(内含简单例子)

使用技术栈

webpack(^2.6.1)
webpack-dev-server(^2.4.5)
vue(^2.3.3)
vuex(^2.3.1)
vue-router(^2.5.3)
vue-loader(^12.2.1)
eslint(^3.19.0)

需要学习的知识

vue.js
vuex
vue-router
vue-loader
webpack2
eslint

内容相当多，尤其是webpack2教程，官方脚手架vue-cli虽然相当完整齐全，但是修改起来还是挺花时间，于是自己参照网上的资料和之前做过的项目用到的构建工具地去写了一个简单vue项目脚手架。适用于多页面spa模式的业务场景（每个模块都是一个spa）。比较简单,主要就是一个webpack.config.js文件，没有说特意地去划分成分webpack.dev.config.js、webpack.prov.config.js等等。下面是整个webpack.config.js文件代码：

  1 const { resolve } = require('path')  2 const webpack = require('webpack')  3 const HtmlWebpackPlugin = require('html-webpack-plugin')  4 const ExtractTextPlugin = require('extract-text-webpack-plugin')  5 const glob = require('glob')  6   7 module.exports = (options = {}) => {  8     // 配置文件，根据 run script不同的config参数来调用不同config  9     const config = require('./config/' + (process.env.npm_config_config || options.config || 'dev')) 10     // 遍历入口文件，这里入口文件与模板文件名字保持一致，保证能同时合成HtmlWebpackPlugin数组和入口文件数组 11     const entries = glob.sync('./src/modules/*.js') 12     const entryJsList = {} 13     const entryHtmlList = [] 14     for (const path of entries) { 15         const chunkName = path.slice('./src/modules/'.length, -'.js'.length) 16         entryJsList[chunkName] = path 17         entryHtmlList.push(new HtmlWebpackPlugin({ 18             template: path.replace('.js', '.html'), 19             filename: 'modules/' + chunkName + '.html', 20             chunks: ['manifest', 'vendor', chunkName] 21         })) 22     } 23     // 处理开发环境和生产环境ExtractTextPlugin的使用情况 24     function cssLoaders(loader, opt) { 25         const loaders = loader.split('!') 26         const opts = opt || {} 27         if (options.dev) { 28             if (opts.extract) { 29                 return loader 30             } else { 31                 return loaders 32             } 33         } else { 34             const fallbackLoader = loaders.shift() 35             return ExtractTextPlugin.extract({ 36                 use: loaders, 37                 fallback: fallbackLoader 38             }) 39         } 40     } 41  42     const webpackObj = { 43         entry: Object.assign({ 44             vendor: ['vue', 'vuex', 'vue-router'] 45         }, entryJsList), 46         // 文件内容生成哈希值chunkhash，使用hash会更新所有文件 47         output: { 48             path: resolve(__dirname, 'dist'), 49             filename: options.dev ? 'static/js/[name].js' : 'static/js/[name].[chunkhash].js', 50             chunkFilename: 'static/js/[id].[chunkhash].js', 51             publicPath: config.publicPath 52         }, 53  54         externals: { 55  56         }, 57  58         module: { 59             rules: [ 60                 // 只 lint 本地 *.vue 文件，需要安装eslint-plugin-html，并配置eslintConfig（package.json） 61                 { 62                     enforce: 'pre', 63                     test: /.vue$/, 64                     loader: 'eslint-loader', 65                     exclude: /node_modules/ 66                 }, 67                 /* 68                     http://blog.guowenfh.com/2016/08/07/ESLint-Rules/ 69                     http://eslint.cn/docs/user-guide/configuring 70                     [eslint资料] 71                  */ 72                 { 73                     test: /\.js$/, 74                     exclude: /node_modules/, 75                     use: ['babel-loader', 'eslint-loader'] 76                 }, 77                 // 需要安装vue-template-compiler，不然编译报错 78                 { 79                     test: /\.vue$/, 80                     loader: 'vue-loader', 81                     options: { 82                         loaders: { 83                             sass: cssLoaders('vue-style-loader!css-loader!sass-loader', { extract: true }) 84                         } 85                     } 86                 }, 87                 { 88                     // 需要有相应的css-loader，因为第三方库可能会有文件 89                     // （如：element-ui） css在node_moudle 90                     // 生产环境才需要code抽离，不然的话，会使热重载失效 91                     test: /\.css$/, 92                     use: cssLoaders('style-loader!css-loader') 93                 }, 94                 { 95                     test: /\.(scss|sass)$/, 96                     use: cssLoaders('style-loader!css-loader!sass-loader') 97                 }, 98                 { 99                     test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,100                     use: [101                         {102                             loader: 'url-loader',103                             options: {104                                 limit: 10000,105                                 name: 'static/imgs/[name].[ext]?[hash]'106                             }107                         }108                     ]109                 }110             ]111         },112 113         plugins: [114             ...entryHtmlList,115             // 抽离css116             new ExtractTextPlugin({117                 filename: 'static/css/[name].[chunkhash].css',118                 allChunks: true119             }),120             // 抽离公共代码121             new webpack.optimize.CommonsChunkPlugin({122                 names: ['vendor', 'manifest']123             }),124             // 定义全局常量125             // cli命令行使用process.env.NODE_ENV不如期望效果，使用不了，所以需要使用DefinePlugin插件定义，定义形式'"development"'或JSON.stringify('development')126             new webpack.DefinePlugin({127                 'process.env': {128                     NODE_ENV: options.dev ? JSON.stringify('development') : JSON.stringify('production')129                 }130             })131 132         ],133 134         resolve: {135             // require时省略的扩展名，不再需要强制转入一个空字符串，如：require('module') 不需要module.js136             extensions: ['.js', '.json', '.vue', '.scss', '.css'],137             // require路径简化138             alias: {139                 '~': resolve(__dirname, 'src'),140                 // Vue 最早会打包生成三个文件，一个是 runtime only 的文件 vue.common.js，一个是 compiler only 的文件 compiler.js，一个是 runtime + compiler 的文件 vue.js。141                 // vue.js = vue.common.js + compiler.js，默认package.json的main是指向vue.common.js，而template 属性的使用一定要用compiler.js，因此需要在alias改变vue指向142                 vue: 'vue/dist/vue'143             },144             // 指定import从哪个目录开始查找145             modules: [146                 resolve(__dirname, 'src'),147                 'node_modules'148             ]149         },150         // 开启http服务，publicPath => 需要与Output保持一致 || proxy => 反向代理 || port => 端口号151         devServer: config.devServer ? {152             port: config.devServer.port,153             proxy: config.devServer.proxy,154             publicPath: config.publicPath,155             stats: { colors: true }156         } : undefined,157         // 屏蔽文件超过限制大小的warn158         performance: {159             hints: options.dev ? false : 'warning'160         },161         // 生成devtool，保证在浏览器可以看到源代码，生产环境设为false162         devtool: 'inline-source-map'163     }164 165     if (!options.dev) {166         webpackObj.devtool = false167         webpackObj.plugins = (webpackObj.plugins || []).concat([168             // 压缩js169             new webpack.optimize.UglifyJsPlugin({170                 // webpack2，默认为true，可以不用设置171                 compress: {172                     warnings: false173                 }174             }),175             //  压缩 loaders176             new webpack.LoaderOptionsPlugin({177                 minimize: true178             })179         ])180     }181 182     return webpackObj183 }

上面的代码对于每个配置项都有注释说明，这里有几点需要注意的：

1. webpack.config.js导出的是一个function

之前项目的webpack.config.js是以对象形式export的，如下

1 module.exports = {2     entry: ...,3     output: {4         ...5     },6     ...7 }

而现在倒出来的是一个function，如下：

1 module.exports = (options = {}) => { 
2     return {3         entry: ...,4         output: {5             ...6         },7         ...8     }9 }

这样的话，function会在执行webpack CLI的时候获取webpack的参数，通过options传进function，看一下package.json：

1     "local": "npm run dev --config=local",2     "dev": "webpack-dev-server -d --hot --inline --env.dev --env.config dev",3     "build": "rimraf dist && webpack -p --env.config prod" //rimraf清空dist目录

对于local命令，我们执行的是dev命令，但是在最后面会--config=local，这是配置，这样我们可以通过process.env.npm_config_config获取到，而对于dev命令，对于--env XXX，我们便可以在function获取option.config= 'dev' 和 option.dev= true的值，特别方便！以此便可以同步参数来加载不同的配置文件了。对于-d、-p不清楚的话，可以这里查看,很详细！

1     // 配置文件，根据 run script不同的config参数来调用不同config2     const config = require('./config/' + (process.env.npm_config_config || options.config || 'dev'))
http://www.cnblogs.com/wuxiaobin/p/6970233.html

分类导航