富贵资源网

详解webpack进阶之插件篇
站长资源 2024/11/13 佚名
76 1538
富贵资源网 Design By www.hznty.com

一、插件篇

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="/UploadFiles/2021-04-02/bundle.js">


其他配置参数:







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



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. 
  
  2.   不显示错误插件
    3. 
  
  3.   查找相等或近似的模块，避免在最终生成的文件中出现重复的模块
    4. 
  
  4.   丑化js 混淆代码而用
    5. 
  
  5.   提取公共代码的插件
    6. 



二、一个完整的栗子







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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
www.hznty.com 富贵资源网
20,135影音资源
44,641技术资源
2,817软件资源
435,032站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
富贵资源网 Design By www.hznty.com