webpack(^2.6.1)css
webpack-dev-server(^2.4.5)html
vue(^2.3.3)vue
vuex(^2.3.1)node
vue-router(^2.5.3)webpack
vue-loader(^12.2.1)git
eslint(^3.19.0)es6
vue.js
vuex
vue-router
vue-loader
webpack2
eslint github
内容至关多,尤为是webpack2教程,官方脚手架vue-cli虽然至关完整齐全,可是修改起来仍是挺花时间,因而本身参照网上的资料和以前作过的项目用到的构建工具地去写了一个简单vue项目脚手架。适用于多页面spa模式的业务场景(每一个模块都是一个spa)。比较简单,主要就是一个webpack.config.js文件,没有说特地地去划分红分webpack.dev.config.js、webpack.prov.config.js等等。下面是整个webpack.config.js文件代码:web
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 // 抽离css 116 new ExtractTextPlugin({ 117 filename: 'static/css/[name].[chunkhash].css', 118 allChunks: true 119 }), 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.js 136 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 // 屏蔽文件超过限制大小的warn 158 performance: { 159 hints: options.dev ? false : 'warning' 160 }, 161 // 生成devtool,保证在浏览器能够看到源代码,生产环境设为false 162 devtool: 'inline-source-map' 163 } 164 165 if (!options.dev) { 166 webpackObj.devtool = false 167 webpackObj.plugins = (webpackObj.plugins || []).concat([ 168 // 压缩js 169 new webpack.optimize.UglifyJsPlugin({ 170 // webpack2,默认为true,能够不用设置 171 compress: { 172 warnings: false 173 } 174 }), 175 // 压缩 loaders 176 new webpack.LoaderOptionsPlugin({ 177 minimize: true 178 }) 179 ]) 180 } 181 182 return webpackObj 183 }
以前项目的webpack.config.js是以对象形式export的,以下vue-router
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参数来调用不一样config 2 const config = require('./config/' + (process.env.npm_config_config || options.config || 'dev'))
将入口文件和模板文件放到modules目录(名字保持一致),webpack文件会经过glob读取modules目录,遍历生成入口文件对象和模板文件数组,以下:
1 const entries = glob.sync('./src/modules/*.js') 2 const entryJsList = {} 3 const entryHtmlList = [] 4 for (const path of entries) { 5 const chunkName = path.slice('./src/modules/'.length, -'.js'.length) 6 entryJsList[chunkName] = path 7 entryHtmlList.push(new HtmlWebpackPlugin({ 8 template: path.replace('.js', '.html'), 9 filename: 'modules/' + chunkName + '.html', 10 chunks: ['manifest', 'vendor', chunkName] 11 })) 12 }
对于HtmlWebpackPlugin插件中几个配置项的意思是,template:模板路径,filename:文件名称,这里为了区分开来模板文件我是放置在dist/modules文件夹中,而对应的编译打包好的js、img(对于图片咱们是使用file-loader、url-loader进行抽离,对于这两个不是很理解的,能够看这里)、css我也是会放在dist/下对应目录的,这样目录会比较清晰。chunks:指定插入文件中的chunk,后面咱们会生成manifest文件、公共vendor、以及对应生成的jscss(名称同样)
开发环境,不须要把css进行抽离,要以style插入html文件中,能够很好实现热替换 生产环境,须要把css进行抽离合并,以下(根据options.dev区分开发和生产):
1 // 处理开发环境和生产环境ExtractTextPlugin的使用状况 2 function cssLoaders(loader, opt) { 3 const loaders = loader.split('!') 4 const opts = opt || {} 5 if (options.dev) { 6 if (opts.extract) { 7 return loader 8 } else { 9 return loaders 10 } 11 } else { 12 const fallbackLoader = loaders.shift() 13 return ExtractTextPlugin.extract({ 14 use: loaders, 15 fallback: fallbackLoader 16 }) 17 } 18 } 19 ... 20 // 使用状况 21 // 注意:须要安装vue-template-compiler,否则编译会报错 22 { 23 test: /\.vue$/, 24 loader: 'vue-loader', 25 options: { 26 loaders: { 27 sass: cssLoaders('vue-style-loader!css-loader!sass-loader', { extract: true }) 28 } 29 } 30 }, 31 ... 32 { 33 test: /\.(scss|sass)$/, 34 use: cssLoaders('style-loader!css-loader!sass-loader') 35 }
再使用ExtractTextPlugin合并抽离到static/css/
目录
cli命令行(webpack -p
)使用process.env.NODE_ENV不如指望效果,使用不了,因此须要使用DefinePlugin插件定义,定义形式'"development"'或JSON.stringify(process.env.NODE_ENV),我使用这样的写法'development',结果报错(针对webpack2),查找了一下网上资料,它是这样讲的,能够去看一下,设置以下:
1 new webpack.DefinePlugin({ 2 'process.env': { 3 NODE_ENV: options.dev ? JSON.stringify('development') : JSON.stringify('production') 4 } 5 })
经过eslint来检查代码的规范性,经过定义一套配置项,来规范代码,这样多人协做,写出来的代码也会比较优雅,很差的地方是,就是配置项太多,有些默认项设置咱们不须要,可是确是到处限制咱们,须要经过配置屏蔽掉,能够经过.eslintrc
文件或是package.json的eslintConfig
,还有其余方式,能够到中文网看,这里我用的是package.json方式,以下:
1 ... 2 "eslintConfig": { 3 "parser": "babel-eslint", 4 "extends": "enough", 5 "env": { 6 "browser": true, 7 "node": true, 8 "commonjs": true, 9 "es6": true 10 }, 11 "rules": { 12 "linebreak-style": 0, 13 "indent": [2, 4], 14 "no-unused-vars": 0, 15 "no-console": 0 16 }, 17 "plugins": [ 18 "html" 19 ] 20 }, 21 ...
咱们还须要安装 npm install eslint eslint-config-enough eslint-loader --save-dev
,eslint-config-enough是所谓的配置文件,这样package.json的内容才能起效,可是不当当是这样,对应编辑器也须要安装对应的插件,sublime text 3须要安装SublimeLinter、SublimeLinter-contrib-eslint插件。对于全部规则的详解,能够去看官网,也能够去这里看,很详细!
因为咱们使用的是vue-loader,天然咱们是但愿能对.vue文件eslint,那么须要安装eslint-plugin-html,在package.json中进行配置。而后对应webpack配置:
1 { 2 enforce: 'pre', 3 test: /.vue$/, 4 loader: 'eslint-loader', 5 exclude: /node_modules/ 6 }
咱们会发现webpack v1和v2之间会有一些不一样,好比webpack1对于预先加载器处理的执行是这样的,
1 module: { 2 preLoaders: [ 3 { 4 test: /\.js$/, 5 loader: "eslint-loader" 6 } 7 ] 8 }
更多的不一样能够到中文网看,很详细,不作拓展。
1 ... 2 alias: { 3 vue: 'vue/dist/vue' 4 }, 5 ...
Vue 最先会打包生成三个文件,一个是 runtime only 的文件 vue.common.js,一个是 compiler only 的文件 compiler.js,一个是 runtime + compiler 的文件 vue.js。vue.js = vue.common.js + compiler.js,默认package.json的main是指向vue.common.js,而template 属性的使用必定要用compiler.js,所以须要在alias改变vue指向
以前的项目中使用的是用express启动http服务,webpack-dev-middleware+webpack-hot-middleware,这里会用到compiler+compilation,这个是webpack的编译器和编译过程的一些知识,也不是很懂,后续要去作作功课,应该能够加深对webpack运行机制的理解。这样作的话,感受复杂不少,对于webpack2.0 devServer彷佛功能更强大更加完善了,因此直接使用就能够了。以下:
1 devServer: { 2 port: 8080, //端口号 3 proxy: { //方向代理 /api/auth/ => http://api.example.dev 4 '/api/auth/': { 5 target: 'http://api.example.dev', 6 changeOrigin: true, 7 pathRewrite: { '^/api': '' } 8 } 9 }, 10 publicPath: config.publicPath, 11 stats: { colors: true } 12 } 13 //changeOrigin会修改HTTP请求头中的Host为target的域名, 这里会被改成api.example.dev 14 //pathRewrite用来改写URL, 这里咱们把/api前缀去掉,直接使用/auth/请求
webpack 2 打包实战讲解得很是好,很是棒。能够去看一下,必定会有所收获!
webpack中文网,讲的还算清楚,不过可能太笨,看起来仍是云里雾里的,似懂非懂的,补补课,好好看看。
Localtunnel 是一个可让内网服务器暴露到公网上的开源项目,使用能够看这里,
1 $ npm install -g localtunnel 2 $ lt --port 8080 3 your url is: https://uhhzexcifv.localtunnel.me
这样的话,能够把咱们的本地网站暂时性地暴露到公网,能够对网站作一些线上线下对比,详细内容能够去了解一下localtunnel,这里讲的是经过上面配置,访问https://uhhzexcifv.localtunnel.me
,没有达到理想效果,出现了Invalid Host header
的错误,由于devServer缺乏一个配置disableHostCheck: true
,这样的一个配置,不少文档上面都没有说明,字面上面的意思不要去检查Host
,这样设置,即可以绕过这一层检验,设置的配置项在optionsSchema.json中,issue能够看这里
webpack3.0完美向下兼容,添加了些新特性,如范围提高,魔法注释 ”Magic Comments(暂时不知道怎么用),升级过程遇到Uncaught TypeError: Cannot read property 'call' of undefined
的错误,最后在HtmlWebpackPlugin插件配置了chunksSortMode: 'dependency'
解决了。
文章内容可能会更新,能够关注github