配置参数

vayne 包装了一些 webpack 的配置项 所提供的配置参数满足多数项目的基本需求

• entry
• output
• template
• plugins
• externals
• alias
• extensions
• include
• urlLoaderLimit
• context
• vayne 的默认配置
• dev.port
• dev.proxyTable
• build.assetsRoot
• build.assetsSubDirectory
• build.assetsPublicPath
• build.productionSourceMap

entry

与 webpack 的 entry 一致，入口文件。接受 String|Array|Object 类型 默认

{
  app: './src/index.js'
}

output

与 webpack 的 output 一致 不过默认我已经处理了 所以无需配置 默认

{
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
    ? config.build.assetsPublicPath
    : config.dev.assetsPublicPath
}

template

模板入口 默认是 src/index.tpl

plugins

通过引入 不同的插件 可以引入额外的配置和依赖 目前提供的插件 见 vaynejs 集合 插件文档见 plugins 默认直接 String|Function 类型 以可创建自己的插件来使用见 create plugins

examples:

'use strict'
const path = require('path')

module.exports = {
  plugins: [
    // require('./vayne.plugin.angular') 直接使用
    'vayne-plugin-angularjs' //  npm 使用
    // 'angularjs' npm 简写使用
  ],
  externals: {
    'angular': 'angular',
    'angular-ui-router': '"ui.router"',
    'angular-animate': '"ngAnimate"',
    'angular-aria': '"ngAria"',
    'angular-material': '"ngMaterial"',
    'jquery': 'jQuery'
  }
}

externals

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖 接受 String|Array|Object|Function|Regex 类型与 webpack 的 externals 一致

alias

创建 import 或 require 的别名，来确保模块引入变得更简单。例如，一些位于 src/ 文件夹下的常用模块：同 webpack resolve.alias 新加入的alias 和默认的alias 会累加

默认

{
  'vue$': 'vue/dist/vue.esm.js',
  'assets': paths.resolveApp('src/assets'),
  '@': paths.resolveApp('src'),
  '*': paths.appDirectory
}

extensions

自动解析确定的扩展。默认值为

['.js', '.vue', '.json']

include

babel-loader vue-loader 的 include 同webpack loader 的 include

urlLoaderLimit

url-loader Limit 属性 详见 url-loader options

context

基础目录，绝对路径，用于从配置中解析入口起点(entry point)和 loader 同webpack config 默认是当前跟项目

vayne 的默认配置

vayne 的默认配置

'use strict'
const path = require('path')
const cwd = process.cwd()

// 默认 vayne 配置
module.exports = {
  entry: {
    app: './src/index.js'
  },
  dev: {
    env: {
      NODE_ENV: '"development"'
    },
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
    },
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 9000, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,
    /**
     * Source Maps
     */
    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,
    // 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: true
  },

  build: {
    env: {
      NODE_ENV: '"production"'
    },
    // Template for index.html
    index: path.resolve(cwd, 'dist/index.html'),
    // Paths
    assetsRoot: path.resolve(cwd, 'dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */
    devtool: '#source-map',
    bundleAnalyzerReport: false
  }
}

dev.port

Specify the port for the dev server to listen to.

dev.proxyTable

代理见 proxy

build.assetsRoot

Must be an absolute path on your local file system.

This should point to the root directory that contains all the static assets for your app. For example, public/ for both Rails/Laravel.

build.assetsSubDirectory

Nest webpack-generated assets under this directory in build.assetsRoot, so that they are not mixed with other files you may have in build.assetsRoot. For example, if build.assetsRoot is /path/to/dist, and build.assetsSubDirectory is static, then all Webpack assets will be generated in path/to/dist/static .This directory will be cleaned before each build, so it should only contain assets generated by the build.

Files inside static/ will be copied into this directory as-is during build. This means if you change this prefix, all your absolute URLs referencing files in static/ will also need to be changed. See Handling Static Assets for more details.

build.assetsPublicPath

This should be the URL path where your build.assetsRoot will be served from over HTTP. In most cases, this will be root (/). Only change this if your backend framework serves static assets with a path prefix. Internally, this is passed to Webpack as output.publicPath.

build.productionSourceMap

Whether to generate source maps for production build