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对象进行配置