webpack--plugins

daryl 發布于2019-08-19 18:09 / 887人閱讀

摘要：中插件介紹的不多用到插件的時候再補插件功能的功能通過來實現調用之前需要通過安裝調用在中用除了親兒子內置插件和安裝了實現的插件后不需要類似于的臥槽，名字都

Webpack中插件介紹的不多--------用到插件的時候再補插件功能；

1 Webpack的功能（bundles）

------通過plugins來實現；
------調用plugins之前需要通過npm安裝；
調用plugins：----在webpack.config.js中用require()--------除了親兒子（內置插件）和{安裝了實現lazyload的插件后}不需要require

webpack-load-plugins  
--------類似于gulp的gulp-load-plugins（臥槽，名字都差不多）
--------調用webpack-load-plugins后不需要require(plugins)，在需要別的插件的時候webpack內部自動require()

    var webpack = require("webpack");
    //安裝webpack-load-plugins后，就不用require()下邊的插件了
    var ComponentPlugin = require("component-webpack-plugin");
    module.exports = {
        plugins: [
        //此乃webpack親兒子，內建plugins不需要require
            new webpack.ResolverPlugin([
                new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
            ], ["normal", "loader"]),
            //別人家的孩子
            new ComponentPlugin()
        ]
    };

2 使用webpack.ProvidePlugin加載不支持AMD或者CommonJS等插件

把一個全局變量插入到所有的代碼中，在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";------這個不需要了 因為$, jQuery, window.jQuery都被直接注入，可以直接使用了
愉快的用$()

3 使用內建CommonsChunkPlugin插件分離app.js和第三方庫

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

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

然后，添加CommonsChunkPlugin配置

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

4 多入口頁面方案

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

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

index.html


  
  //注意：這里的htmlWebpackPlugin對象標識符是固定的，必須是這個，必須這樣寫，必須！
    <%= htmlWebpackPlugin.options.title %>
  
  
    Welcome to webpack
  



mobile.html


        
  //注意：這里的htmlWebpackPlugin對象標識符是固定的，必須是這個，必須這樣寫，必須！
    <%= htmlWebpackPlugin.options.title %>
  
  
    Welcome to mobile page

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

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

第三步：生成頁面

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

5 獻上師傅的文章

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

GPU云服務器云服務器

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79248.html

如何使用webpack架構項目——新手教程

摘要：博主最近在學習，順便搭建了一個基于的前端項目架構在此寫文記錄一下，同時教會新入坑的小伙伴們如何在項目中玩弄，額玩轉。所以開發環境中會有一個目錄用于我們開發還有一個用來存儲處理后的的模板文件。博主最近在學習react redux，順便搭建了一個基于webpack的前端項目架構,在此寫文記錄一下，同時教會新入webpack坑的小伙伴們如何在項目中玩弄，額！玩轉webpack。github...

sutaking 2019-08-20 10:33 評論0 收藏0
TCM的webpack配置與常用插件

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

羅志環 2019-08-20 14:36 評論0 收藏0
TCM的webpack配置與常用插件

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

張憲坤 2019-08-01 16:23 評論0 收藏0
進擊webpack4 （基礎篇：配置一）

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

FleyX 2019-08-23 15:27 評論0 收藏0