使用webpack打包vue工程

    最近在研究vue.js，在react中使用的webpack，vue的官网安装的demo工程默认就可以创建webpack的依赖。
    下面地址可以安装https://cn.vuejs.org/v2/guide/installation.html。
    文件解释：
    build中配置了webpack的基本配置、开发环境配置、生产环境配置
    config中配置了路径端口值等
    node_modules为依赖的模块
    src放置组件和入口文件
    static放置静态资源文件
    index.html文件入口
    webpack中的一些解释：
    new HtmlWebpackPlugin 这个插件的作用是把output输出的文件自动插入到html里
    这里不使用elint检查代码。

    下面介绍一下打包的两种方式：

    一、使用npm run build，可以npm run build 打包文件。
    在命令行执行该命令，可以在dist的文件夹下看到打包完成的目录，index.html为入口，static为打包完成的js和css。
    ![这里写图片描述](https://img-blog.csdn.net/20170717161900618?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjA0NzM5ODU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    但是无法将众多的文件打包成一个文件，下面就要介绍webpack了。

    二、使用webpack打包。
    Webpack 是一个模块打包工具。在开发中，它把一堆文件中每个都作为一个模块处理，找出它们间的依赖关系，并打包成待发布的静态资源。
    http://webpack.github.io/。
    直观的效果就是使用webpack可以将使用的vue，css，图片等打包成一个js。
    使用webpack打包需要有文件webpack.config.js，在my-project工程下新建webpack.config.js，内容为：

var path = require('path')
var utils = require('./build/utils')
var config = require('./config')
var vueLoaderConfig = require('./build/vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

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
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}

    直接使用webpack打包即可，可以再dist文件夹下发现打包完成的app.js。
    ![这里写图片描述](https://img-blog.csdn.net/20170717162007906?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjA0NzM5ODU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    在index.html自己引入app.js就可以直接运行了。