webpack系统学习

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack 4.0 的四个核心概念

• 入口（entry）
• 输出（output）
• loader
• 插件（plugins）

入口（entry）

 是指webpack开始分析文件的起点，可以配置多个，以适配多页面

  

   

    

     

    
    

     

      // 单页面配置
     
    
   

    

     

    
    

     

      module.exports = {
     
    
   

    

     

    
    

     
  entry: './path/to/my/entry/file.js'
     
    
   

    

     

    
    

     

      };
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      // 多页面配置
     
    
   

    

     

    
    

     

      moudle.exports = { 
     
    
   

    

     

    
    

     
  entry: {
     
    
   

    

     

    
    

     
    app: './src/app.js'
     
    
   

    

     

    
    

     
    vendors: './src/verdors.js'
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     

      }
     
    
  
 

在多页面应用中，每当页面跳转时服务器会为你获取一个新的html，页面重新加载新文档，并且资源被重新下载，然而，这给我们特殊的机会去做更多的事情

使用CommonsChunkPlugin 为每个页面间的应用程序共享代码创建bundle，由于入口起点增多，多页应用能够复用入口起点之前的大量代码/模块，从而可以极大地从这些技术中收益

出口 （output）

webpack中使用output属性来控制如何向硬盘写入编译文件，即使多个入口，但最后的输出配置只能有一个

output的属性最简单的是

• filename 用于输出文件的文件名
• 目标输出目录path的绝对路径

  

   

    

     

    
    

     

      const config = {
     
    
   

    

     

    
    

     

        output：{
     
    
   

    

     

    
    

     
    filename: 'bundle.js',
     
    
   

    

     

    
    

     
    path: '/home/proj/public/assets'
     
    
   

    

     

    
    

     

        }
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      module.exports = config
     
    
  
 

此配置是将单独的bundle.js 文件输出到/home/proj/public/asstes/ 目录中

多个入口起点 使用占位符如下面的 [name]

  

   

    

     

    
    

     

      {
     
    
   

    

     

    
    

     
    entry: {
     
    
   

    

     

    
    

     
      app:'./src/app.js',
     
    
   

    

     

    
    

     
      search: './src/search.js'
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
    output: {
     
    
   

    

     

    
    

     
      filename: '[name].js',
     
    
   

    

     

    
    

     
      path: __dirname + '/dist'
     
    
   

    

     

    
    

     

          }    
     
    
   

    

     

    
    

     

      }
     
    
  
 

 使用cdn和资源hash的复杂示例

  

   

    

     

    
    

     

      output: {
     
    
   

    

     

    
    

     
  path: "/home/proj/cdn/assets/[hash]",
     
    
   

    

     

    
    

     
  publicPath: "http://cdn.example.com/assets/[hash]/"
     
    
   

    

     

    
    

     

      }
     
    
  
 

loader

loader 用于对模块的源代码进行转换。 loader 可以使你在 import 或"加载"模块时预处理文件

loader运行你自定义扩展项目中的文件，使用对应的loade编译成js， css， html

loader配置在rules数组数组中

其中每一条记录，test表示正则匹配的文件范围

loader表示loader的名称

loader的配置有三种

• 配置: 在webpack.config.js 文件中制定loader
• 内联： 在每个import语句中显式指定loader
• CLI：在shell命令中指定它们

配置的案例

  

   

    

     

    
    

     

      module:{
     
    
   

    

     

    
    

     
 rules: [
     
    
   

    

     

    
    

     

         {
     
    
   

    

     

    
    

     
     test: /\.css$/,
     
    
   

    

     

    
    

     
     use: [
     
    
   

    

     

    
    

     

             {loader: 'style-loader'},
     
    
   

    

     

    
    

     

             {loader: 'css-loader',
     
    
   

    

     

    
    

     

              {
     
    
   

    

     

    
    

     
           options: {modules:true}
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

           ]
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      ]
     
    
   

    

     

    
    

     

      }
     
    
  
 

内联

import Styles from 'style-loader!css-loader?modules!./styles.css';
 

CLI

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
 

loader 特性

loader支持链式传递， 一个文件可能会被多个loader处理，前一个loader返回值给下一个loader，在最后一个loader

，返回webpack所预期的JavaScript

loader可以是异步的，也可以是同步的

loader运行在Node.js中，并且能够执行任何可能的操作

loader接受查询参数，用于对loader传递配置

loader也能够使用options对象进行配置

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/103712306