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

时间: 2017-12-01阅读: 3218标签: 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,它的计算方法是只计算模块本身的当前内容(包括同步模块)。

 

吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

链接: http://www.fly63.com/article/detial/205

《深入浅出webpack》有感

nodejs的出现对于构建工具具有重要的意义,在没有nodejs之前,js只能执行在浏览器环境下,所以意味着对发布前的js文件要进行处理,十分局限,没有打包工具,只能用PHP脚本来处理文件

webpack是什么?

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

webpack的optimization.namedModules

optimization.namedModules 这个配置对于调试起来很方便,比如原本生产的一段代码是长这样的:很多奇怪的数字,比如最后几行的 [0,0] 是表示了什么意思?如果配置上namedModules 为true呢

为什么要用webpack?

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。模块化,让我们可以把复杂的程序细化为小的文件;

webpack 从入门到放弃

随着前端项目复杂程度越来越高,依赖也越来越多,为了提高项目中代码的可复用性,前端开始提出模块化开发的思路,前端模块化会有以下几个痛点:命名冲突,文件依赖,代码复用

Webpack知识点

Webpack从基础概念到项目配置,涉及知识点较多,现将学习使用过程中遇到内容记录下来,方便以后速查。Webpack是一个模块打包工具,在Webpack里一切文件皆模块。通过loader转换文件,通过plugin注入钩子

webpack3 升级 webpack4踩坑记录

安装webpack4最新版本;这个在webpack3中,webpack本身和它的CLI是在同一个包中,webpack4中将两个分开管理。记得添加mode用来告知 webpack 使用相应环境的内置优化

Webpack重要知识点

为了使用tree shaking,需要满足以下条件:使用ES2015语法(即import和export),在项目package.json文件中,添加sideEffects入口,引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如:UglifyJSPlugin)

提升webpack构建速度

减少resolve解析;把 loader 应用的文件范围缩小,只在最少数必须的代码模块中去使用必要的 loader;减少 plugin 的消耗,webpack 的 plugin 会在构建的过程中加入其它的工作步骤

什么是webpack?Webpack的核心概念

Webpack已经流行好久了,但很多同学使用webpack时还是一头雾水,一下看到那么多文档、各种配置、各种loader、plugin立马就晕头转向了。我也不例外,以至于很长一段时间对webpack都是一知半解的状态

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

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

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