vue-cli中配置webpack系列文章七 ------ webpack.prod.conf.js

ShowerSun 发布于2019-08-26 13:51 / 1572人阅读

webpack.prod.conf.js

  var path = require("path")
  var utils = require("./utils")
  var webpack = require("webpack")
  var config = require("../config")
  var merge = require("webpack-merge")
  var baseWebpackConfig = require("./webpack.base.conf")
  var CopyWebpackPlugin = require("copy-webpack-plugin")
  var HtmlWebpackPlugin = require("html-webpack-plugin")
  var ExtractTextPlugin = require("extract-text-webpack-plugin")
  var OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin")
  // 获取当前环境
  var env = config.build.env
  var webpackConfig = merge(baseWebpackConfig, {
    module: {
      // 将.vue外部的css或css预处理器文件进行处理
      rules: utils.styleLoaders({
        sourceMap: config.build.productionSourceMap,
        extract: true
      })
    },
    // 是否开启调试
    devtool: config.build.productionSourceMap ? "#source-map" : false,
    output: {
      path: config.build.assetsRoot,
      filename: utils.assetsPath("js/[name].[chunkhash].js"),
      // 定义在非入口文件引用的文件的名称
      chunkFilename: utils.assetsPath("js/[id].[chunkhash].js")
    },
    plugins: [
      // 定义一个在编译时间内可以使用的全局变量，用来关闭vue的所有警告功能
      new webpack.DefinePlugin({
        "process.env": env
      }),
      // 最小化所有JavaScript输出块，消除无作用的代码
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        },
        sourceMap: false
      }),
      // ExtractTextPlugin会将所有的「入口 chunk(entry chunks)」中的 require("style.css") 移动到独立分离的css文件。因此，样式不再内联到javascript里面，但会放到一个多带带的css包文件 (styles.css)当中。 如果样式文件较大，这会更快，因为样式文件会跟javascript包并行加载
      new ExtractTextPlugin({
        filename: utils.assetsPath("css/[name].[contenthash].css")
      }),
      // 压缩提取出来的CSS，并且进行css的复用以解决extract-text-webpack-plugin将css处理后会出现的css重复的情况
      new OptimizeCSSPlugin({
        cssProcessorOptions: {
          safe: true
        }
      }),
      // 构建要编译输出的index.html,并在文件中嵌入资源文件
      new HtmlWebpackPlugin({
        // 输出的HTML文件名
        filename: config.build.index,
        // 模板文件路径
        template: "index.html",
        // 设置为true或body可以将js代码放到元素最后
        // 设置为head将js代码加到里面
        // 设置为false所有静态资源css和JavaScript都不会注入到模板文件中
        inject: true,
        minify: {
          // 删除注释
          removeComments: true,
          // 合并空白
          collapseWhitespace: true,
          // 删除属性的引号
          removeAttributeQuotes: true
        },
        // 通过CommonsChunkPlugin控制chunks在html文件中添加的顺序  
        // 设置为dependency即按照它们之间的依赖关系添加
        chunksSortMode: "dependency"
      }),
      // webpack将公共模块打包的vendor.js里面使用CommonsChunkPlugin将vendor.js分离到多带带的文件
      new webpack.optimize.CommonsChunkPlugin({
        // 公共模块名字
        name: "vendor",
        minChunks: function(module, count) {
          return (
            module.resource &&
            /.js$/.test(module.resource) &&
            module.resource.indexOf(
              path.join(__dirname, "../node_modules")
            ) === 0
          )
        }
      }),
      // 使用CommonsChunkPlugin可以保证如果我们的第三方插件没有变动，在打包的时候可以不被重新的打包
      // 待到上线后就不会重新的加载以达到缓存的目的
      // 我们会获得webpack执行时间和输出一份json文件保存chunk的id和最终引用它们的文件印射关系
      new webpack.optimize.CommonsChunkPlugin({
        name: "manifest",
        chunks: ["vendor"]
      }),
      // 复制static文件夹内的静态资源到打包好的文件中
      // 具体的路径是之前我们设置的"config.build.assetsSubDirectory"
      new CopyWebpackPlugin([{
        from: path.resolve(__dirname, "../static"),
        to: config.build.assetsSubDirectory,
        ignore: [".*"]
      }])
    ]
  })
  // 如果开启了Gzip压缩，使用以下配置
  if (config.build.productionGzip) {
    var CompressionWebpackPlugin = require("compression-webpack-plugin")
    webpackConfig.plugins.push(
      new CompressionWebpackPlugin({
        asset: "[path].gz[query]",
        algorithm: "gzip",
        test: new RegExp(
          ".(" +
          config.build.productionGzipExtensions.join("|") +
          ")$"
        ),
        threshold: 10240,
        minRatio: 0.8
      })
    )
  }
  // 如果开启了编译报告，使用以下配置
  if (config.build.bundleAnalyzerReport) {
    var BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
  }
  module.exports = webpackConfig

GPU云服务器云服务器 webpack cdn配置 webpack配置cdn webpack常用配置项如何批量替换wordpress文章中的文

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109677.html

vue学习系列（二）vue-cli

摘要：一介绍是官方提供的脚手架，用来快速建立项目。标识项目名称，这个你可以根据自己的项目来起名字。初始化完成之后，进入安装目录，必须先安装项目依赖，否则无法运行。源文件需要注意的是是入口文件，下的是路由文件，文件是组件文件。一.介绍 vue-cli是官方提供的脚手架，用来快速建立项目。二.安装 npm install vue-cli -g//全局安装三.初始化项目 vue init ...

baishancloud 2019-08-26 11:50 评论0 收藏0
vue-cli中配置webpack系列文章八 ------ 工程常用配置

摘要：根据模板插入等生成最终生成的存放路径，相对于的路径模板路径插入的位置，路径设置属性，属性值是所在的路径。配置后，在使用时将不再需要和进行引入，直接使用即可。一 webpack.base.conf.js 1. entry 为入口文件 1.1 在此可以绑定 babel 垫片处理ie兼容 1.2 我们大部分为单页面应用（SPA），配置多页面也可以在此配置 2. resol...

netScorpion 2019-08-26 13:51 评论0 收藏0
vue-cli解析

摘要：在中，设置了一些配置，代码如下通过它的注释，我们可以理解它在中配置了静态路径本地服务器配置项等参数。下面还有一个的对象，它是在本地服务器启动时，打包的一些配置，代码如下其中包括模版文件的修改，打包完目录之后的一些路径设置，压缩等。前言这段时间，算是空出手来写几篇文章了。由于很久都没有时间整理现在所用的东西了，所以，接下来会慢慢整理出一些文档来记录前段时间的工作和生活。这篇文章的主...

KunMinX 2019-08-21 18:24 评论0 收藏0
Vue-cli 命令行工具分析

摘要：文章来源命令行工具分析命令行工具分析提供一个官方命令行工具，可用于快速搭建大型单页应用。其他模式的配置文件以此为基础通过合并。文章来源：Vue-cli 命令行工具分析 Vue-cli 命令行工具分析 Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。vue-webpack-boilerplate，官方定义为： full-featured Webpack setup ...

LoftySoul 2019-08-21 17:44 评论0 收藏0
vue-cli配置预编译

摘要：转载文章公司的平台功能越堆越多，打包也越来越费劲，一次十几分钟，运维很不爽，捣鼓了一下预编译，试了一下大概缩短了七八分钟，目前感觉还行，现在把它记下来，给需要的童鞋当做参考，也给自己记录一下。 (转载文章)公司的平台功能越堆越多，打包也越来越费劲，一次十几分钟，运维很不爽，so捣鼓了一下预编译，试了一下大概缩短了七八分钟，目前感觉还行，现在把它记下来，给需要的童鞋当做参考，也给自己记录...

KnewOne 2019-08-22 18:13 评论0 收藏0