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

ShowerSun 發布于2019-08-26 13:51 / 1594人閱讀

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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