zoukankan      html  css  js  c++  java
  • webpack 四个核心概念

    webpack 是当下最热门的前端资源模块化和打包工具。它可以将许多松散的模块(如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等)按照依赖和规则打包成符合生产环境部署的前端资源。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图表,其中包含应用程序需要的每个模块,然后将这些模块打包成一个或多个 bundler,由浏览器加载

    在了解 webpack 使用配置时,我们必须首先要熟悉下面四个核心概念:

    • entry:入口
    • output:出口
    • loaders:加载器
    • plugins:插件

    一、entry:入口

    在 webpack 执行处理应用程序时,会形成一个依赖关系图表。在这个图表的起点就是入口起点(entry point),进入这个入口后,webpack 就可以计算出入口点依赖的模块和库。
    如何在 webpack.config.js 中配置入口点呢?

    单个入口语法

    用法: entry: string |Array<sting>

    1 // webpack.config.js
    2 const config = {
    3   entry: './path/to/my/entry/file.js'
    4 };
    5 
    6 module.exports = config;

    单个入口简写:

    1 // webpack.config.js
    2 const config = {
    3   entry: {
    4     main: './path/to/my/entry/file.js'
    5   }
    6 };

    当你想要注入多个依赖文件时,可以向 entry 属性传入一个数组,数组是由文件路径组成。这样可以快速地设置 webpack 的配置,创建“多个主入口(multi-main entry)”,但这种方法不利于配置的扩展。

    对象语法

    用法:entry: {[entryChunkName: string]: string|Array<string>}

    1 // webpack.config.js
    2 const config = {
    3   entry: {
    4     app: './src/app.js',
    5     vendors: './src/vendors.js' 
    6   }
    7 }

    对象语法虽然繁琐,但是它是应用程序入口最可扩展的方式。
    **“可扩展的 webpack 配置”是指,可重用并且可以与其他配置组合使用。用于将关注点从环境、构建目标、运行时中分离。然后使用专门的工具(如 webpack-merge)将它们合并。

    常用场景

    1、分离应用程序和第三方库入口

    1 // webpack.config.js
    2 const config = {
    3   entry: {
    4     app: './src/app.js',
    5     vendors: './src/vendors.js'
    6   }
    7 };

    webpack 创建的依赖图是彼此完全分离、相互独立的,上述写法比较适用于单页面应用程序。
    执行 webpack 时,会使用 commonChunkPlugin 从 bundle 文件中提取 vendor 引用到 vendor bundle,并把引用 vendor 的部分替换为 webpack_require() 调用。
    2、多页面应用程序

    1 // webpack.config.js
    2 const config = {
    3   entry: {
    4     pageOne: './src/pageOne/index.js',
    5     pageTwo: './src/pageTwo/index.js',
    6     pageThree: './src/pageThree/index.js'
    7   }
    8 }

    webpack 在多页面应用中,会使用 commonChunkPlugin 为每个页面应用创建 bundle 文件,在入口起点中时每个页面都能对代码和模块实现复用。

    二、output:输出

    这是属性的作用是:控制 webpack 如何向硬盘写入编译文件。需要注意的是,即使是存在多个入口起点,也只指定一个输出配置
    1、用法
    在 output 属性中需要配置 filename 和 path 两个配置项:

    • filename:输出文件的文件名
    • path:目标输出的目录,是一个绝对路径
    // webpack.config.js
    const config = {
      output: {
        filename: 'bundle.js',
        path: '/home/proj/public/assets'
      }
    };
    
    module.exports = config;

    此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。
    2、多个入口起点
    如果配置中存在多个入口起点,则需要使用一定的标识符确保每个输出的文件名的唯一性。

     1 // webpack.config.js
     2 {
     3   entry: {
     4     app: './src/app.js',
     5     search: './src/search.js'
     6   },
     7   output: {
     8     filename: '[name].js',
     9     path: __dirname + '/dist'
    10   }
    11 }
    12 
    13 // 写入到硬盘:./dist/app.js, ./dist/search.js

    为了确保每个输出 bundle 名称的唯一性,需要借用一下方式来替换:

     1 // 1、使用入口名称
     2 filename: "[name].bundle.js"
     3 
     4 // 2、使用内部 chunk id
     5 filename: "[id].bundle.js"
     6 
     7 // 3、使用每次构建生成的唯一的 hash 
     8 filename: "[name].[hasn].bundle.js"
     9 
    10 // 4、使用基于每个 chunk 内容的 hash
    11 filename:“[chunkhash].bundle.js”

    三、loader:加载器

    loader 是用于对模块的源代码进行转换。在需要加载模块时对其做预处理,它可以将文件从不同的语言(如 typescript)转换为 JavaScript,或将内联图像转为 data URL,甚至允许你直接在 JavaScript 模块中 import CSS文件。
    1、使用 loader 的三种方式

    • 配置(推荐):在 webpack.config.js 文件中指定 loader
    • 内联: 在每个 import 语句中显示指定 loader
    • CLI: 在 shell 命令中指定它们
      配置:
      在 modul.rules 中允许你在 webpack 配置中指定多个loader。
     1   module: {
     2     rules: [
     3       {
     4         test: /.css$/,
     5         use: [
     6           { loader: 'style-loader' },
     7           {
     8             loader: 'css-loader',
     9             options: {
    10               modules: true
    11             }
    12           }
    13         ]
    14       }
    15     ]
    16   }

    内联

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

    使用 ! 将资源中的 loader 分开,分开的每部分都相对于当前目录解析。通过前置所有规则及使用 !,通过对选项传递查询参数,可以对应覆盖到配置中的任意 loader。
    CLI

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

    上述是使用 webpack 命令,对 .jade 文件使用 jade-loader,对 .css 文件使用 style-loader 和 css-loader。
    2、loader 所具有的特性

    • loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个loader 返回值给下一个 loader。在最后一二 loader,返回 webpack 所预期的 JavaScript。
    • loader 可以是同步的,也可以是异步的
    • 运行在node.js 中,并且能够执行任何可能的操作。
    • 接收查询参数,用于对 loader 传递配置
    • 可以使用 options 对象进行配置
    • 除了使用package.json 常见的 main 属性,还可以将普通的 你怕吗 模块导出为 loader
    • 插件可以为 loader 带来更多特性
    • loader 能够产生而外的任意文件

    四、plugins:插件

    webpack 中的插件的出现,主要是为了实现 loader 无法实现的功能,是webpack 中核心部分。
    webpack 插件是一个具有 apply 属性的 JavaScript 对象,apply 属性会被 webpack 编译器调用,并且编译器对象可以在整个编译生命周期访问。
    用法
    在 webpack 配置中,你可以携带参数或者选项,想 plugins 属性中传入 new 实例:
    1、在配置中传入 new 实例

     1 // webpack.config.js
     2 const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
     3 const webpack = require('webpack'); //访问内置的插件
     4 const path = require('path');
     5 
     6 const config = {
     7   entry: './path/to/my/entry/file.js',
     8   output: {
     9     filename: 'my-first-webpack.bundle.js',
    10     path: path.resolve(__dirname, 'dist')
    11   },
    12   module: {
    13     rules: [
    14       {
    15         test: /.(js|jsx)$/,
    16         use: 'babel-loader'
    17       }
    18     ]
    19   },
    20   plugins: [
    21     new webpack.optimize.UglifyJsPlugin(),
    22     new HtmlWebpackPlugin({template: './src/index.html'})
    23   ]
    24 };
    25 
    26 module.exports = config;

    2、Node API 传入 new 实例

  • 相关阅读:
    JMX rmi的一些问题
    hdu 1022 Train Problem I
    大学的英文名及缩写
    大学的英文名及缩写
    围棋术语
    围棋术语
    走遍美洲 —— 加勒比海
    走遍美洲 —— 加勒比海
    图像处理与计算机视觉的论文创新点总结
    图像处理与计算机视觉的论文创新点总结
  • 原文地址:https://www.cnblogs.com/yeanling/p/11145187.html
Copyright © 2011-2022 走看看