vue中关于webpack打包的详细理解

引言：当我们需要和后台分离部署的时候，必须配置config/index.js:

用 vue-cli 自动构建的目录里面 （环境变量及其基本变量的配置），解析如下：

在node中，有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量，在webpack中它的用途是判断生产环境或开发环境的依据的。

（1）项目中配置的config/index.js，有dev和production两种环境的配置 以下介绍的是production环境下的webpack配置的理解

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  // dev环境
  dev: {
    // Paths
    // 编译输出的二级目录
    assetsSubDirectory: 'static',
    // 编译发布的根目录，可配置为服务资源域名或CDN域名
    assetsPublicPath: '/',
    // 定义开发服务器的代理规则（可跨域）
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // 运行测试页面端口
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-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,
    // 是否开启cssSourceMap
    cssSourceMap: true
  },

  // production环境
  build: {
    // Template for index.html
    // 必须是本地文件系统上的绝对路径，对应路径下回程车 index.html
    // 编译输入的 index.html 文件
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    // 必须是本地文件系统上的绝对路径
    // 应该指向包含应用程序的所有静态资产的根目录。public/对应Rails/Laravel
    // 编译输出的静态资源路径
    assetsRoot: path.resolve(__dirname, '../dist'),
    /*
      被webpack编译处理过的资产文件都会在这个build.assetsRoot目录下，所以它不可以混有
      其它可能在build.assetsRoot里面有的文件。

      例如：假如build.assetsRoot参数是/path/to/dist，build.assetsSubDirectory 参数是 static, 
      那么所以webpack资源会被编译到path/to/dist/static目录。

      注意：每次编译这个目录会被清空，所以这个只能放编译出来的资源文件。

      static/目录的文件会直接被在构建过程中，直接拷贝到这个目录。这意味着是如果你改变这个规则，
      所有你依赖于static/中文件的绝对地址，都需要改变。
    */
    //编译输出的二级目录  
    assetsSubDirectory: 'static',
    /*
      资源的根目录
      这个是通过http服务器运行的url路径。在大多数情况下，这个是根目录(/)。如果你的后台框架对
      静态资源url前缀要求，你仅需要改变这个参数。在内部，这个是被webpack当做output.publicPath来处理的。

      后台有要求的话一般要加上./ 或者根据具体目录添加，不然引用不到静态资源
    */
    // 编译发布的根目录，可配置为资源服务器域名会CDN域名
    assetsPublicPath: '/',

    // 在构建生产环境版本时，是否开启sourcemap
    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    // 是否开启gzip
    productionGzip: false,
    // 需要使用gzip压缩的文件扩展名
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

（2）vue中的build/webpack.base.conf.js

'use strict'
// 引入依赖模块
const path = require('path')
const utils = require('./utils')
const config = require('../config')  //获取配置
const vueLoaderConfig = require('./vue-loader.conf')

var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
// various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)/* 是否在 dev 环境下开启 cssSourceMap ，在 config/index.js 中可配置 */
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)/* 是否在 production 环境下开启 cssSourceMap ，在 config/index.js 中可配置 */
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd /* 最终是否使用 cssSourceMap */

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

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {  // 配置webpack编译入口
    app: './src/main.js'
  },
  output: {  // 配置webpack输出路径和命名规则
    path: config.build.assetsRoot,  //webpack输出的目标文件夹路径
    //webpack 输出bundle文件命名格式，基于文件的MD5生产Hash名称的script来防止缓存
    filename: '[name].js',  
    // webpack编译输出的发布路径（判断是正式环境或开发环境等）
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    // 自动解析确定的扩展名，使得导入模块时可不加扩展名
    extensions: ['.js', '.vue', '.json'],
    // 创建import或require的别名，一些常用的或路径长的都可以使用别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'components': path.resolve(__dirname, '../src/components'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,  //vue文件后缀
        loader: '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]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

（3）webpack.prod.conf.js 生产环境下的配置文件

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')// 一个可以合并数组和对象的插件
var baseWebpackConfig = require('./webpack.base.conf')
// 用于从webpack生成的bundle中提取文本到特定文件中的插件
// 可以抽取出css，js文件将其与webpack输出的bundle分离
var ExtractTextPlugin = require('extract-text-webpack-plugin')  //如果我们想用webpack打包成一个文件，css js分离开，需要这个插件
var HtmlWebpackPlugin = require('html-webpack-plugin')// 一个用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件
var env = config.build.env
// 合并基础的webpack配置
var webpackConfig = merge(baseWebpackConfig, {
    // 配置样式文件的处理规则，使用styleLoaders
  module: {
    loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false, // 开启source-map，生产环境下推荐使用cheap-source-map或source-map，后者得到的.map文件体积比较大，但是能够完全还原以前的js代码
  output: {
    path: config.build.assetsRoot,// 编译输出目录
    filename: utils.assetsPath('js/[name].[chunkhash].js'),  // 编译输出文件名格式
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')  // 没有指定输出名的文件输出的文件名格式
  },
  vue: { // vue里的css也要单独提取出来
    loaders: utils.cssLoaders({ // css加载器，调用了utils文件中的cssLoaders方法,用来返回针对各类型的样式文件的处理方式,
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  // 重新配置插件项
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    // 位于开发环境下
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new webpack.optimize.UglifyJsPlugin({// 丑化压缩代码
      compress: {
        warnings: false
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    // extract css into its own file
    new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),  // 抽离css文件
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
     // filename 生成网页的HTML名字，可以使用/来控制文件文件的目录结构，最
      // 终生成的路径是基于webpac配置的output.path的
    new HtmlWebpackPlugin({
        // 生成html文件的名字，路径和生产环境下的不同，要与修改后的publickPath相结合，否则开启服务器后页面空白
      filename: config.build.index,
      // 源文件，路径相对于本文件所在的位置
      template: 'index.html',
      inject: true,
    })
   ]
 }

（4）vue 中build/build.js页面

// https://github.com/shelljs/shelljs
require('./check-versions')() // 检查 Node 和 npm 版本
require('shelljs/global')  // 使用了 shelljs 插件，可以让我们在 node 环境的 js 中使用 shell
env.NODE_ENV = 'production'

var path = require('path') 
var config = require('../config') // 加载 config.js
var ora = require('ora') // 一个很好看的 loading 插件
var webpack = require('webpack')  // 加载 webpack
var webpackConfig = require('./webpack.prod.conf')  // 加载 webpack.prod.conf

console.log( //  输出提示信息 ～ 提示用户请在 http 服务下查看本页面，否则为空白页
  '  Tip:\n' +
  '  Built files are meant to be served over an HTTP server.\n' +
  '  Opening index.html over file:// won\'t work.\n'
)

var spinner = ora('building for production...')  // 使用 ora 打印出 loading + log
spinner.start()  // 开始 loading 动画

/* 拼接编译输出文件路径 */
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath) /* 删除这个文件夹 （递归删除） */
mkdir('-p', assetsPath) /* 创建此文件夹 */ 
cp('-R', 'static/*', assetsPath) /* 复制 static 文件夹到我们的编译输出目录 */

webpack(webpackConfig, function (err, stats) {  //  开始 webpack 的编译
    // 编译成功的回调函数
  spinner.stop()
  if (err) throw err
  process.stdout.write(stats.toString({
    colors: true,
    modules: false,
    children: false,
    chunks: false,
    chunkModules: false
  }) + '\n')
})

（5）目入口，由package.json 文件可以看出

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

当我们执行 npm run dev / npm run start / npm run build 时运行的是 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 或 npm run dev 或node build/build.js