详解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 相关文章推荐
js生成随机数的过程解析
Nov 24 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
vue地区选择组件教程详解
May 04 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
JS实现前端动态分页码代码实例
Jun 02 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/07/08 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
python中for语句简单遍历数据的方法
2015/05/07 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
python性能测试工具locust的使用
2020/12/28 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
大学信息公开实施方案
2014/03/09 职场文书
承诺书样本
2014/08/30 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
职代会闭幕词
2015/01/28 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
python 实现的截屏工具
2021/05/08 Python
redis实现排行榜功能
2021/05/24 Redis