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

資訊專(zhuān)欄INFORMATION COLUMN

webpack--plugins

daryl / 890人閱讀

摘要：中插件介紹的不多用到插件的時(shí)候再補(bǔ)插件功能的功能通過(guò)來(lái)實(shí)現(xiàn)調(diào)用之前需要通過(guò)安裝調(diào)用在中用除了親兒子內(nèi)置插件和安裝了實(shí)現(xiàn)的插件后不需要類(lèi)似于的臥槽，名字都

Webpack中插件介紹的不多--------用到插件的時(shí)候再補(bǔ)插件功能；

1 Webpack的功能（bundles）

------通過(guò)plugins來(lái)實(shí)現(xiàn)；
------調(diào)用plugins之前需要通過(guò)npm安裝；
調(diào)用plugins：----在webpack.config.js中用require()--------除了親兒子（內(nèi)置插件）和{安裝了實(shí)現(xiàn)lazyload的插件后}不需要require

webpack-load-plugins  
--------類(lèi)似于gulp的gulp-load-plugins（臥槽，名字都差不多）
--------調(diào)用webpack-load-plugins后不需要require(plugins)，在需要?jiǎng)e的插件的時(shí)候webpack內(nèi)部自動(dòng)require()

    var webpack = require("webpack");
    //安裝webpack-load-plugins后，就不用require()下邊的插件了
    var ComponentPlugin = require("component-webpack-plugin");
    module.exports = {
        plugins: [
        //此乃webpack親兒子，內(nèi)建plugins不需要require
            new webpack.ResolverPlugin([
                new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
            ], ["normal", "loader"]),
            //別人家的孩子
            new ComponentPlugin()
        ]
    };
2 使用webpack.ProvidePlugin加載不支持AMD或者CommonJS等插件

把一個(gè)全局變量插入到所有的代碼中，在config.js里面配置

  plugins: [
    new HtmlwebpackPlugin({
      title: "Hello World app"
    }),
    //provide $, jQuery and window.jQuery to every script
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]

然后，

在入口文件entry.js中
//import $ from "jquery";------這個(gè)不需要了 因?yàn)?, jQuery, window.jQuery都被直接注入，可以直接使用了
愉快的用$()
3 使用內(nèi)建CommonsChunkPlugin插件分離app.js和第三方庫(kù)

如果不分離第三方庫(kù)的話(huà)，可能會(huì)造成build的文件非常大，減慢加載速度；
首先----在entry入口文件中將第三方庫(kù)分離

  entry: {
    app: path.resolve(APP_PATH, "index.js"),
    //添加要打包在vendors里面的庫(kù)
    vendors: ["jquery", "vue"]
  }

然后，添加CommonsChunkPlugin配置

  plugins: [
    //這個(gè)使用uglifyJs壓縮你的js代碼
    new webpack.optimize.UglifyJsPlugin({minimize: true}),
    //把入口文件里面的數(shù)組打包成verdors.js
    new webpack.optimize.CommonsChunkPlugin("vendors", "vendors.js")
  ]
  打包后，會(huì)將第三方庫(kù)分離成多帶帶的js文件；
4 多入口頁(yè)面方案

---------當(dāng)頁(yè)面不再是SPA（single page app）
模擬需求：
有兩個(gè)頁(yè)面，一個(gè)是app.html頁(yè)面，需要引用vendor.js和app.js兩個(gè)文件；還有一個(gè)mobile.html頁(yè)面，需要引用vendor.js和mobile.js兩個(gè)文件；

第一步：自定義模板index.html和mobile.html自動(dòng)引用js文件：

index.html


  
  //注意：這里的htmlWebpackPlugin對(duì)象標(biāo)識(shí)符是固定的，必須是這個(gè)，必須這樣寫(xiě)，必須！
    <%= htmlWebpackPlugin.options.title %>
  
  
    
Welcome to webpack

  



mobile.html


        
  //注意：這里的htmlWebpackPlugin對(duì)象標(biāo)識(shí)符是固定的，必須是這個(gè)，必須這樣寫(xiě)，必須！
    <%= htmlWebpackPlugin.options.title %>
  
  
    
Welcome to mobile page

第二步：在webpack.config.js中：

entry: {
    //三個(gè)入口文件，app, mobile和 vendors
    app: path.resolve(APP_PATH, "index.js"),
    mobile: path.resolve(APP_PATH, "mobile.js"),
    vendors: ["jquery", "moment"]
  },
  output: {
    path: BUILD_PATH,
    //注意用一個(gè)數(shù)組[name]來(lái)代替固定名稱(chēng)，它會(huì)根據(jù)entry的入口文件名稱(chēng)生成多個(gè)js文件，這里就是(app.js,mobile.js和vendors.js)
    filename: "[name].js"
  }

第三步：生成頁(yè)面

//Template的文件夾路徑
var TEM_PATH = path.resolve(ROOT_PATH, "templates");
...
plugins: [
  ...
  //創(chuàng)建了兩個(gè)HtmlWebpackPlugin的實(shí)例，生成兩個(gè)頁(yè)面
  //注意：這里的HtmlwebpackPlugin構(gòu)造器名字是你require插件時(shí)自定義的，自定義的！
  new HtmlwebpackPlugin({
    title: "Hello World app",
    template: path.resolve(TEM_PATH, "index.html"),
    filename: "index.html",
//chunks這個(gè)參數(shù)告訴插件要引用entry里面的哪幾個(gè)入口
chunks: ["app", "vendors"],
    //要把script插入到標(biāo)簽里
    inject: "body"
  }),
  new HtmlwebpackPlugin({
    title: "Hello Mobile app",
    template: path.resolve(TEM_PATH, "mobile.html"),
    filename: "mobile.html",
    chunks: ["mobile", "vendors"],
    inject: "body"
  })
  ...
]
5 獻(xiàn)上師傅的文章

Webpack傻瓜式指南1
Webpack傻瓜式指南2

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

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

相關(guān)文章

  • 如何使用webpack架構(gòu)項(xiàng)目——新手教程

    摘要：博主最近在學(xué)習(xí)，順便搭建了一個(gè)基于的前端項(xiàng)目架構(gòu)在此寫(xiě)文記錄一下，同時(shí)教會(huì)新入坑的小伙伴們?nèi)绾卧陧?xiàng)目中玩弄，額玩轉(zhuǎn)。所以開(kāi)發(fā)環(huán)境中會(huì)有一個(gè)目錄用于我們開(kāi)發(fā)還有一個(gè)用來(lái)存儲(chǔ)處理后的的模板文件。 博主最近在學(xué)習(xí)react redux，順便搭建了一個(gè)基于webpack的前端項(xiàng)目架構(gòu),在此寫(xiě)文記錄一下，同時(shí)教會(huì)新入webpack坑的小伙伴們?nèi)绾卧陧?xiàng)目中玩弄，額！玩轉(zhuǎn)webpack。github...

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

  • TCM的webpack配置與常用插件

    摘要：中的配置熱加載插件安裝中的配置優(yōu)化插件為組件分配，通過(guò)這個(gè)插件可以分析和優(yōu)先考慮使用最多的模塊，并為它們分配最小的壓縮代碼分離和文件 0 前言 本文是針對(duì)TCM項(xiàng)目所做的WebPack配置文件總結(jié)，主要概述了一些常用配置選項(xiàng)和插件使用，對(duì)以后的項(xiàng)目有指導(dǎo)意義。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...

    羅志環(huán) 評(píng)論0 收藏0

  • TCM的webpack配置與常用插件

    摘要：中的配置熱加載插件安裝中的配置優(yōu)化插件為組件分配，通過(guò)這個(gè)插件可以分析和優(yōu)先考慮使用最多的模塊，并為它們分配最小的壓縮代碼分離和文件 0 前言 本文是針對(duì)TCM項(xiàng)目所做的WebPack配置文件總結(jié)，主要概述了一些常用配置選項(xiàng)和插件使用，對(duì)以后的項(xiàng)目有指導(dǎo)意義。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...

    張憲坤 評(píng)論0 收藏0

  • 進(jìn)擊webpack4 （基礎(chǔ)篇：配置 一）

    摘要：進(jìn)入入口起點(diǎn)后，會(huì)找出有哪些模塊和庫(kù)是入口起點(diǎn)直接和間接依賴(lài)的。用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。指定生產(chǎn)還是開(kāi)發(fā)入口文件打包后的文件名這里需指定一個(gè)絕對(duì)路徑我們需要的模塊去解析路徑包含一系列的規(guī)則是一個(gè)具有屬性的對(duì)象。 前文：進(jìn)擊webpack 4 （基礎(chǔ)篇 一） webpack.config.js基礎(chǔ)配置 webpack 有4大概念 入口(entry) 輸出(output) load...

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

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

0條評(píng)論

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