详解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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
原生js生成图片验证码
Oct 11 Javascript
让Vue响应Map或Set的变化操作
Nov 11 Javascript
一文搞懂redux在react中的初步用法
Jun 09 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 define函数的使用说明
2008/08/27 PHP
PHP clearstatcache()函数详解
2010/03/02 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
详解Python之unittest单元测试代码
2018/01/24 Python
Python测试人员需要掌握的知识
2018/02/08 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
英文简历中的自荐信范文
2013/12/14 职场文书