狼山资源网

详解webpack进阶之插件篇
网络编程 2024/11/14 佚名
3 2

一、插件篇

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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
webpack,插件开发,webpack,插件,webpack插件
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“详解webpack进阶之插件篇”

暂无“详解webpack进阶之插件篇”评论...
www.pvsay.com 狼山资源网
29,905影音资源
44,626技术资源
11,817软件资源
578,645站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

友情链接

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