vue-cli webpack配置文件分析

下面我详细讲解“vue-cli webpack配置文件分析”的完整攻略。

什么是vue-cli webpack配置文件？

vue-cli是一个脚手架工具，能够快速创建 Vue.js 项目，它使用了 webpack 作为编译打包工具，并提供了默认的 webpack 配置文件，以满足一般项目的需求。vue-cli 中 webpack 的配置文件位于 build 目录下。

webpack配置文件分析

在 vue-cli 中，webpack 的配置文件主要分为两部分，一部分是 webpack.base.conf.js，另一部分是 webpack.prod.conf.js 和 webpack.dev.conf.js。其中，webpack.base.conf.js 是基础配置文件，而 webpack.prod.conf.js 和 webpack.dev.conf.js 则是用于生产环境和开发环境的具体配置文件。

webpack.base.conf.js

webpack.base.conf.js 是 webpack 的基础配置文件，其中定义了一些公用的配置项，比如入口文件、出口文件、loader 和 plugin 等。

入口文件和出口文件的配置

在 webpack.base.conf.js 中，我们可以配置入口文件和出口文件，如下：

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath
  }
}

上述代码中，entry 字段指定了入口文件为 ./src/main.js， output 字段指定了出口文件的路径和名称，其中 filename: '[name].js' 指的是生成的文件名称以入口文件名称为准。

loader的配置

在 webpack 中，我们需要使用各种 loader 来处理不同类型的文件，比如 css-loader 用于处理 CSS 文件，babel-loader 用于处理 JavaScript 文件等。在 webpack.base.conf.js 中，我们可以配置各种 loader，如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

上述代码中，我们定义了几个常用的 loader，包括 vue-loader 用于处理 .vue 文件，babel-loader 用于将 ES6+ 代码转换为 ES5 代码等。

plugin的配置

在 webpack 中，plugin 可以扩展、增强各种能力，比如html-webpack-plugin 用于生成 HTML 文件、extract-text-webpack-plugin 用于将样式表抽取成独立的 CSS 文件等。在 webpack.base.conf.js 中，我们也可以配置各种 plugin，如下：

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index,
      template: 'index.html',
      inject: true,
      favicon: 'favicon.ico',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
    })
  ]
}

上述代码中，我们使用了 html-webpack-plugin 来生成 HTML 文件，其中配置了模板文件路径和输出文件名等选项。

webpack.prod.conf.js 和 webpack.dev.conf.js

webpack.prod.conf.js 和 webpack.dev.conf.js 分别用于生产环境和开发环境的具体配置，这两个文件中都包含了 webpack.base.conf.js 的配置，同时也对其进行了增强和修改。在这两个文件中，我们可以设置诸如代码压缩、代码分离、代码热更新等多种选项。

代码压缩

在 vue-cli 中，我们可以使用 uglifyjs-webpack-plugin 插件来对代码进行压缩，如下：

module.exports = {
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    })
  ]
}

上述代码中，我们使用了 uglifyjs-webpack-plugin 插件，同时调用了 uglifyOptions 方法来设置代码压缩中的一些选项。

代码分离

代码分离可以使得页面加载更快，也方便缓存等。在 vue-cli 中，我们可以使用 CommonsChunkPlugin 插件来实现代码分离，如下：

module.exports = {
  plugins: [
    new CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        // 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
        )
      }
    }),
    new CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    })
  ]
}

上述代码中，我们使用 CommonsChunkPlugin 插件来实现代码分离功能，vendor 是将所有 node_modules 中的模块都提取到一个单独的 vendor.js 文件中，manifest 用于提取 webpack 运行时代码，以便在应用程序中稳定可靠地使用它。

代码热更新

代码热更新可以使得代码修改后不必刷新页面即可生效，方便开发效率。在 vue-cli 中，我们可以使用 webpack-dev-server 来实现代码热更新，如下：

module.exports = {
  devServer: {
    clientLogLevel: 'warning',
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: 'localhost',
    port: 8080,
    open: false,
    overlay: { warnings: false, errors: true },
    publicPath: '/',
    proxy: {},
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: false,
    }
  }
}

上述代码中，我们配置了 devServer 对象，其中包括了热更新等多种选项，如 hot: true 用于开启热更新，quiet: true 用于在控制台中只输出警告和错误等，方便调试。

示例说明

下面我们通过示例来说明 vue-cli webpack 的配置文件分析。

示例一：使用 sass 预处理器

我们在 vue-cli 中使用 sass 预处理器时，需要在 webpack.base.conf.js 中配置相应 loader，如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
}

上述代码中，我们添加了 sass-loader 来处理 .scss 文件。

示例二：使用 vue.config.js 文件代替 webpack.config.js 文件

在 vue-cli@3.0 及以上版本中，我们可以使用 vue.config.js 文件来代替 webpack.config.js 文件来进行配置，如下：

module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, 'public/index.html')
      })
    ]
  }
}

上述代码中，我们使用 configureWebpack 字段来进行配置，其中配合 HtmlWebpackPlugin 插件设置了模板文件路径等选项。

好了，以上就是 vue-cli webpack 的配置文件分析完整攻略，希望对你有所帮助。