vue 不识别svg_使用vue-cli和webpack从0到1搭建完整的vue工程化项目（2）-webpack查看...

习惯了vue-cli之前的版本，通常会在目录中存在webpack.config.js文件，你是否会疑惑为什么在在目录下不存在webpack配置文件呢？

[webpack 相关 | Vue CLI](webpack 相关 | Vue CLI)

vue-cli中关于webpack配置有相关的说明。vue-cli对webpack配置进行了抽象，所以理解起来会比较困难。那么，应该如何查看当前项目的webpack配置呢？有以下几种方法。

1. 使用vue ui命令，使用可视化的界面来进行查看。

刚进入可视化页面时，需要先导入当前的目录，如图选择目录，并点击【导入这个文件夹】

导入之后便可以在项目列表中看到该项目。点击项目进入详细配置界面，可以配置项目的插件、依赖等。

在任务中选择inspect ，点击运行即可展现出webpack配置项目

2. 使用vue inspect命令

vue inspect // 直接在命令行中输出webpack配置
vue inspect > output.js // 可以输出webpack配置到特定文件

现将webpack文件列出，下一篇系列文章会对webpack配置进行解析

想了解关于创建项目的过程，请前往往期文章查看项目创建的过程。

黄小鱼：使用vue-cli和webpack从0到1搭建完整的vue工程化项目（1）-项目创建​zhuanlan.zhihu.com

{
  mode: 'development',
  context: '/Users/huangcongcong/learnvue/demo',
  node: {
    setImmediate: false,
    process: 'mock',
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  output: {
    path: '/Users/huangcongcong/learnvue/demo/dist',
    filename: 'js/[name].js',
    publicPath: '/',
    chunkFilename: 'js/[name].js'
  },
  resolve: {
    alias: {
      '@': '/Users/huangcongcong/learnvue/demo/src',
      vue$: 'vue/dist/vue.runtime.esm.js'
    },
    extensions: [
      '.mjs',
      '.js',
      '.jsx',
      '.vue',
      '.json',
      '.wasm'
    ],
    modules: [
      'node_modules',
      '/Users/huangcongcong/learnvue/demo/node_modules',
      '/Users/huangcongcong/learnvue/demo/node_modules/@vue/cli-service/node_modules'
    ],
    plugins: [
      /* config.resolve.plugin('pnp') */
      {}
    ]
  },
  resolveLoader: {
    modules: [
      '/Users/huangcongcong/learnvue/demo/node_modules/@vue/cli-plugin-babel/node_modules',
      'node_modules',
      '/Users/huangcongcong/learnvue/demo/node_modules',
      '/Users/huangcongcong/learnvue/demo/node_modules/@vue/cli-service/node_modules'
    ],
    plugins: [
      /* config.resolve.plugin('pnp-loaders') */
      {}
    ]
  },
  module: {
    noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
    rules: [
      /* config.module.rule('vue') */
      {
        test: /.vue$/,
        use: [
          /* config.module.rule('vue').use('cache-loader') */
          {
            loader: '/Users/huangcongcong/learnvue/demo/node_modules/cache-loader/dist/cjs.js',
            options: {
              cacheDirectory: '/Users/huangcongcong/learnvue/demo/node_modules/.cache/vue-loader',
              cacheIdentifier: 'ef751a12'
            }
          },
          /* config.module.rule('vue').use('vue-loader') */
          {
            loader: '/Users/huangcongcong/learnvue/demo/node_modules/vue-loader/lib/index.js',
            options: {
              compilerOptions: {
                whitespace: 'condense'
              },
              cacheDirectory: '/Users/huangcongcong/learnvue/demo/node_modules/.cache/vue-loader',
              cacheIdentifier: 'ef751a12'
            }
          }
        ]
      },
      /* config.module.rule('images') */
      {
        test: /.(png|jpe?g|gif|webp)(?.*)?$/,
        use: [
          /* config.module.rule('images').use('url-loader') */
          {
            loader: '/Users/huangcongcong/learnvue/demo/node_modules/url-loader/dist/cjs.js',
            options: {
              limit: 4096,
              fallback: {
                loader: '/Users/huangcongcong/learnvue/demo/node_modules/file-loader/dist/cjs.js',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      /* config.module.rule('svg') */
      {
        test: /.(svg)(?.*)?$/,
        use: [
          /* config.module.rule('svg').use('file-loader') */
          {
            loader: '/Users/huangcongcong/learnvue/demo/node_modules/file-loader/dist/cjs.js',
            options: {
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      /* config.module.rule('media') */
      {
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
        use: [
          /* config.module.rule('media').use('url-loader') */
          {
            loader: '/Users/huangcongcong/learnvue/demo/node_modules/url-loader/dist/cjs.js',
            options: {
              limit: 4096,
              fallback: {
                loader: '/Users/huangcongcong/learnvue/demo/node_modules/file-loader/dist/cjs.js',
                options: {
                  name: 'media/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      /* config.module.rule('fonts') */
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/i,
        use: [
          /* config.module.rule('fonts').use('url-loader') */
          {
            loader: '/Users/huangcongcong/learnvue/demo/node_modules/url-loader/dist/cjs.js',
            options: {
              limit: 4096,
              fallback: {
                loader: '/Users/huangcongcong/learnvue/demo/node_modules/file-loader/dist/cjs.js',
                options: {
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      /* config.module.rule('pug') */
      {
        test: /.pug$/,
        oneOf: [
          /* config.module.rule('pug').oneOf('pug-vue') */
          {
            resourceQuery: /vue/,
            use: [
              /* config.module.rule('pug').oneOf('pug-vue').use('pug-plain-loader') */
              {
                loader: 'pug-plain-loader'
              }
            ]
          },
          /* config.module.rule('pug').oneOf('pug-template') */
          {
            use: [
              /* config.module.rule('pug').oneOf('pug-template').use('raw') */
              {
                loader: 'raw-loader'
              },
              /* config.module.rule('pug').oneOf('pug-template').use('pug-plain-loader') */
              {
                loader: 'pug-plain-loader'
              }
            ]
          }
        ]
      },
      /* config.module.rule('css') */
      {
        test: /.css$/,
        oneOf: [
          /* config.module.rule('css').oneOf('vue-modules') */
          {
            resourceQuery: /module/,
            use: [
              /* config.module.rule('css').oneOf('vue-modules').use('vue-style-loader') */
              {
                loader: '/Users/huangcongcong/lea