成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

ShowerSun / 1620人閱讀

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")
  // 獲取當(dāng)前環(huán)境
  var env = config.build.env
  var webpackConfig = merge(baseWebpackConfig, {
    module: {
      // 將.vue外部的css或css預(yù)處理器文件進(jìn)行處理
      rules: utils.styleLoaders({
        sourceMap: config.build.productionSourceMap,
        extract: true
      })
    },
    // 是否開啟調(diào)試
    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: [
      // 定義一個(gè)在編譯時(shí)間內(nèi)可以使用的全局變量，用來(lái)關(guān)閉vue的所有警告功能
      new webpack.DefinePlugin({
        "process.env": env
      }),
      // 最小化所有JavaScript輸出塊，消除無(wú)作用的代碼
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        },
        sourceMap: false
      }),
      // ExtractTextPlugin會(huì)將所有的「入口 chunk(entry chunks)」中的 require("style.css") 移動(dòng)到獨(dú)立分離的css文件。因此，樣式不再內(nèi)聯(lián)到j(luò)avascript里面，但會(huì)放到一個(gè)多帶帶的css包文件 (styles.css)當(dāng)中。 如果樣式文件較大，這會(huì)更快，因?yàn)闃邮轿募?huì)跟javascript包并行加載
      new ExtractTextPlugin({
        filename: utils.assetsPath("css/[name].[contenthash].css")
      }),
      // 壓縮提取出來(lái)的CSS，并且進(jìn)行css的復(fù)用以解決extract-text-webpack-plugin將css處理后會(huì)出現(xiàn)的css重復(fù)的情況
      new OptimizeCSSPlugin({
        cssProcessorOptions: {
          safe: true
        }
      }),
      // 構(gòu)建要編譯輸出的index.html,并在文件中嵌入資源文件
      new HtmlWebpackPlugin({
        // 輸出的HTML文件名
        filename: config.build.index,
        // 模板文件路徑
        template: "index.html",
        // 設(shè)置為true或body可以將js代碼放到元素最后
        // 設(shè)置為head將js代碼加到里面
        // 設(shè)置為false所有靜態(tài)資源css和JavaScript都不會(huì)注入到模板文件中
        inject: true,
        minify: {
          // 刪除注釋
          removeComments: true,
          // 合并空白
          collapseWhitespace: true,
          // 刪除屬性的引號(hào)
          removeAttributeQuotes: true
        },
        // 通過(guò)CommonsChunkPlugin控制chunks在html文件中添加的順序  
        // 設(shè)置為dependency即按照它們之間的依賴關(guān)系添加
        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可以保證如果我們的第三方插件沒(méi)有變動(dòng)，在打包的時(shí)候可以不被重新的打包
      // 待到上線后就不會(huì)重新的加載以達(dá)到緩存的目的
      // 我們會(huì)獲得webpack執(zhí)行時(shí)間和輸出一份json文件保存chunk的id和最終引用它們的文件印射關(guān)系
      new webpack.optimize.CommonsChunkPlugin({
        name: "manifest",
        chunks: ["vendor"]
      }),
      // 復(fù)制static文件夾內(nèi)的靜態(tài)資源到打包好的文件中
      // 具體的路徑是之前我們?cè)O(shè)置的"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
      })
    )
  }
  // 如果開啟了編譯報(bào)告，使用以下配置
  if (config.build.bundleAnalyzerReport) {
    var BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
  }
  module.exports = webpackConfig

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109677.html

相關(guān)文章

  • vue學(xué)習(xí)系列（二）vue-cli

    摘要：一介紹是官方提供的腳手架，用來(lái)快速建立項(xiàng)目。標(biāo)識(shí)項(xiàng)目名稱，這個(gè)你可以根據(jù)自己的項(xiàng)目來(lái)起名字。初始化完成之后，進(jìn)入安裝目錄，必須先安裝項(xiàng)目依賴，否則無(wú)法運(yùn)行。源文件需要注意的是是入口文件，下的是路由文件，文件是組件文件。 一.介紹 vue-cli是官方提供的腳手架，用來(lái)快速建立項(xiàng)目。 二.安裝 npm install vue-cli -g//全局安裝 三.初始化項(xiàng)目 vue init ...

    baishancloud 評(píng)論0 收藏0

  • vue-cli中配置webpack系列文章八 ------ 工程常用配置

    摘要：根據(jù)模板插入等生成最終生成的存放路徑，相對(duì)于的路徑模板路徑插入的位置，路徑設(shè)置屬性，屬性值是所在的路徑。配置后，在使用時(shí)將不再需要和進(jìn)行引入，直接使用即可。 一 webpack.base.conf.js 1. entry 為入口文件 1.1 在此可以綁定 babel 墊片 處理ie兼容 1.2 我們大部分為單頁(yè)面應(yīng)用（SPA），配置多頁(yè)面也可以在此配置 2. resol...

    netScorpion 評(píng)論0 收藏0

  • vue-cli解析

    摘要：在中，設(shè)置了一些配置，代碼如下通過(guò)它的注釋，我們可以理解它在中配置了靜態(tài)路徑本地服務(wù)器配置項(xiàng)等參數(shù)。下面還有一個(gè)的對(duì)象，它是在本地服務(wù)器啟動(dòng)時(shí)，打包的一些配置，代碼如下其中包括模版文件的修改，打包完目錄之后的一些路徑設(shè)置，壓縮等。 前言 這段時(shí)間，算是空出手來(lái)寫幾篇文章了。由于很久都沒(méi)有時(shí)間整理現(xiàn)在所用的東西了，所以，接下來(lái)會(huì)慢慢整理出一些文檔來(lái)記錄前段時(shí)間的工作和生活。 這篇文章的主...

    KunMinX 評(píng)論0 收藏0

  • Vue-cli 命令行工具分析

    摘要：文章來(lái)源命令行工具分析命令行工具分析提供一個(gè)官方命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用。其他模式的配置文件以此為基礎(chǔ)通過(guò)合并。 文章來(lái)源：Vue-cli 命令行工具分析 Vue-cli 命令行工具分析 Vue.js 提供一個(gè)官方命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用。vue-webpack-boilerplate，官方定義為： full-featured Webpack setup ...

    LoftySoul 評(píng)論0 收藏0

  • vue-cli配置預(yù)編譯

    摘要：轉(zhuǎn)載文章公司的平臺(tái)功能越堆越多，打包也越來(lái)越費(fèi)勁，一次十幾分鐘，運(yùn)維很不爽，搗鼓了一下預(yù)編譯，試了一下大概縮短了七八分鐘，目前感覺還行，現(xiàn)在把它記下來(lái)，給需要的童鞋當(dāng)做參考，也給自己記錄一下。 (轉(zhuǎn)載文章)公司的平臺(tái)功能越堆越多，打包也越來(lái)越費(fèi)勁，一次十幾分鐘，運(yùn)維很不爽，so搗鼓了一下預(yù)編譯，試了一下大概縮短了七八分鐘，目前感覺還行，現(xiàn)在把它記下來(lái)，給需要的童鞋當(dāng)做參考，也給自己記錄...

    KnewOne 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<