webpack学习之路

时间  2019-11-16
标签 webpack 学习 之路 繁體版
原文   原文链接

当本身在学习webpack的时候，在网上发现中文的很详细的教程不多，因而便想将本身学习webpack的笔记记录整理下来，便有了这篇文章，但愿对你们有所帮助，若是有错误，欢迎你们指出。css

在咱们开始以前

  • webpack有多种加载器(Loader,后面会介绍),能够处理各类须要被处理的静态文件
  • webpack支持CommonJs AMD CMD规范

  • 在使用webpack的项目中，默认配置文件为webpack.config.js, 模块文件，和Node写法同样，对外暴露接口,主要属性有:html

    • plugins插件项
    • entry入口文件配置项
    • output对应输出项配置
    • module.loaders 最关键的配置，告知webpack不一样的文件须要什么加载器进行处理

  • 模块系统的几种类型react

    • <script>标签类型webpack

      • 缺点
        • 全局做用域下形成变量的冲
        • 文件加载顺序很重要
        • 模块与模块之间的依赖要解决
        • 在大型项目中难以维护和管理

    • CommonJsgit

      • 优势github

        • 服务端模块可以重复利用
        • 有优秀的包管理工具npm
        • 简单，上手容易

      • 缺点web

        • 不适合浏览器端的使用
        • 不能作到并行加载模块

    • AMD正则表达式

      • 优势npm

        • 适合浏览器的异步加载机制
        • 并行加载模块
      • 缺点
        • 代码难以经营和维护

    • ES6json

      • 优势

        • 将来的ES规范

      • 缺点

        • 浏览器对ES6的支持还须要一段时间
        • 可以依赖的现有的模块少

' 转换 ' 的思想

模块要可以在客户端中去执行，则必须将它们从 server => browser

  • 极端的想法:

    • 一个请求一个模块 只有须要的模块会被转换，可是耗费资源，时间长
    • 全部请求都在一个模块 不须要的模块也会被转换 时间短，耗费资源少

  • 分块转换的想法:

    • 将众多的模块切成许多片，在初始化时的请求不会包括完整的代码，而且在初始化时不须要的模块切片会在后续加载过程当中按需加载。而且将模块化的切片方式是能够有开发人员本身定义的。

wepback它的目标是是什么？

webpack它能将依赖的模块转化成能够表明这些包的静态文件

它的目标有

  • 将依赖的模块分片化，而且按需加载
  • 解决大型项目初始化加载慢的问题
  • 每个静态文件均可以当作一个模块
  • 能够整合第三方库
  • 可以在大型项目中运用
  • 能够自定义切割模块的方式

webpack较之其余相似工具备什么不一样？

  • 有同步和异步两种不一样的加载方式
  • Loader,加载器能够将其余资源整合到JS文件中，经过这种方式，能够讲全部的源文件造成一个模块
  • 优秀的语法分析能力，支持 CommonJs AMD 规范
  • 有丰富的开源插件库，能够根据本身的需求自定义webpack的配置

webpack为何要将全部资源放在一个文件里面？

咱们知道，对于浏览器来讲，加载的资源越少，响应的速度也就越快，因此有时候咱们为了优化浏览器的性能，会尽量的将资源合并到一个主文件app.js里面。可是这致使的很大的缺点：

  • 当你的项目十分庞大的时候，不一样的页面不能作到按需加载，而是将全部的资源一并加载，耗费时间长，性能下降。
  • 会致使依赖库之间关系的混乱，特别是大型项目时，会变得难以维护和跟踪。好比:哪些文件是须要A模块加载完后才能执行的？哪些页面会受到多个样式表同时影响的？ 等许多问题。

而webpack能够很好的解决以上缺点,由于它是一个十分聪明的模块打包系统，当你正确配置后，它会比你想象中的更强大，更优秀。

开启wbpack之旅

安装webpack

  • 咱们能够直接使用npm进行全局安装

    npm install webpack -g

  • 在常规项目中把webpack依赖加入到package.json

    npm init npm install webpack --save

更详尽的安装方法个能够参考webpack安装

webpak命令行常见使用的操做

启动

webpack

若是你想当改变一个文件而让webpack实时编译

webpack --watch

若是你想把默认的配置文件webpack.config.js改为自定义文件

webpack --config customconfig.js

webpack的用法

首先先贴上一个比较完整的webpack.config.js的代码，再详细介绍：

 

 
 
// webpack.config.js
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    }),
    new webpack.optimize.OccurenceOrderPlugin()
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    }]
  }
}
 

 

就像我在前面提到的，webpack.config.js的写法和在Node里的写法相同，咱们主要看的就是文件中的module.exports里面的内容
 

     
 
  • entry 是指入口文件的配置项，它是一个数组的缘由是webpack容许多个入口点。
    •  
 
  •  
    output是指输出文件的配置项
     
  
       
   
    • path － 表示输出文件的路径
      •  
   
    • filename - 表示输出文件的文件名
      •  
  
     
    •  
 
  •  
    plugins 顾名思义，使用插件能够给webpack添加更多的功能，使webpack更加的灵活和强大,webpack有两种类型的插件:
     
  
       
   
    •  
      webpack内置的插件
       
    
       
     
      // 首先要先安装webpack模块
var webpack = require("webpack");

module.exports = {
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    })
};
       
    
       
      •  
   
    •  
      webpack外置插件
       
      好比:
       
    
       
     
      //npm install component-webpack-plugin 先要在安装该模版
var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
    plugins: [
        new ComponentPlugin()
    ]
}
       
    
       
       
       
      •  
  
     
    更多的插件以及插件的用法，你们能够到webpack的插件上查看。
     
  
       
   
    •  
      module 配置处理文件的选项
       
    
         
     
      •  
        loaders 一个含有wepback中能处理不一样文件的加载器的数组
         
      
           
       
        • test 用来匹配相对应文件的正则表达式
          •  
       
        • loaders 告诉webpack要利用哪一种加载器来处理test所匹配的文件
          •  
      
         
        •  
     
      •  
        loaders 的安装方法
         
        $ npm install xxx-loader --save-dev
         
        •  
    
       
      •  
  
     
    •  

 

讲到这里，我相信你们都会对wepback有了更深的认识，可是却十分的松散，不能把它们串起来，那接下来我就用几个小的demo来让你们梳理梳理起来
 

举个例子
 

首先请你们创建一个和我同样文件结构的文件夹，在这里我也说明下这个demo大概要作的事情，就是将css文件都打包放到一个js文件，而且对图片解压，而且要对这个js文件进行自动压缩。
 

 

 
 
DemoOne
|- dist
|- src
    |- index.js
    |- index.html
    |- style.css
    |- demo.png(随便找一张图片就能够)
|- package.json
|- webpack.config.js
 

 

首先看index.html代码
 

 
 
  <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo1</title>
    </head>
    <body>
        <div>Hello,world</div>
        <img src="./demo.png" alt="">
        <script src="../dist/bundlle.js"></script>
    </body>
   </html>
 

 

再看style.css
 

 

 
 
body{
    background:red;
}
 

 

 

 
 

 

这个时候咱们尚未写webpack.config.js,打开index.html,会看到image
 

打开控制台后，你会发现image
 

接下来，咱们在webpack.config.js下加上以下代码
 

 

 
 
// webpack.config.js
var path = require('path')
var webpack = require('webpack');

module.exports = {
  entry: ['./src/index'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false,
      },
    })
  ],
  module: {
    loaders: [{
      test: /\.css$/,
      loaders: ['style', 'css']
    },
    {
        test: /\.(png|jpg)$/,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    }]
  }
}
 

 

固然，在开始用webpack以前，要先安装相对应的模块，解析css文件 图片文件以及由于要对文件进行压缩，因此也要用到上文中所说的webpack自身内置的插件,因此也要导入webpack模块
 

$ npm install style-loader css-loader image-webpack-loader webpack --save-dev
 

安装好以后使用webpack命令后会有这样的提示image
 

可是这个时候你打开浏览器会发现，页面依旧没有什么效果，这是确定的！我想你们确定知道下一步该怎么作了，没错！在入口文件里面增长内容
 

require('./style.css'); require('./demo.png');
 

再运行webpack,出现上图相似提示后，打开浏览器，你会发现变成了这个样子image
 

而且在dist文件夹内，多出了两个文件，一个f1341ce5ea165e06ec3358441b52d5ea.png（随机产生的名字）若是你想得到这个名字，能够将require('./demo.png')输出查看，以及还有bundle.js,比较图片先后的大小，
 

imageimage
 

能够发现，文件大小发生了改变。打开bundle.js你会发现该文件也被压缩了。是否是感受很神奇？！ 还有一个比较好玩的插件htmlwebpackplugin能够点击这里看看，把上面的例子改变下哦。
 

最后
 

我相信看到这里你对webpack必定有了必定的认识，其实webpack还有不少强大的功能，好比，webpack-dev-server能够自动生成一个小型的NodeJs Express服务器从而实现webpack十分实用的功能热替换(HMR) 和其它的工具gulp grunt等一块儿使用。。。最后值得一提的是react和webpack是一对绝佳cp啊，有木有！！


        

            

        	





    

		

            
相关文章

            

                

                

                    

                

            


            
相关标签/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公众号
    

    

           欢迎关注本站公众号,获取更多信息

        
    




    

    




	


	







    

        联系我们
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程