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 在哪里打包应用程序。webpack 的 output 属性描述了如何处理归拢在一起的代码(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 自身只理解 JavaScript。webpack 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;