专栏首页向前进vue-cli脚手架npm相关文件解读(2)webpack.prod.conf.js

vue-cli脚手架npm相关文件解读(2)webpack.prod.conf.js

系列文章传送门:

1、build/webpack.base.conf.js

2、build/webpack.prod.conf.js

3、build/webpack.dev.conf.js

4、build/utils.js

5、build/vue-loader.conf.js

6、build/build.js

7、build/dev-server.js

8、build/check-versions.js

9、../config/index.js

下面是webpack.prod.conf.js中相关代码和配置的说明,建议先查阅build/webpack.prod.conf.js

 项目地址:https://github.com/SmileSmith(感觉不错的话帮忙打个星哈 ~)

/*
 * Webpack 生产环境配置文件,用于生产环境执行Build
 * 执行Build 主要是用Webpack执行这里的配置
 * 建议先查阅webapck.base.conf.js ../config/index.js
*/

var path = require('path')
var utils = require('./utils') // 下面是utils工具配置文件,主要用来处理css类文件的loader
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge') // 用merge的方式继承base.conf里面的配置
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin') // copy-webpack-plugin使用来复制文件或者文件夹到指定的目录的
var HtmlWebpackPlugin = require('html-webpack-plugin') // html-webpack-plugin是生成html文件,可以设置模板
var ExtractTextPlugin = require('extract-text-webpack-plugin') // extract-text-webpack-plugin这个插件是用来将bundle中的css等文件生成单独的文件,比如我们看到的app.css
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
//压缩css代码的,还能去掉extract-text-webpack-plugin插件抽离文件产生的重复代码,因为同一个css可能在多个模块中出现所以会导致重复代码,一般都是配合使用


// 如果当前环境变量NODE_ENV的值是testing,则导入 test.env.js配置文,设置env为"testing"
// 如果当前环境变量NODE_ENV的值不是testing,则设置env为"production"
var env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : config.build.env

// 把当前的配置对象和base.conf基础的配置对象合并
var webpackConfig = merge(baseWebpackConfig, {
  module: {
    // 下面就是把utils配置好的处理各种css类型的配置拿过来,和dev设置一样,就是这里多了个extract: true,此项是自定义项,设置为true表示,生成独立的文件
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  // devtool开发工具,用来生成个sourcemap方便调试,只用于生产环境
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  output: {
    // 和base.conf中一致,输出文件的路径:config目录下的index.js,path.resolve(__dirname, '../dist')
    path: config.build.assetsRoot,
    // 有区别,输出文件加上的chunkhash
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    // 非入扣文件配置,异步加载的模块,输出文件加上的chunkhash
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env// line-21 下面是利用DefinePlugin插件,定义process.env环境变量为env
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false // 禁止压缩时候的警告信息
      },
      sourceMap: true // 压缩后生成map文件
    }),
    // extract css into its own file,已经很清楚了就是独立css文件,文件名和hash
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    // 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
    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html', // 模板是index.html加不加无所谓
      inject: true, // 将js文件注入到body标签的结尾
      minify: {  // 压缩html页面
        removeComments: true, // 去掉注释
        collapseWhitespace: true, // 去除无用空格
        removeAttributeQuotes: true// 去除无用的双引号
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency' // 可以对页面中引用的chunk进行排序,保证页面的引用顺序
    }),
    // split vendor js into its own file
    // 公共模块插件,便于浏览器缓存,提高程序的运行速度(哪些需要打包进公共模块需要取舍)
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor', // 公共模块的名称,对应打包出来的js是vendor.js
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        // 存在资源,且以js结尾,且路径在node_node_modules下的都打包进来(这里可以根据项目的时机情况做调整)
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    // 把webpack的runtime代码和module manifest代码提取到manifest.js文件中,防止修改了代码但是没有修改第三方库文件导致第三方库文件也打包的问题
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),
    // copy custom static assets
    // 复制项目中的静态文件,忽略.开头的文件
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

// Gzip压缩插件
if (config.build.productionGzip) { // 修改config里面的配置才能开启
  var CompressionWebpackPlugin = require('compression-webpack-plugin')// Gzip插件

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

// 模块化分析插件
// 文档好像没有提档说明如何使用,看config/index.js中的注释,npm run build --report 可以看到,或者修改config里面的配置
if (config.build.bundleAnalyzerReport) { // 模块分析,会在127.0.0.1:8080生成模块打包分析结果
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig // 导出所有配置

参考:http://www.cnblogs.com/ye-hcj/archive/2017/06.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue-cli脚手架npm相关文件解读(3)webpack.dev.conf.js

    系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webp...

    SmileSmith
  • vue-cli脚手架npm相关文件解读(9)config/index.js

    系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webp...

    SmileSmith
  • vue-cli脚手架npm相关文件解读(5)vue-loader.conf.js

    系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webp...

    SmileSmith
  • 【程序源代码】开源B2C商城

    基于Node.js+MySQL开发的高仿网易严选开源B2C商城(微信小程序客户端)

    程序源代码
  • Webpack基本使用

    一个淡定的打工菜鸟
  • Webpack基本使用

    一个淡定的打工菜鸟
  • vue-cli 脚手架中 webpack 配置基础文件详解

    vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用,它使得我...

    程序员宝库
  • react+redux+webpack教程5

    现在项目已经有了,但是要把它放到生产环境中还是有些事情要做,在这最后一节,来把它们一一搞定。 这一节其实更多是关于webpack的内容。不过要想把react用得...

    前朝楚水
  • 前端构建工具grunt

    grunt是什么 grunt是目前非常流行的前端构建工具,支持自定义插件,有丰富的插件帮助我们完成构建任务 自动化完成我们指定的任务,例如压缩、编译、单元测试、...

    dys
  • 【Webpack】513- Webpack 插件开发如此简单!

    本文将带你一起开发第一个 Webpack 插件,从 Webpack 配置工程师,迈向 Webpack 开发工程师! 做自己的轮子,让别人用去吧。

    pingan8787

扫码关注云+社区

领取腾讯云代金券