详解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 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
AudioContext 实现音频可视化(web技术分享)
Feb 24 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
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
Python计算三角函数之asin()方法的使用
2015/05/15 Python
python实现简单爬虫功能的示例
2016/10/24 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
pandas计数 value_counts()的使用
2019/06/24 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
python对XML文件的操作实现代码
2020/03/27 Python
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
化学教师自荐信范文
2013/12/28 职场文书
小学教研工作制度
2014/01/15 职场文书
5s标语大全
2014/06/23 职场文书
优秀党员推荐材料
2014/12/18 职场文书
承诺函范文
2015/01/21 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
2016党员学习《反对自由主义》心得体会
2016/01/22 职场文书
Hive日期格式转换方法总结
2022/06/25 数据库