详解vue2.0脚手架的webpack 配置文件分析

下面我将为你详细讲解“详解vue2.0脚手架的webpack 配置文件分析”的完整攻略。

一、前言

在进行Vue2.0开发时，使用脚手架可以减少很多配置时间，提高开发效率。而其中的webpack配置文件对整个应用的打包和构建起到了重要的作用。因此，对webpack配置文件进行分析和解读是非常必要的。

二、webpack 配置文件分析

2.1 入口文件配置

在 webpack.config.js 文件中，entry 配置项用于配置入口文件。例如，如果我们有一个名为 main.js 的文件，我们可以将其作为入口文件进行如下配置：

module.exports = {
  entry: './src/main.js'
}

这样 webpack 就会以 ./src/main.js 作为入口文件进行打包。

2.2 输出文件配置

输出文件配置一般是在 output 中进行设置。例如，如果我们想要将打包好的文件输出到 dist 目录下，并且将输出的文件名设为 bundle.js，那么我们可以将其配置如下：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

其中， path 存放所以打包后的文件的绝对路径， 而 filename 指定打包后的文件名。这里我们用到了 path.resolve 方法，它可以将一个路径或路径片段序列解析为一个绝对路径。

2.3 配置加载器

在 module 配置项中可以配制加载器，来处理非 JavaScript 文件，比如样式文件、图片、字体等文件。例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
}

这就是一个常见的在webpack中使用的loader的配置，其中 .css 的文件通过 use 数组中的 style-loader 和 css-loader 进行处理。而图片和字体文件则使用 file-loader 进行处理。

2.4 插件配置

在 plugins 配置项中配制插件。插件可以执行功能更加复杂的任务，比如压缩代码、混淆代码、打包优化等等。例如：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

这里一个常用的插件是 UglifyJsPlugin，它可以压缩 JavaScript 代码。另外，还有一个常用的插件是 HtmlWebpackPlugin，它可以自动生成 index.html 文件，并将打包后的资源文件自动引入到 index.html 中。

三、示例说明

3.1 示例一

下面我们以一个实际使用场景为例进行说明。假设我们有一个页面，页面中需要引入一个名为 vue-quill-editor 的第三方编辑器插件。我们知道这个插件的使用需要在 main.js 中进行引入：

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)

但是，我们又不想将插件与其他代码打包在同一个文件中，这时我们可以在配置文件中将插件单独进行打包。具体实现方式如下：

module.exports = {
  // …
  entry: {
    app: './src/main.js',
    vendor: [
      'vue',
      'vue-quill-editor'
    ]
  },
  output: {
    …
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js'
  },
  plugins:[
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    })
  ]
}

这里我们使用了 CommonsChunkPlugin 插件将 vue-quill-editor 单独打包。

3.2 示例二

作为一个前端开发者，我们都希望代码打包后能够快速地运行并展示出我们的网站。这里我们可以使用 webpack-dev-server 快速进行本地开发调试。具体实现如下：

首先安装 webpack-dev-server：

npm install webpack-dev-server --save-dev

然后在 webpack.config.js 中添加如下代码：

module.exports = {
  ...
  devServer: {
    contentBase: './dist',
    open: true,
    port: 8080
  }
}

这里我们设置了打开默认页面，端口则是 8080。接下来我们就可以通过浏览器进行开发调试了，只需要在命令行输入：

webpack-dev-server --open

即可在浏览器中打开页面。