vue-cli+webpack打包配置

上一篇说的是 webpack打包生成测试和生产版本； 这篇说的这个配置 应该是在打包之前应该配置好的

webpack配置如下：

1. webpack.base.conf.js

入口文件 entry 代码如下:

entry: {
  app: './src/main.js'
}

输出文件 output 代码如下：

output: {
  path: config.build.assetsRoot,  // 导出目录的绝对路径 在项目的根目录下 会新建dist文件夹
  filename: '[name].js',  // 导出文件的文件名
  publicPath: process.env.NODE_ENV === 'production'
    ? config.build.assetsPublicPath
    : config.dev.assetsPublicPath  
}

整体代码

'use strict';
const path = require('path');
const utils = require('./utils');
const config = require('../config');
const vueLoaderConfig = require('./vue-loader.conf');

function resolve (dir) {
  return path.join(__dirname, '..', dir);
}
/*
 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件)，使用eslint进行文件语法检测。
*/
const createLintingRule = () => ({
  test: /.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
});

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'],

    // 创建import 或 require的别名
    /*
     比如如下文件
     src
       components
         a.vue
       router
         home
           index.vue
      在index.vue里面，正常引用A组件；如下：
      import A from '../../components/a.vue';
      如果设置了 alias后，那么引用的地方可以如下这样了
      import A from '@/components/a.vue';
      注意：这里的 @ 起到了 resolve('src')路径的作用了。
    */
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      // 在开发环境下 对于以.js或.vue后缀结尾的文件(在src目录下或test目录下的文件)，使用eslint进行文件语法检测。
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /.vue$/,  // vue 文件后缀的
        loader: 'vue-loader', // 使用vue-loader处理
        options: vueLoaderConfig // options是对vue-loader做的额外选项配置 文件配置在 ./vue-loader.conf 内可以查看代码
      },
      {
        test: /.js$/, // js文件后缀的
        loader: 'babel-loader', // 使用babel-loader处理
        include: [resolve('src'), resolve('test')] // 包含src和test的文件夹
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/, // 处理图片后缀
        loader: 'url-loader',  // 使用url-loader处理
        options: {
          limit: 10000,  // 图片小于10000字节时以base64的方式引用
          name: utils.assetsPath('img/[name].[hash:7].[ext]')  // 文件名为name.7位hash的值.扩展名
        }
      },
      {
        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,  // 音频文件后缀
        loader: 'url-loader',
        options: {
          limit: 10000, // 小于10000字节时的时候处理
          name: utils.assetsPath('media/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名
        }
      },
      {
        test: /.(woff2?|eot|ttf|otf)(?.*)?$/, // 字体文件
        loader: 'url-loader',
        options: {
          limit: 10000, // 字体文件小于10000字节的时候处理
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // 文件名为name.7位hash的值.扩展名
        }
      }
    ]
  },
  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'
  }
};

对webpack.base.conf中的 const vueLoaderConfig = require('./vue-loader.conf');

vue-loader.conf.js 代码如下：

'use strict';
const utils = require('./utils');
const config = require('../config');
// 判断是否是生产环境
const isProduction = process.env.NODE_ENV === 'production';
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap;

module.exports = {
  // 处理 .vue文件中的样式
  loaders: utils.cssLoaders({
    // 是否打开 source-map
    sourceMap: sourceMapEnabled,
    // 是否提取样式到单独的文件
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
};

2. webpack.dev.conf.js

'use strict';
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');

// webpack-merge是一个可以合并数组和对象的插件
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

// html-webpack-plugin用于将webpack编译打包后的产品文件注入到html模板中
// 即自动在index.html里面加上<link>和<script>标签引用webpack打包后的文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// friendly-errors-webpack-plugin用于更友好地输出webpack的警告、错误等信息
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
const portfinder = require('portfinder');

const HOST = process.env.HOST;
const PORT = process.env.PORT && Number(process.env.PORT);

// 开发环境下的webpack配置，通过merge方法合并webpack.base.conf.js基础配置
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    // 通过传入一些配置来获取rules配置，此处传入了sourceMap: false,表示不生成sourceMap
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  // 使用这种source-map更快
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll
    }
  },
  plugins: [
    new webpack.DefinePlugin({ // 编译时配置的全局变量
      'process.env': require('../config/dev.env') // 当前环境为开发环境
    }),
    // 开启webpack热更新功能
    new webpack.HotModuleReplacementPlugin(),

    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.

    // webpack编译过程中出错的时候跳过报错阶段，不会阻塞编译，在编译结束后报错
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    // 自动将依赖注入html模板，并输出最终的html文件到目标文件夹
    new HtmlWebpackPlugin({
      filename: 'index.html',  // 生成的文件名
      template: 'index.html',  // 模板
      inject: true
    })
  ]
});

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port;
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err);
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port;
      // add port to devServer config
      devWebpackConfig.devServer.port = port;

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ // 友好的错误提示
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`]
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }));

      resolve(devWebpackConfig);
    }
  });
});

2. webpack.prod.conf.js

'use strict';
// node自带的文件路径工具
const path = require('path');

const utils = require('./utils');
const webpack = require('webpack');

// 配置文件
const config = require('../config');

// webpack 配置合并插件
const merge = require('webpack-merge');

// webpack 基本配置
const baseWebpackConfig = require('./webpack.base.conf');

// webpack 复制文件和文件夹的插件
// https://github.com/kevlened/copy-webpack-plugin
const CopyWebpackPlugin = require('copy-webpack-plugin');

// 自动生成 html 并且注入到 .html 文件中的插件
// https://github.com/ampedandwired/html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 提取css的插件
// https://github.com/webpack-contrib/extract-text-webpack-plugin
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// webpack 优化压缩和优化 css 的插件
// https://github.com/NMFR/optimize-css-assets-webpack-plugin
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');

// js压缩插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

// 如果当前环境为测试环境，则使用测试环境
// 否则，使用生产环境
const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env');

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    // styleLoaders
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  // 是否开启 sourceMap
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    // 编译输出的静态资源根路径 创建dist文件夹
    path: config.build.assetsRoot,

    // 编译输出的文件名
    filename: utils.assetsPath('js/[name].[chunkhash].js'),

    // 没有指定输出名的文件输出的文件名 或可以理解为 非入口文件的文件名，而又需要被打包出来的文件命名配置,如按需加载的模块
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // 配置全局环境为生产环境
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    // js文件压缩插件
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: { // 压缩配置
          warnings: false // 不显示警告
        }
      },
      sourceMap: config.build.productionSourceMap, // 生成sourceMap文件
      parallel: true
    }),
    // extract css into its own file
    // 将js中引入的css分离的插件
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'), // 分离出的css文件名
      // set the following option to `true` if you want to extract CSS from
      // codesplit chunks into this main css file as well.
      // This will result in *all* of your app's CSS being loaded upfront.
      allChunks: false
    }),
    // 压缩提取出的css，并解决ExtractTextPlugin分离出的js重复问题(多个文件引入同一css文件)
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // 将 index.html 作为入口，注入 html 代码后生成 index.html文件 引入css文件和js文件
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,  // 生成的html的文件名
      template: 'index.html',  // 依据的模板
      inject: true,  // 注入的js文件将会被放在body标签中,当值为'head'时，将被放在head标签中
      minify: { // 压缩配置
        removeComments: true,  // 删除html中的注释代码
        collapseWhitespace: true, // 删除html中的空白符
        removeAttributeQuotes: true // 删除html元素中属性的引号

        // 更多选项 https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      // 必须通过 CommonsChunkPlugin一致地处理多个 chunks
      chunksSortMode: 'dependency'  // 按dependency的顺序引入
    }),
    // keep module.id stable when vender modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file
    // 分割公共 js 到独立的文件vendor中
    // https://webpack.js.org/guides/code-splitting-libraries/#commonschunkplugin
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor', // 文件名
      minChunks (module) { // 声明公共的模块来自node_modules文件夹
        // any required modules inside node_modules are extracted to vendor
        // node_modules中的任何所需模块都提取到vendor
        return (
          module.resource &&
          /.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        );
      }
    }),
    /* 
     上面虽然已经分离了第三方库,每次修改编译都会改变vendor的hash值，导致浏览器缓存失效。
     原因是vendor包含了webpack在打包过程中会产生一些运行时代码，运行时代码中实际上保存了打包后的文件名。
     当修改业务代码时,业务代码的js文件的hash值必然会改变。一旦改变必然
     会导致vendor变化。vendor变化会导致其hash值变化。
    */
    // 下面主要是将运行时代码提取到单独的manifest文件中，防止其影响vendor.js
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),

    // 复制静态资源,将static文件内的内容复制到指定文件夹
    // https://github.com/kevlened/copy-webpack-plugin
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
});

// 配置文件开启了gzip压缩
if (config.build.productionGzip) {
  // 引入压缩文件的组件,该插件会对生成的文件进行压缩，生成一个.gz文件
  // https://github.com/webpack-contrib/compression-webpack-plugin
  const CompressionWebpackPlugin = require('compression-webpack-plugin');

  // 向webpackconfig.plugins中加入下方的插件
  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]', // 目标文件名
      algorithm: 'gzip', // 使用gzip压缩
      test: new RegExp(  // 满足正则表达式的文件会被压缩
        '\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240, // 资源文件大于10240B=10kB时会被压缩
      minRatio: 0.8  // 最小压缩比达到0.8时才会被压缩
    })
  );
}
// 开启包分析的情况时， 给 webpack plugins添加 webpack-bundle-analyzer 插件
if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}
module.exports = webpackConfig;