webpack--plugins

daryl 发布于2019-08-19 18:09 / 866人阅读

摘要：中插件介绍的不多用到插件的时候再补插件功能的功能通过来实现调用之前需要通过安装调用在中用除了亲儿子内置插件和安装了实现的插件后不需要类似于的卧槽，名字都

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云服务器云服务器

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

转载请注明本文地址：https://www.ucloud.cn/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