对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
当我们需要和后台分离部署的时候,必须配置config/index.js:
用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置)
- var path = require('path')
- module.exports = {
- build: {
- index: path.resolve(__dirname, 'dist/index.html'),
- assetsRoot: path.resolve(__dirname, 'dist'),
- assetsSubDirectory: 'static',
- assetsPublicPath: '/',
- productionSourceMap: true
- },
- dev: {
- port: 8080,
- proxyTable: {}
- }
- }
在'build'部分,我们有以下选项:
build.index
必须是本地文件系统上的绝对路径。
index.html
(带着插入的资源路径) 会被生成。
如果你在后台框架中使用此模板,你可以编辑index.html
路径指定到你的后台程序生成的文件。例如Rails程序,可以是app/views/layouts/application.html.erb
,或者Laravel程序,可以是resources/views/index.blade.php
。
build.assetsRoot
必须是本地文件系统上的绝对路径。
应该指向包含应用程序的所有静态资产的根目录。public/
对应Rails/Laravel。
build.assetsSubDirectory
被webpack编译处理过的资源文件都会在这个build.assetsRoot
目录下,所以它不可以混有其它可能在build.assetsRoot
里面有的文件。例如,假如build.assetsRoot
参数是/path/to/dist
,build.assetsSubDirectory
参数是 static
, 那么所以webpack资源会被编译到path/to/dist/static
目录。
每次编译前,这个目录会被清空,所以这个只能放编译出来的资源文件。
static/
目录的文件会直接被在构建过程中,直接拷贝到这个目录。这意味着是如果你改变这个规则,所有你依赖于static/
中文件的绝对地址,都需要改变。
build.assetsPublicPath【资源的根目录】
这个是通过http服务器运行的url路径。在大多数情况下,这个是根目录(/
)。如果你的后台框架对静态资源url前缀要求,你仅需要改变这个参数。在内部,这个是被webpack当做output.publicPath
来处理的。
后台有要求的话一般要加上./ 或者根据具体目录添加,不然引用不到静态资源
build.productionSourceMap
在构建生产环境版本时是否开启source map。
dev.port
开发服务器监听的特定端口
dev.proxyTable
定义开发服务器的代理规则。
项目中配置的config/index.js,有dev和production两种环境的配置 以下介绍的是production环境下的webpack配置的理解
- var path = require('path')
- module.exports = {
- build: { // production 环境
- env: require('./prod.env'), // 使用 config/prod.env.js 中定义的编译环境
- index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的 index.html 文件
- assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径
- assetsSubDirectory: 'static', // 编译输出的二级目录
- assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
- productionSourceMap: true, // 是否开启 cssSourceMap
- // Gzip off by default as many popular static hosts such as
- // Surge or Netlify already gzip all static assets for you.
- // Before setting to `true`, make sure to:
- // npm install --save-dev compression-webpack-plugin
- productionGzip: false, // 是否开启 gzip
- productionGzipExtensions: ['js', 'css'] // 需要使用 gzip 压缩的文件扩展名
- },
- dev: { // dev 环境
- env: require('./dev.env'), // 使用 config/dev.env.js 中定义的编译环境
- port: 8080, // 运行测试页面的端口
- assetsSubDirectory: 'static', // 编译输出的二级目录
- assetsPublicPath: '/', // 编译发布的根目录,可配置为资源服务器域名或 CDN 域名
- proxyTable: {}, // 需要 proxyTable 代理的接口(可跨域)
- // CSS Sourcemaps off by default because relative paths are "buggy"
- // with this option, according to the CSS-Loader README
- // (https://github.com/webpack/css-loader#sourcemaps)
- // In our experience, they generally work as expected,
- // just be aware of this issue when enabling this option.
- cssSourceMap: false // 是否开启 cssSourceMap
- }
- }
下面是vue中的build/webpack.base.conf.js
- //引入依赖模块
- var path = require('path')
- var config = require('../config') // 获取配置
- var utils = require('./utils')
- var projectRoot = path.resolve(__dirname, '../')
- var env = process.env.NODE_ENV
- // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
- // various preprocessor loaders added to vue-loader at the end of this file
- var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)/* 是否在 dev 环境下开启 cssSourceMap ,在 config/index.js 中可配置 */
- var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)/* 是否在 production 环境下开启 cssSourceMap ,在 config/index.js 中可配置 */
- var useCssSourceMap = cssSourceMapDev || cssSourceMapProd /* 最终是否使用 cssSourceMap */
- module.exports = {
- entry: { // 配置webpack编译入口
- app: './src/main.js'
- },
- output: { // 配置webpack输出路径和命名规则
- path: config.build.assetsRoot, // webpack输出的目标文件夹路径(例如:/dist)
- publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, // webpack编译输出的发布路径(判断是正式环境或者开发环境等)
- filename: '[name].js' // webpack输出bundle文件命名格式,基于文件的md5生成Hash名称的script来防止缓存
- },
- resolve: {
- extensions: ['', '.js', '.vue', '.scss'], //自动解析确定的拓展名,使导入模块时不带拓展名
- fallback: [path.join(__dirname, '../node_modules')],
- alias: { // 创建import或require的别名,一些常用的,路径长的都可以用别名
- 'vue$': 'vue/dist/vue',
- 'src': path.resolve(__dirname, '../src'),
- 'assets': path.resolve(__dirname, '../src/assets'),
- 'components': path.resolve(__dirname, '../src/components'),
- 'scss_vars': path.resolve(__dirname, '../src/styles/vars.scss')
- }
- },
- resolveLoader: {
- fallback: [path.join(__dirname, '../node_modules')]
- },
- module: {
- loaders: [
- {
- test: /\.vue$/, // vue文件后缀
- loader: 'vue' //使用vue-loader处理
- },
- {
- test: /\.js$/,
- loader: 'babel',
- include: projectRoot,
- exclude: /node_modules/
- },
- {
- test: /\.json$/,
- loader: 'json'
- },
- {
- test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
- loader: 'url',
- query: {
- limit: 10000,
- name: utils.assetsPath('img/[name].[hash:7].[ext]')
- }
- },
- {
- test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
- loader: 'url',
- query: {
- limit: 10000,
- name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
- }
- }
- ]
- },
- vue: { // .vue 文件配置 loader 及工具 (autoprefixer)
- loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), //// 调用cssLoaders方法返回各类型的样式对象(css: loader)
- postcss: [
- require('autoprefixer')({
- browsers: ['last 2 versions']
- })
- ]
- }
- }
webpack.prod.conf.js 生产环境下的配置文件
- var path = require('path')
- var config = require('../config')
- var utils = require('./utils')
- var webpack = require('webpack')
- var merge = require('webpack-merge')// 一个可以合并数组和对象的插件
- var baseWebpackConfig = require('./webpack.base.conf')
- // 用于从webpack生成的bundle中提取文本到特定文件中的插件
- // 可以抽取出css,js文件将其与webpack输出的bundle分离
- var ExtractTextPlugin = require('extract-text-webpack-plugin') //如果我们想用webpack打包成一个文件,css js分离开,需要这个插件
- var HtmlWebpackPlugin = require('html-webpack-plugin')// 一个用于生成HTML文件并自动注入依赖文件(link/script)的webpack插件
- var env = config.build.env
- // 合并基础的webpack配置
- var webpackConfig = merge(baseWebpackConfig, {
- // 配置样式文件的处理规则,使用styleLoaders
- module: {
- loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
- },
- devtool: config.build.productionSourceMap ? '#source-map' : false, // 开启source-map,生产环境下推荐使用cheap-source-map或source-map,后者得到的.map文件体积比较大,但是能够完全还原以前的js代码
- output: {
- path: config.build.assetsRoot,// 编译输出目录
- filename: utils.assetsPath('js/[name].[chunkhash].js'), // 编译输出文件名格式
- chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') // 没有指定输出名的文件输出的文件名格式
- },
- vue: { // vue里的css也要单独提取出来
- loaders: utils.cssLoaders({ // css加载器,调用了utils文件中的cssLoaders方法,用来返回针对各类型的样式文件的处理方式,
- sourceMap: config.build.productionSourceMap,
- extract: true
- })
- },
- // 重新配置插件项
- plugins: [
- // http://vuejs.github.io/vue-loader/en/workflow/production.html
- // 位于开发环境下
- new webpack.DefinePlugin({
- 'process.env': env
- }),
- new webpack.optimize.UglifyJsPlugin({// 丑化压缩代码
- compress: {
- warnings: false
- }
- }),
- new webpack.optimize.OccurenceOrderPlugin(),
- // extract css into its own file
- new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), // 抽离css文件
- // generate dist index.html with correct asset hash for caching.
- // you can customize output by editing /index.html
- // see https://github.com/ampedandwired/html-webpack-plugin
- // filename 生成网页的HTML名字,可以使用/来控制文件文件的目录结构,最
- // 终生成的路径是基于webpac配置的output.path的
- new HtmlWebpackPlugin({
- // 生成html文件的名字,路径和生产环境下的不同,要与修改后的publickPath相结合,否则开启服务器后页面空白
- filename: config.build.index,
- // 源文件,路径相对于本文件所在的位置
- template: 'index.html',
- inject: true,// 要把<script>标签插入到页面哪个标签里(body|true|head|false)
- minify: {
- removeComments: true,
- collapseWhitespace: true,
- removeAttributeQuotes: true
- // more options:
- // https://github.com/kangax/html-minifier#options-quick-reference
- },
- // necessary to consistently work with multiple chunks via CommonsChunkPlugin
- chunksSortMode: 'dependency'
- }),
- // 如果文件是多入口的文件,可能存在,重复代码,把公共代码提取出来,又不会重复下载公共代码了
- // (多个页面间会共享此文件的缓存)
- // CommonsChunkPlugin的初始化常用参数有解析?
- // name: 这个给公共代码的chunk唯一的标识
- // filename,如何命名打包后生产的js文件,也是可以用上[name]、[hash]、[chunkhash]
- // minChunks,公共代码的判断标准:某个js模块被多少个chunk加载了才算是公共代码
- // split vendor js into its own file
- new webpack.optimize.CommonsChunkPlugin({
- name: 'vendor',
- minChunks: function (module, count) {
- // any required modules inside node_modules are extracted to vendor
- return (
- module.resource &&
- /\.js$/.test(module.resource) &&
- module.resource.indexOf(
- path.join(__dirname, '../node_modules')
- ) === 0
- )
- }
- }),
- // extract webpack runtime and module manifest to its own file in order to
- // prevent vendor hash from being updated whenever app bundle is updated
- new webpack.optimize.CommonsChunkPlugin({ // 为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多的模块,并为它们分配最小的ID
- name: 'manifest',
- chunks: ['vendor']
- })
- ]
- })
- // gzip模式下需要引入compression插件进行压缩
- if (config.build.productionGzip) {
- var CompressionWebpackPlugin = require('compression-webpack-plugin')
- webpackConfig.plugins.push(
- new CompressionWebpackPlugin({
- asset: '[path].gz[query]',
- algorithm: 'gzip',
- test: new RegExp(
- '\\.(' +
- config.build.productionGzipExtensions.join('|') +
- ')$'
- ),
- threshold: 10240,
- minRatio: 0.8
- })
- )
- }
- module.exports = webpackConfig
vue 中build/build.js页面
- // https://github.com/shelljs/shelljs
- require('./check-versions')() // 检查 Node 和 npm 版本
- require('shelljs/global') // 使用了 shelljs 插件,可以让我们在 node 环境的 js 中使用 shell
- env.NODE_ENV = 'production'
- var path = require('path')
- var config = require('../config') // 加载 config.js
- var ora = require('ora') // 一个很好看的 loading 插件
- var webpack = require('webpack') // 加载 webpack
- var webpackConfig = require('./webpack.prod.conf') // 加载 webpack.prod.conf
- console.log( // 输出提示信息 ~ 提示用户请在 http 服务下查看本页面,否则为空白页
- ' Tip:\n' +
- ' Built files are meant to be served over an HTTP server.\n' +
- ' Opening index.html over file:// won\'t work.\n'
- )
- var spinner = ora('building for production...') // 使用 ora 打印出 loading + log
- spinner.start() // 开始 loading 动画
- /* 拼接编译输出文件路径 */
- var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
- rm('-rf', assetsPath) /* 删除这个文件夹 (递归删除) */
- mkdir('-p', assetsPath) /* 创建此文件夹 */
- cp('-R', 'static/*', assetsPath) /* 复制 static 文件夹到我们的编译输出目录 */
- webpack(webpackConfig, function (err, stats) { // 开始 webpack 的编译
- // 编译成功的回调函数
- spinner.stop()
- if (err) throw err
- process.stdout.write(stats.toString({
- colors: true,
- modules: false,
- children: false,
- chunks: false,
- chunkModules: false
- }) + '\n')
- })
项目入口,由package.json 文件可以看出
- "scripts": {
- "dev": "node build/dev-server.js",
- "build": "node build/build.js",
- "watch": "node build/build-watch.js"
- },
当我们执行 npm run dev / npm run build / npm run watch时运行的是 node build/dev-server.js 或 node build/build.js 或node build/build-watch.js
node build/build-watch.js 是我配置的载production环境的配置基础上在webpack的配置模块加上 watch:true 便可实现代码的实时编译
对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置的更多相关文章
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数
1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- vue-cli脚手架npm相关文件解读(9)config/index.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue -- config index.js 配置文件详解
此文章介绍vue-cli脚手架config目录下index.js配置文件 此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单 ...
- vue-cli下面的config/index.js注解 webpack.base.conf.js注解
config/indexjs详解上代码: 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io ...
- Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果
你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...
- config/index.js
// see http://vuejs-templates.github.io/webpack for documentation.var path = require('path') module. ...
- vue中html、css、js 分离
在正常的创建和引用vue文件都是html.css.js三者在一起的,这样写起来虽然方便了,但是页面比较大或者代码比较多的情况下,即使使用组件有时代码也比较多,简单来说查找不变不利于编程,大的来说影像优 ...
- webpack / vue项目 config/index.js配置(用于配置webpack服务器代理)
'use strict' // Template version: 1.1.3 // see http://vuejs-templates.github.io/webpack for document ...
随机推荐
- 关闭win7/Server 2008非正常关机启动自动修复功能
命令提示符下输入 bcdedit /set {default} bootstatuspolicy ignoreallfailures bcdedit /set {current} recoveryen ...
- 第二部分shell编程2正则(grepegrepsedawk)
一.grep/egrep 1. 语法+选项语法: grep [-cinvABC] 'word' filename -c :打印符合要求的行数-n :在输出符合要求的行的同时连同行号一起输出 -v :打 ...
- 抽象类 C#
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- ipython matplotlib
matplotlib实际上是一套面向对象的绘图库,它所绘制的图表中的每个绘图元素,例如线条Line2D.文字Text.刻度等在内存中都有一个对象与之对应.为了方便快速绘图matplotlib通过pyp ...
- Spring Boot 运行原理
Spring Boot并没有任何新的技术,全都是基于Spring4提供的技术,用优秀的设计,为Web开发提供了一套新的方式. 在HelloWorld中,我们没有进行任何显示的配置,但是程序还是运行起来 ...
- [BZOJ4942] [NOI2017]整数
题目背景 在人类智慧的山巅,有着一台字长为1048576位(此数字与解题无关)的超级计算机,著名理论计算机科 学家P博士正用它进行各种研究.不幸的是,这天台风切断了电力系统,超级计算机 无法工作,而 ...
- [洛谷P2742]【模板】二维凸包([USACO5.1]圈奶牛Fencing the Cows)
题目大意:求一个点集凸包边长 题解:求凸包,直接求 卡点:发现在较后面数位上有较小的误差,还以为是浮点数误差,最后发现是构造函数写成了$int$类型 C++ Code: #include <al ...
- POJ1523:SPF——题解
http://poj.org/problem?id=1523 这题明显就是求割点然后求割完之后的强连通分量的个数. 割点都会求,怎么求割完的分量个数呢? 我们可以通过万能的并查集啊!(具体做法看代码吧 ...
- BZOJ4003:[JLOI2015]城池攻占——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=4003 https://www.luogu.org/problemnew/show/P3261 小铭 ...
- UVA.297 Quadtrees (四分树 DFS)
UVA.297 Quadtrees (四分树 DFS) 题意分析 将一个正方形像素分成4个小的正方形,接着根据字符序列来判断是否继续分成小的正方形表示像素块.字符表示规则是: p表示这个像素块继续分解 ...