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

时间: 2017-12-01阅读: 4911标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

webpack 中 import css 文件报错: Module build failed...

项目中引入了css文件,配置了 rules 中:在执行 webpack 命令时,发生错误,报错信息:Module build failed (from ./node_modules/css-loader/dist/cjs.js):CssSyntaxError,经查询,是loader顺序不正确导致此问题,修改后如下:

Webpack模块化原理图解

这时模块a,模板b中的代码都暴露在全局环境中,如果模块a中定义了一个方法del。同学b并不知道,在模块b中也定义了一个方法del。这时便造成了命名冲突的的问题。如图

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

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

18个webpack插件总有一款适合你的

何为插件(Plugin)?专注处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为插件。Plugin 是一个扩展器,它丰富了 webpack 本身,针对是 loader 结束后,webpack 打包的整个过程

如何写 Webpack 配置文件

本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手。webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。

浅谈Webpack打包工具的应用

webpack 在前端工程中随处可见,当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代,这是你值得选择的之一。

Webpack 4.0.0不再支持 Node.js 4

Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块

与Grunt、Gulp和Parcel相比,Webpack的强大之处

首先,Grunt和Gulp只能将一些CSS和JS文件分别压缩合并成单个文件,当然也具有一些编译功能,比如Less和Sass的编译、ES6到ES5的编译等等。但是Webpack不仅具有它们所具备的这些编译压缩合并功能,

webpack的异步加载原理及分包策略

webpack ensure 有人称它为异步加载,也有人称为代码切割,他其实就是将 js 模块给独立导出一个.js 文件,然后使用这个模块的时候,再创建一个 script 对象,加入到 document.head 对象中,浏览器会自动帮我们发起请求

我当初为什么写webpack_Tobias Koppers

Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。

点击更多...

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