webpack

来源:互联网 发布:php和c的区别 编辑:程序博客网 时间:2024/06/16 05:29

webpack学习之核心概念简单介绍(一)

Webpack 是一个模块打包器。
它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

webpack中文网大图

官方文档

官方对它的定义是:点击进入

四个核心概念

webpack是高度可配置的,在进行使用webpack之前,我们先了解下它的四个核心概念: 入口(entry)、输出(output)、loader、插件(plugins)。

入口(entry)

入口起点(entry point)。入口起点告诉 webpack 从哪里开始,并遵循着依赖关系图表知道要打包什么。可以将您应用程序的入口起点认为是根上下文(contextual root)或 app 第一个启动文件。

  • webpack中,我们使用wenpack配置对象(webpack configuration object)中的entry属性来定义接口,简单示例如下:
 // webpack.config.js module.exports = {  entry: './path/to/my/entry/file.js' };

根据不同应用程序的需要,声明 entry 属性有多种方式。了解更多

出口( Output )

将所有的资源(assets)归拢在一起后,还需要告诉 webpack 在哪里打包应用程序。webpackoutput 属性描述了如何处理归拢在一起的代码(bundled code)。

    // webpack.config.js    const path = require('path');    module.exports = {      entry: './path/to/my/entry/file.js',      output: {        path: path.resolve(__dirname, 'dist'),        filename: 'my-first-webpack.bundle.js'      }    };

loader

webpack 的目标是让 webpack 聚焦于项目中的所有资源(asset),而浏览器不需要关注考虑这些(明确的说,这并不意味着所有资源(asset)都必须打包在一起)。webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理。然而 webpack 自身只理解 JavaScriptwebpack loader 在文件被添加到依赖图中时,其转换为模块

webpack loader的两个目标

  1. 识别出应该被对应的 loader 进行转换的那些文件。(test 属性)
  2. 转换这些文件,从而使其能够被添加到依赖图中(并且最终添加到 bundle 中)(use 属性)
const path = require('path');const config = {  entry: './path/to/my/entry/file.js',  output: {    // 在任何模块文件内部,可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径。    path: path.resolve(__dirname, 'dist'),    filename: 'my-first-webpack.bundle.js'  },  module: {    rules: [      { test: /\.txt$/, use: 'raw-loader' }    ]  }};module.exports = config;
原创粉丝点击