详解webpack进阶之插件篇


Posted in Javascript onJuly 06, 2017

一、插件篇

1. 自动补全css3前缀

autoprefixer

官方是这样说的:Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website,也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。

举个栗子:最新的弹性盒模型flux

实际代码:

:fullscreen a {
 display: flex
}

插件自动补充后

a {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex
}

效果显而易见,我们可以更专注于css布局和美化,而不需要花过多的精力都写相同的外码而加上不同的前缀,也减少了冗余代码。

使用方法:

cnpm install --save-dev autoprefixer postcss-loader
var autoprefixer = require('autoprefixer');
module.exports={
 //其他配置这里就不写了

 module:{
 loaders:[
 {
  test:/\.css$/,
  //在原有基础上加上一个postcss的loader就可以了
  loaders:['style-loader','css-loader','postcss-loader']
  }
  ]
 },
 postcss:[autoprefixer({browsers:['last 2 versions']})]

}

2. 自动生成html插件

html-webpack-plugin

cnpm install html-webpack-plugin --save-dev
//webpack.config.js
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports={
 entry:'./index.js',
 output:{
  path:__dirname+'/dist',
  filename:'bundle.js'
 }
 plugins:[
  new HtmlWebpackPlugin()
 ]
 }

作用:它会在dist目录下自动生成一个index.html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Webpack App</title>
 </head>
 <body>
 <script src="bundle.js"></script>
 </body>
</html>

其他配置参数:

{
 entry: 'index.js',
 output: {
 path: 'dist',
 filename: 'bundle.js'
 },
 plugins: [
 new HtmlWebpackPlugin({
  title: 'My App',
  filename: 'admin.html',
  template:'header.html',
  inject: 'body',
  favicon:'./images/favico.ico',
  minify:true,
  hash:true,
  cache:false,
  showErrors:false,
  "chunks": {
  "head": {
  "entry": "assets/head_bundle.js",
  "css": [ "main.css" ]
  },
  xhtml:false
 })
 ]
}
--- header.html ---
<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
 <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
 </body>
</html>

作用:

  1. title: 设置title的名字  
  2. filename: 设置这个html的文件名  
  3. template:要使用的模块的路径 
  4. inject: 把模板注入到哪个标签后 'body',  
  5. favicon: 给html添加一个favicon  './images/favico.ico',  
  6. minify:是否压缩  {...} | false (最新api变动,原来是ture|false 感谢@onmi指正)
  7. hash:是否hash化 true false ,    
  8. cache:是否缓存,  
  9. showErrors:是否显示错误, 
  10. chunks:目前没太明白 
  11. xhtml:是否自动毕业标签 默认false 

3. 提取样式插件

extract-text-webpack-plugin

官网是这么解释的Extract text from bundle into a file.,把额外的数据加到编译好的文件中

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
 module: {
  loaders: [
   { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
    template: './src/public/index.html',
    inject: 'body'
   }),
  new ExtractTextPlugin("[name].[hash].css")
 ]
}

说明:将css放到index.html的body上面

4. 拷贝资源插件

copy-webpack-plugin

官方这样解释 Copy files and directories in webpack,在webpack中拷贝文件和文件夹

cnpm install --save-dev copy-webpack-plugin
new CopyWebpackPlugin([{
 from: __dirname + '/src/public'
}]),

作用:把public 里面的内容全部拷贝到编译目录

参数 作用 其他说明
from 定义要拷贝的源目录 from: __dirname + '/src/public'
to 定义要烤盘膛的目标目录 from: __dirname + '/dist'
toType file 或者 dir 可选,默认是文件
force 强制覆盖先前的插件 可选 默认false
context 不知道作用 可选 默认 base context 可用 specific context
flatten 只拷贝文件不管文件夹 默认是false
ignore 忽略拷贝指定的文件 可以用模糊匹配

5. 全局挂载插件

webpack.ProvidePlugin [webpack内置插件 ]

new webpack.ProvidePlugin({
 $: "jquery",
 jQuery: "jquery",
 "window.jQuery": "jquery"
}))
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.CommonsChunkPlugin('common.js')

作用: 和上面5个一一对应

  1.   当模块使用这些变量的时候,wepback会自动加载。(区别于window挂载,感谢@lihuanghe121指正)
  2.   不显示错误插件
  3.   查找相等或近似的模块,避免在最终生成的文件中出现重复的模块
  4.   丑化js 混淆代码而用
  5.   提取公共代码的插件

二、一个完整的栗子

'use strict';

// Modules
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

/**
 * Env
 * Get npm lifecycle event to identify the environment
 */
var ENV = process.env.npm_lifecycle_event;
var isTest = ENV === 'test' || ENV === 'test-watch';
var isProd = ENV === 'build';

module.exports = function makeWebpackConfig() {
 var config = {};

 config.entry = isTest ? {} : {
  app: './src/app/app.js'
 };

 config.output = isTest ? {} : {
  // Absolute output directory
  path: __dirname + '/dist',

  publicPath: isProd ? '/' : 'http://localhost:8080/',

  filename: isProd ? '[name].[hash].js' : '[name].bundle.js',

  chunkFilename: isProd ? '[name].[hash].js' : '[name].bundle.js'
 };

 if (isTest) {
  config.devtool = 'inline-source-map';
 } else if (isProd) {
  config.devtool = 'source-map';
 } else {
  config.devtool = 'eval-source-map';
 }

 config.module = {
  preLoaders: [],
  loaders: [{
   test: /\.js$/,
   loader: 'babel',
   exclude: /node_modules/
  }, {
   test: /\.css/,
   loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
  }, {
   test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
   loader: 'file'
  }, {
   test: /\.json$/,
   loader: 'json'
  }, {
   test: /\.scss/,
   loader: 'style!css!sass'
  }, {
   test: /\.html$/,
   loader: 'raw'
  }]
 };
 if (isTest) {
  config.module.preLoaders.push({
   test: /\.js$/,
   exclude: [
    /node_modules/,
    /\.spec\.js$/
   ],
   loader: 'isparta-instrumenter'
  })
 }

 config.postcss = [
  autoprefixer({
   browsers: ['last 2 version']
  })
 ];

 config.plugins = [];
 if (!isTest) {
  config.plugins.push(
   new HtmlWebpackPlugin({
    template: './src/public/index.html',
    inject: 'body'
   }),

   new ExtractTextPlugin('[name].[hash].css', {disable: !isProd})
  )
 }

 if (isProd) {
  config.plugins.push(
   new webpack.NoErrorsPlugin(),

   new webpack.optimize.DedupePlugin(),

   new webpack.optimize.UglifyJsPlugin(),

   new CopyWebpackPlugin([{
    from: __dirname + '/src/public'
   }]),
   new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
   }))
 }

 config.devServer = {
  contentBase: './src/public',
  stats: 'minimal'
 };

 return config;
}();

三、调试技巧

if (isTest) {
 config.devtool = 'inline-source-map';
}

作用: 使用source-map可以在debug的时候看到源代码,方便 查错

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 #Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 #Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 #Javascript
AngularJS常见过滤器用法实例总结
Jul 06 #Javascript
Vue学习之路之登录注册实例代码
Jul 06 #Javascript
AngularJS中ng-class用法实例分析
Jul 06 #Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 #jQuery
You might like
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
php显示时间常用方法小结
2015/06/05 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
Date对象格式化函数代码
2010/07/17 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Python3中的bytes和str类型详解
2019/05/02 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
给全校老师的建议书
2014/03/13 职场文书
医院院务公开实施方案
2014/05/03 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
花木兰观后感
2015/06/10 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python
MySQL数据库事务的四大特性
2022/04/20 MySQL
openstack云计算keystone组件工作介绍
2022/04/20 Servers