WebPack中Plugins的使用和整理,以及常用的Plugins插件

时间: 2017-12-01阅读: 1872标签: webpack

Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。


内置插件

通过在webpack配置中使用插件属性来将插件包含进你的项目中。 

var webpack = require("webpack");
module.exports = {
    plugins: [
        new webpack.ResolverPlugin([
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ], ["normal", "loader"])
    ]
};


其他插件

其他不是内置的插件可以通过NPM安装已经发布了的插件,如果插件没有发布到npm,也可以通过其他方式安装:

npm install component-webpack-plugin

然后就能像下面这样来使用: 

var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
    plugins: [
        new ComponentPlugin()
    ]
}

如果是通过npm来安装第三方插件,建议使用https://www.npmjs.com/package/webpack-load-plugins工具。它会在你项目的依赖当中检查所有的第三方插件,只有在你需要用到的时候才会加载它们。


常用webpack的plugin

html-webpack-plugin

const htmlWebpackPlugin=require('html-webpack-plugin');
plugins:[
        new htmnlWebpackPlugin({
            template:'index.html',
            filename:'home.html',
            title:'webpack',
            data:'aaaaaa'
        })
 ]
//向index.html传入title和data变量值,并且生成home.html;一个plugins数组中科院有多个HtmlWebpackPlugin对象实例


open-browser-webpack-plugin  

const OpenBrowserWebpackPlugin=require('open-browser-webpack-plugin');
plugins:[
    new OpenBrowserWebpackPlugin({url:'https://localhost:8877'})
]
//启动webpack之后,自动打开浏览器


extract-text-webpack-plugin  

const ExtractTextPlugin=require('extract-text-webpack-plugin'); plugins:[
     new ExtractTextPlugin('main.css')
]
//插件打包css代码到main.css中


copy-webpack-plugin 

const CopyWebpackPlugin=require('copy-webpack-plugin'); 
new CopyWebpackPlugin([{
    from: __dirname + '/src/public'
}]);
//作用:把public 里面的内容全部拷贝到编译目录


webpack-md5-hash 

const WebpackMd5Hash=require('webpack-md5-hash');
output: {
        //... 
        chunkFilename: "[name].[chunkhash:6].js"
},
plugins:[
    new WebpackMd5Plugin();
]
//它的作用是生成具有独立hash值的css和js文件,即css和js文件hash值解耦。webpack-md5-hash插件对chunk-hash钩子进行捕获并重新计算chunkhash,它的计算方法是只计算模块本身的当前内容(包括同步模块)。

 

vue+webpack4多页面打包配置

多页面配置通常有两种形式,一种是多页面多配置,一种是多页面单配置。因为webpack(3.1以上)可以直接处理一个配置对象的数组,所以可以为每个页面单独写一份配置。

Webpack 打包含动态加载的类库

在编写库的时候,我们有时候会希望按需加载某些依赖,例如如果代码的运行环境不支持某些功能的话,就加载相关的Polyfill。webpack作为当前最流行的打包工具,早已支持动态加载的功能了。本文将讨论一种用webpack打包含动态加载的类库的方法。

深入理解Webpack核心模块Tapable钩子[同步版]

tapable是webpack的核心依赖库 想要读懂webpack源码 就必须首先熟悉tapable。ok.下面是webapck中引入的tapable钩子 由此可见 在webpack中tapable的重要性

webpack常用插件_webpackPlugin插件总结

本地开发构建’自然离不开webpack,webpack想要工作,那它就需要各种插件的支持,有不少童鞋在平时的项目开发中使用过Webpack Plugins,这篇文章整理总结常用的webpackPlugin插件

webpack—url-loader 解决项目中图片打包路径问题

刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里。下面我们就来分析下在webpack项目中图片的应用场景。

基于 React & TS & Webpack 的微前端应用模板

在 Web 开发导论/微前端与大前端一文中,笔者简述了微服务与微前端的设计理念以及微前端的潜在可行方案。微服务与微前端,都是希望将某个单一的单体应用,转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合

Vue -- webpack 项目自动打包压缩成zip文件

这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了。

在webpack自定义配置antd的按需加载和修改主题色

最近使用antd来做react项目的UI。从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下:加模块 react-app-rewired, babel-plugin-import, react-app-rewire-less,根目录添加config-overrides.js,修改npm script即可, 一切正常

webpack 构建多页面应用初探

如何使用webpack构建多页面应用,这是一个我一直在想和解决的问题。网上也给出了很多的例子,很多想法。猛一看,觉得有那么点儿意思,但仔细看也就那样。使用webpack这个构建工具,可以使我们少考虑很多的问题。

通用、封装、简化 webpack 配置

现在,基本上前端的项目打包都会用上 webpack,因为 webpack 提供了无与伦比强大的功能和生态。但在创建一个项目的时候,总是免不了要配置 webpack,很是麻烦。简化 webpack 配置的一种方式是使用社区封装好的库,比如 roadhog。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全