Webpack의 4가지 기본 개념에 대한 자세한 설명

이전 말

　 Webpack은 현재 가장 널리 사용되는 프런트엔드 리소스 모듈식 관리 및 패키징 도구입니다. 종속성 및 규칙에 따라 프로덕션 환경 배포에 적합한 프런트엔드 리소스로 많은 느슨한 모듈을 패키징할 수 있습니다. webpack은 애플리케이션을 처리할 때 애플리케이션에 필요한 모든 모듈을 포함하는 종속성 그래프를 반복적으로 구축한 다음 이러한 모든 모듈을 브라우저 로드에서 사용되는 소수의 번들(일반적으로 하나)로 패키징합니다. 고도로 구성 가능하며 시작하기 전에 입력, 출력, 로더 및 플러그인의 네 가지 핵심 개념을 이해해야 합니다. 이 기사에서는 webpack의 네 가지 기본 개념을 자세히 소개합니다

Entrance

　Webpack은 모든 애플리케이션의 종속성 그래프를 생성합니다. 차트의 시작점을 진입점이라고 합니다. 진입점은 webpack이 시작할 위치를 알려주고 무엇을 번들링할지에 대한 종속성 그래프를 따릅니다. 애플리케이션의 진입점은 루트 컨텍스트 또는 앱의 첫 번째 시작 파일로 간주할 수 있습니다. requirejs의 항목 파일인 main.js와 유사하게 r.js를 사용하여 최종적으로 패키징되면 main.js에 패키징됩니다. . webpack에서는 webpack 구성 개체의 항목 속성을 사용하여 다음 방법을 포함하여 항목을 정의합니다.

[단일 항목(약어) 구문]

사용법: 항목: 문자열|배열

　 [참고] 항목 속성 설정 현재 페이지인 경우 속성 값 앞에 './'로 설정해야 하며, 그렇지 않으면 항목 속성의 단일 항목 구문은 다음 약어와 같습니다.

//webpack.config.jsvar config = {
  entry: './path/to/my/entry/file.js'};

항목을 배열 배열에 전달하면 "다중 기본 항목"이 생성됩니다

//webpack.config.jsvar config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

【객체 구문】

사용법: 항목: {[entryChunkName: string]: string|Array}

entry:['./entry1','./entry2']

　객체 구문이 더 복잡해집니다. 그러나 이는 애플리케이션에서 진입점을 정의하는 가장 확장 가능한 방법입니다.

위 코드에서 볼 수 있듯이 webpack은 app.js 및 Vendors.js에서 시작하는 종속성 그래프를 생성합니다. 이 차트는 서로 완전히 분리되어 있고 독립적입니다. 이 방법은 진입점이 하나만 있는 단일 페이지 애플리케이션에서 더 일반적입니다(벤더 제외)

Exit

　 모든 자산을 모은 후에도 webpack에 애플리케이션을 패키징할 위치를 알려주어야 합니다. webpack의 출력 속성은 번들 코드를 처리하는 방법을 설명합니다.

//webpack.config.jsvar config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

위 코드에서는 출력.filename 및 출력.path 속성을 통해 webpack에 번들 이름과 원하는 내용을 알려줍니다.

　 [참고] 진입점이 여러 개 있을 수 있더라도 출력 구성은 하나만 지정됩니다. 아래와 같이 출력 파일 이름은 [name] 또는 유사해야 하며 명확한 이름일 수 없습니다. 그렇지 않으면 충돌이 발생합니다. : 여러 자산이 동일한 파일 이름으로 내보내집니다. Bundle.js, 여러 항목으로 변환되면 내보내기 파일에서 동일한 파일 이름을 지정할 수 없습니다

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

　

【사용법】

webpack에서 출력 속성을 구성해야 합니다. 해당 값을 object 및 두 가지 필수 옵션을 포함합니다. filename 및 path attribute

　 filename: 컴파일된 파일의 파일 이름, 첫 번째 권장 사항은 다음과 같습니다. //main.js||bundle.js||index.js

path: 해당 한번에 패키징하고 싶은 디렉터리인 절대경로

  entry: {'main': './entry.js','hello':'./hello.js'
  },
  output: {
    path: __dirname,//出口路径filename: '[name].js'//出口名称
  }

【옵션】

output.chunkFilename

　비엔트리 청크(비엔트리 청크)의 파일명, 경로

 config ='bundle.js''/home/proj/public/assets'

output.crossOriginLoading

이 옵션은 교차 출처 로딩(교차 출처 로딩) ​​청크를 활성화할 수 있으며, 선택 값은 다음과 같습니다:

[id] 被chunk的id替换
[name] 被chunk的name替换（或者，在chunk没有name时使用id替换）
[hash] 被compilation生命周期的hash替换
[chunkhash] 被chunk的hash替换

output .devtoolLineToLine

　모든/지정된 모듈에 대해 라인 간 매핑 모드를 활성화합니다. 행 간 매핑 모드에서는 간단한 SourceMap을 사용합니다. 즉, 생성된 소스의 각 행이 원본 소스의 동일한 행에 매핑됩니다. 성능 최적화가 가능한 영역입니다. 더 나은 성능이 필요하고 입력 라인과 생성된 라인만 일치하는 경우

false - 禁用跨域加载(默认值)"anonymous" - 启用跨域加载。当使用 anonymous 时，发送不带凭据(credential)的请求。"use-credentials" - 启用跨域加载。发送带凭据(credential)的请求

output.filename

하드 디스크에 있는 각 출력 파일의 이름을 지정합니다. 여기서는 절대 경로를 지정할 수 없습니다. output.path 옵션은 파일이 기록되는 하드 디스크의 위치를 ​​지정합니다. filename은 각 파일의 파일 이름을 지정하는 데에만 사용됩니다

<span style="color: #0000ff;">true</span><span style="color: #000000;"> 在所有模块启用（不推荐）
{test, include, exclude} 对象，对特定文件启用（类似于 module.loaders）<br>默认值：</span><span style="color: #0000ff;">false</span>

//单个入口{
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/build'
  }
}

output.hotUpdateChunkFilename

　 Hot Update Chunk(Hot Update Chunk). 그들은 output.path 디렉토리에 있습니다

//多个入口{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',//被 chunk 的 name 替换path: __dirname + '/build'
  }
}

output.hotUpdateFunction

　 webpack

[id] 被chunk的id替换
[hash] 被compilation生命周期的hash替换。（最后一个hash存储在记录中）
默认值："[id].[hash].hot-update.js?1.1.11"

의 비동기 로드(async load) 핫 업데이트(핫 업데이트) 청크를 위한 JSONP 함수

output.hotUpdateMainFilename

　　热更新主文件(hot update main file)的文件名

[hash] 被compilation生命周期的hash替换。（最后一个hash存储在记录中）
默认值："[hash].hot-update.json"

output.jsonpFunction

　　webpack中用于异步加载(async loading)chunk的JSONP函数

　　较短的函数可能会减少文件大小。当单页有多个webpack实例时，请使用不同的标识符(identifier)

默认值："webpackJsonp"

output.library

　　如果设置此选项，会将bundle导出为library。output.library是library的名称。

　　如果正在编写library，并且需要将其发布为单独的文件，请使用此选项

output.libraryTarget

　　library的导出格式

"var" - 导出为一个变量： Library ="this" - 导出为  的一个属性：["Library"] ="commonjs" - 导出为 exports 的一个属性：exports["Library"] ="commonjs2" - 通过 module.exports：module.exports ="amd" - 导出为 AMD（可选命名 -"umd" -

　　如果output.library未设置，但是output.libraryTarget被设置为var以外的值，则「所导出对象」的每个属性都被复制到「对应的被导出对象」上（除了amd，commonjs2和umd）

output.publicPath

　　一般地，publicPath用于设置上线地址，在开发过程中，该值不需要设置

output: {
    filename:'main.js'path: "/home/proj/public/assets",
    publicPath: "http://cdn.com"}

　　以上面代码为例，最终main.js的线上地址是'http://cdn.com/home/proj/public/assets/main.js'

output.path

　　导出目录为绝对路径（必选项）

//config.jsoutput: {
    path: "/home/proj/public/assets",
    publicPath: "/assets/"}//index.html<head>
  <link href="/assets/spinner.gif"/>
</head>

//config.jsoutput: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"}

　　[注意]在编译时不知道最终输出文件的 publicPath 的情况下，publicPath 可以留空，并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath，你可以先忽略它，并且在入口起点设置 __webpack_public_path__

 __webpack_public_path__ = myRuntimePublicPath

output.sourceMapFilename

　　JavaScript 文件的 SourceMap 的文件名

[file] 被 JavaScript 文件的文件名替换
默认值："[file].map"

 

加载器

　　webpack的目标是，让webpack聚焦于项目中的所有资源(asset)，而浏览器不需要关注考虑这些。webpack把每个文件(.css,.html,.scss,.jpg,etc.)都作为模块处理。然而webpack只理解JavaScript。webpack loader会将这些文件转换为模块，而转换后的文件会被添加到依赖图表中

　　loader可以使你在require()或"加载"模块时预处理文件。因此，loader类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法

　　webpack的配置要能识别出(identify)应该被对应的loader进行转换(transform)的那些文件。由于进行过文件转换，所以能够将被转换的文件添加到依赖图表(并且最终添加到bundle中)(use属性)

var path = require('path');var config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  }
};
module.exports = config;

　　以上配置中，对一个单独的module对象定义了rules属性，里面包含两个必须属性：test和use。相当于告诉webpack compiler，碰到「在require()/import语句中被解析为'.js'或'.jsx'的路径」时，在把它们添加并打包之前，要先使用babel-loader去转换”

　　[注意]在webpack配置中定义loader时，要定义在module.rules中，而不是rules。在定义错误时webpack会给出严重的警告

【示例】

　　例如，使用loader加载CSS文件，或将TypeScript转为JavaScript。首先，安装对应的loader：

npm install --save-dev css-loader
npm install --save-dev ts-loader

　　其次，配置webpack.config.js，对每个.css文件使用css-loader，然后类似地，对每个.ts文件使用ts-loader：

//webpack.config.jsmodule.exports = {
  module: {
    rules: [
      {test: /\.css$/, use: 'css-loader'},
      {test: /\.ts$/, use: 'ts-loader'}
    ]
  }
};

　　[注意]根据配置选项，下面的规范定义了同等的loader用法：

{test: /\.css$/, loader: 'css-loader'}// 等同于{test: /\.css$/, use: 'css-loader'}// 等同于{test: /\.css$/, use: {
  loader: 'css-loader',
  options: {}
}}

【配置】

　　在应用程序中，有三种使用 loader 的方式：1、通过配置；2、在 require 语句中显示使用；3、通过 CLI

通过配置

　　module.rules允许在webpack配置中指定几个loader。 这是展示loader的一种简明的方式，并且有助于使代码变得简洁。而且对每个相应的loader有一个完整的概述

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader'},
        {
          loader: 'css-loader',
          options: {
            modules: true  }
        }
      ]
    }
  ]
}

通过require

　　可以在require语句（或define,require.ensure,等语句）中指定loader。使用!将资源中的loader分开。分开的每个部分都相对于当前目录解析

require('style-loader!css-loader?modules!./styles.css');

　　通过前置所有规则及使用!，可以对应覆盖到配置中的任意loader

　　选项可以传递查询参数，就像在web中那样（?key=value&foo=bar）。也可以使用JSON对象（?{"key":"value","foo":"bar"}）

通过CLI

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

　　这会对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader

【特性】

　　loader 支持链式传递。能够对资源使用流水线(pipeline)。loader 链式地按照先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript

　　loader 可以是同步或异步函数。loader 运行在 Node.js 中，并且能够执行任何可能的操作

　　loader 接收查询参数。用于 loader 间传递配置。loader 也能够使用 options 对象进行配置

　　除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段

　　插件(plugin)可以为 loader 带来更多特性。loader 能够产生额外的任意文件。

　　loader 通过（loader）预处理函数，为 JavaScript 生态系统提供了更多有力功能。用户现在可以更加灵活的引入细粒度逻辑，例如压缩(compression)、打包(package)、语言翻译(language translation)和其他更多

【解析】

　　loader 遵循标准的模块解析。多数情况下，loader 将从模块路径（通常将模块路径认为是 npm install, node_modules）解析。

　　loader 模块需要导出为一个函数，并且使用 Node.js 兼容的 JavaScript 编写。在通常情况下，可以使用 npm 来管理 loader，也可以将 loader 模块作为应用程序中的文件。按照约定，loader 通常被命名为 xxx-loader（例如 json-loader）

 

插件

　　插件是wepback的支柱功能。在使用webpack配置时，webpack自身也构建于同样的插件系统上。插件目的在于解决loader无法实现的其他事情。由于loader仅在每个文件的基础上执行转换，而插件(plugins)最常用于（但不限于）在打包模块的“compilation”和“chunk”生命周期执行操作和自定义功能。webpack的插件系统极其强大和可定制化。

　　想要使用一个插件，只需要require()它，然后把它添加到plugins数组中。多数插件可以通过选项(option)自定义。也可以在一个配置文件中因为不同目的而多次使用同一个插件，需要使用new创建实例来调用它

【剖析】

　　webpack插件是一个具有apply属性的JavaScript对象。apply属性会被webpack compiler调用，并且compiler对象可在整个compilation生命周期访问

//ConsoleLogOnBuildWebpackPlugin.jsfunction ConsoleLogOnBuildWebpackPlugin() {

};
ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
  compiler.plugin('run', function(compiler, callback) {
    console.log("webpack 构建过程开始！！！");

    callback();
  });
};

【用法】

　　由于plugin可以携带参数/选项，必须在wepback配置中，向plugins属性传入new实例

var HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装var webpack = require('webpack'); //访问内置的插件var path = require('path');var config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader'  }
    ]
  },
  plugins: [new webpack.optimize.UglifyJsPlugin(),new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;

 

위 내용은 Webpack의 4가지 기본 개념에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!