当前位置:首页 > 编程教程 > javascript技术文章 > 详解webpack进阶之插件篇

实例讲解webpack进阶之插件篇

  • 发布时间:
  • 作者:码农之家
  • 点击:140

这篇文章主要知识点是关于webpack、javascript、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

你不知道的JavaScript(中卷)
  • 类型:JS大小:7.8 MB格式:PDF作者:辛普森
立即下载

详解webpack进阶之插件篇

一、插件篇

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的时候看到源代码,方便 查错

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.848503

分享一则JavaScript滚动条插件源码

这是过年的时候自己写的js滚动条插件的源码,做出的效果自己并不满意,正因为做的并不满意所以回头重新巩固和深入学习js,这个插件有如下几个不太满意的地方: 内容的过度效果,可以参阅QQ客户端最近会话列表里的滚动条,它的滚动非常的平滑,简单的说就是缺少动画过渡效果。 并不算完美的兼容性,在IE6、7下的style仍然有点缺憾。 样式的不完美,例如鼠标悬浮才显示滚动条,移除后隐藏这种效果都没有写。 内部结构的混乱,需要调整内容结构。 滚动条那个图片毕竟不是美工,自己切图切的真是恶心到爆了...囧 总体来说还是可以看的,还是缺少一个动画。在写这个插件意识到自己的插件用到了一些比较基础的函数,于是想到把这些函数应该封装起来,最近仍然在深入学习js,把手头上这本书看完就应该着手写这个基础函数的插件了,当然,……

网友NO.893872

javascript获取指定区间范围随机数的方法

如下所示: //获取指定区间范围随机数,包括lowerValue和upperValuefunction randomFrom(lowerValue,upperValue){ return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);}//如获取2-6之间的随机数alert(randomFrom(2,6));//如获取1-10之间的随机数alert(randomFrom(1,10));//如获取1-100之间的随机数alert(randomFrom(1,100)); 以上这篇javascript获取指定区间范围随机数的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.963818

JavaScript中使用concat()方法拼接字符串的教程

这种方法将两个或多个字符串,并返回一个新的单字符串。 语法 string.concat(string2, string3[, ..., stringN]); 下面是参数的详细信息: string2...stringN : 这些是要连接字符串。 返回值: 返回一个连接字符串。 例子: htmlheadtitleJavaScript String concat() Method/title/headbodyscript type="text/javascript"var str1 = new String( "This is string one" );var str2 = new String( "This is string two" );var str3 = str1.concat( str2 );document.write("Concatenated String :" + str3); /script/body/html 这将产生以下结果: Concatenated String :This is string oneThis is string two. ……

网友NO.585105

JavaScript面对国际化编程时的一些建议

什么是国际化? 国际化(Internationalization的缩写是i18n——i,中间18个字符,n)是将软件处理的能让来自各种地方使用各种语言的用户更简单使用的一个过程。假定某个用户来自某个地方说某种语言,他可能不经意间就得到一些错误提示。尤其是你甚至都没有做这种假设。 function formatDate(d){ // Everyone uses month/date/year...right? var month = d.getMonth() + 1; var date = d.getDate(); var year = d.getFullYear(); return month + "/" + date + "/" + year;} function formatMoney(amount){ // All money is dollars with two fractional digits...right? return "$" + amount.toFixed(2);} function sortNames(names){ function sortAlphabetically(a, b) { var left = a.toLowerCase(), right = b.toLowerCase(); if (left right) return 1; if (left === right) return 0; return -1; } // Names always sort alphabetically...right? names.sort(sortAlphabetically);} JavaScript过去的i18n支持太糟糕 传统JS的i18n程序使用toL……

网友NO.161330

JavaScript 跨域之POST实现方法

javascript 跨域是一个很常见的问题,其中 jsonp 是一个最常用的手段,但是 jsonp 只支持 get,不支持 post,所以如果想通过 jsonp 来 post 一些数据,就头大了。 此处通过在一个 iframe 中生成 form 表单的形式来实现 post,并通过 postMessage 来向调用者返回值。 第一步,我们先实现一个接受 jsonp 的后端代码,至于用什么语言实现,各位自已决定。 c#代码是: protected void Page_Load(object sender, EventArgs e) { StringBuilder sbRet = new StringBuilder(); sbRet.Append("script"); sbRet.Append(Request["jsoncallback"]); sbRet.Append("({"); foreach (string k in Request.Form) { if (k == "jsoncallback") continue; sbRet.Append("'"+k+"':'"+Request.Form[k]+"'"); } sbRet.Append("});"); sbRet.Append("/script"); Response.Write(sbRet.ToString()); Response.End(); } 比如说你想返回给我的是 { userName:'user1', password:'pass1' } , 当我调用 http://localhost/test?jsoncallback=callme 的时候……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com