webpack---使用插件,常见webpack的plugin,构建vue,react单页面/多页面工程APP必备插件

原创 2017年06月20日 23:56:26
  • 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:'http://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,它的计算方法是只计算模块本身的当前内容(包括同步模块)。

  • clean-webpack-plugin
const cleanWebpackPlugin=require('clean-webpack-plugin');


plugins:[
    new cleanWebpackPlugin(['./dist','./build']);
]

/// build之前清除上次构建生成工程目录dist,build,根据需求传参,可以为数组或字符串

  • clean-webpack-plugin
const progressbarWebpack = require('progress-bar-webpack-plugin');


plugins:[
    new progressbarWebpack ();
]

/// 打包过程,以百分比显示打包进度

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Wbiokr/article/details/73522522

webpack---webpack中经典实用的插件copy-webpack-plugin拷贝资源插件

- copy-webpack-plugin 在webpack中拷贝文件和文件夹cnpm install --save-dev copy-webpack-pluginnew CopyWebpackP...
  • Wbiokr
  • Wbiokr
  • 2017-06-11 00:25:33
  • 11148

copy-webpack-plugin

- copy-webpack-plugin  在webpack中拷贝文件和文件夹 cnpm install --save-dev copy-webpack-plugin1new CopyWebpa...
  • qianqian901108_
  • qianqian901108_
  • 2017-09-15 09:31:02
  • 1640

webpack 拷贝文件

特殊情况下需要通过webpack拷贝文件 可以引入https://github.com/kevlened/copy-webpack-plugin在webpack 在DEV下,copy 不会拷贝 ,需要...
  • ISaiSai
  • ISaiSai
  • 2017-02-16 11:09:33
  • 5232

webpack---htmlWbpackPlugin插件在webpack中的应用

安装cnpm install html-webpack-plugin配置title://生成的html文件的titlefilename://生成的html文件名字template://webpack引...
  • Wbiokr
  • Wbiokr
  • 2017-06-01 00:04:28
  • 599

webpack使用和踩过的坑

使用process.argv 获取命令行使用的参数“js // 判断是否带production参数,production会压缩js var isprod = false; for (var i ...
  • weizengxun
  • weizengxun
  • 2016-12-03 23:14:15
  • 26089

webpack 启动后自动打开浏览器插件:open-browser-webpack-plugin

在webpack.config文件中添加var OpenBrowserPlugin = require('open-browser-webpack-plugin'); plugins: [ ...
  • ISaiSai
  • ISaiSai
  • 2017-02-06 14:44:41
  • 7795

webpack入门学习4-browser(浏览器自动运行)

目录和入口、出口、loader配置,之前已经学习过了 现在我们学习一下,如果在webpack.config.js配置使得浏览器自动运行。 要让浏览器自动运行起来,要用open-browser-we...
  • boysky0015
  • boysky0015
  • 2017-05-14 14:01:35
  • 536

webpack部分插件介绍

在之前的react与webpack的搭配使用时介绍了webpack的基本使用及部分优化,而在实际的使用过程中还是遇到了一些其它问题,所以又把插件列表好好捋了一下,挑自己可能在日后工作用到的整理一下~可...
  • SYYling
  • SYYling
  • 2016-08-21 16:33:19
  • 3352

编写一个webpack插件

插件将Webpack引擎的全部潜能暴露给第三方开发人员。使用分段构建回调,开发人员可以将自己的行为引入Webpack构建过程。插件的开发比起加载器(loaders)的开发更近了一步,因为你需要用一些w...
  • liuqi332922337
  • liuqi332922337
  • 2016-12-10 20:46:01
  • 944

Webpack常用配置、插件总结

webpack常用配置、插件整合: 主要是认识webpack中常用配置项、插件. 这里有一篇不错的整合文章: 原文:《Webpack for React》 翻译:《入门webp...
  • u012720018
  • u012720018
  • 2017-01-06 16:04:25
  • 3672
收藏助手
不良信息举报
您举报文章:webpack---使用插件,常见webpack的plugin,构建vue,react单页面/多页面工程APP必备插件
举报原因:
原因补充:

(最多只允许输入30个字)