webpack--모듈 패키저에 대한 자세한 설명
- 零下一度원래의
- 2017-06-26 09:48:371972검색
말씀
webpack이 등장하기 전에 이미 시장에 존재했던 모듈 관리 및 패키징 도구는 대규모 프로젝트, 특히 단일 페이지 웹 애플리케이션에는 적합하지 않았습니다. 가장 시급한 이유는 대규모 코드 베이스에서 다양한 모듈 리소스의 분할 및 저장을 유지하고, 이들 간의 종속성을 유지하며, 이들을 원활하게 통합하여 브라우저 측 정적 리소스에 적합한 콘텐츠를 생성하는 방법입니다. Webpack은 현재 프런트엔드 리소스를 위한 가장 널리 사용되는 모듈식 관리 및 패키징 도구입니다. 종속성 및 규칙에 따라 프로덕션 환경 배포에 적합한 프런트엔드 리소스로 많은 느슨한 모듈을 패키징할 수 있습니다. 또한 요청 시 로드된 모듈을 코드로 분리한 다음 실제로 필요할 때 비동기적으로 로드할 수 있습니다.
Webpack은 콘텐츠가 풍부하고 지저분하여 초보자에게 친숙하지 않습니다. 이번 글에서는 webpack의 중요한 개념을 예제 형식으로 소개하고, webpack 사용법에 초점을 맞췄습니다
Overview
webpack은 모듈 패키저입니다.
【특징】
Webpack에는 다음과 같은 기능이 있습니다
코드 분할
Webpack에는 동기식과 비동기식의 두 가지 모듈 종속성 구성 방법이 있습니다. 비동기 종속성은 새 블록을 형성하기 위한 분할 지점 역할을 합니다. 종속성 트리를 최적화한 후 각 비동기 블록은 파일로 패키지됩니다.
Loader
Webpack 자체는 기본 JavaScript 모듈만 처리할 수 있지만 로더 변환기는 다양한 유형의 리소스를 JavaScript 모듈로 변환할 수 있습니다. 이렇게 하면 모든 리소스가 Webpack이 처리할 수 있는 모듈이 될 수 있습니다.
스마트 파싱
Webpack에는 모듈, CommonJS, AMD 또는 일반 JS 파일 형식에 관계없이 거의 모든 타사 라이브러리를 처리할 수 있는 스마트 파서가 있습니다. 종속성을 로드하는 경우에도 동적 표현식 require("./templates/" + name + ".jade")가 허용됩니다.
플러그인 시스템
Webpack에는 기능이 풍부한 플러그인 시스템도 있습니다. 대부분의 컨텐츠 기능은 이 플러그인 시스템을 기반으로 실행되며 오픈 소스 Webpack 플러그인도 다양한 요구에 맞게 개발하여 사용할 수 있습니다.
빠르게 실행
Webpack은 비동기 I/O 및 다중 레벨 캐싱을 사용하여 실행 효율성을 향상시켜 Webpack이 믿을 수 없을 만큼 빠른 속도로 증분 컴파일할 수 있도록 합니다.
【설치】
npm을 사용하여 Webpack 설치
$ npm install webpack
일반적인 문제는 webpack 설치 후 webpack 명령을 사용할 수 없다는 것입니다
로컬 설치만 하고 글로벌 설치는 하지 않기 때문입니다.
사용 먼저 정적 페이지 index.html과 JS 항목 파일인 Entry.js를 만듭니다. 프로세스는 로그를 표시합니다:$ npm install webpack -g브라우저를 사용하여
index.html을 열면 작동합니다.가 표시됩니다. 
module.js 모듈을 추가하고 수정합니다. 항목 entry.js：
<!-- index.html --> <html> <head> <meta charset="utf-8"> </head> <body> <script src="bundle.js?1.1.11"></script> </body> </html>
// entry.jsdocument.write('It works.') webpack Entry.js Bundle.js를 다시 패키지하고 페이지를 새로 고쳐 변경 사항을 확인하세요 작동합니다. module.js에서 작동합니다.
$ webpack entry.js bundle.js
index.html 将会看到 It works.
接下来添加一个模块 module.js 并修改入口 entry.js：
Hash: f47511e706e3de8f2417
Version: webpack 2.6.1Time: 47ms
Asset Size Chunks Chunk Names
bundle.js 2.66 kB 0 [emitted] main
[0] ./entry.js 27 bytes {0} [built]// module.jsmodule.exports = 'It works from module.js.'
重新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.
// entry.jsdocument.write('It works.')
document.write(require('./module.js')) // 添加模块 Webpack会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行
Loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。详细信息移步至此
接上面的例子，我们要在页面中引入一个CSS文件style.css，要使用require("!style-loader!css-loader!./style.css?1.1.11")代码，代码读取顺序从右向左，表示首页将 style.css 也看成是一个模块，先加载style.css，然后用 css-loader 来读取它，再用 style-loader Webpack은 항목 파일을 분석하고 종속성을 포함하는 각 파일을 구문 분석합니다. 이러한 파일(모듈)은 Bundle.js에 번들로 제공됩니다. Webpack은 각 모듈에 고유한 ID를 할당하고 이 ID를 통해 모듈에 액세스합니다. 페이지가 시작되면 Entry.js에 있는 코드가 먼저 실행되고 require
Loader
Loader는 모듈과 리소스의 변환기로 이해될 수 있습니다. 그 자체는 소스 파일을 매개변수로 받아들이고 변환 결과를 반환하는 함수입니다. 자세한 내용은 여기에
css-loader를 사용하여 읽은 후 사용합니다. style-loader 페이지에 삽입하세요 Hash: 09733456f2c5b24a4845
Version: webpack 2.6.1Time: 61ms
Asset Size Chunks Chunk Names
bundle.js 2.83 kB 0 [emitted] main
[0] ./module.js 43 bytes {0} [built]
[1] ./entry.js 75 bytes {0} [built]🎜🎜 Entry.js 수정: 🎜🎜/* style.css */body { background: yellow; }🎜🎜 로더 설치: 🎜🎜require("style-loader!css-loader!./style.css?1.1.11")
document.write('It works.')
document.write(require('./module.js'))🎜重新编译打包，刷新页面，就可以看到黄色的页面背景了
如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。
将 entry.js 中的 require("!style-loader!css-loader!./style.css?1.1.11") 修改为 require("./style.css?1.1.11") ，然后执行
$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'
显然，这两种使用 loader 的方式，效果是一样的
配置
Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config选项来指定配置文件。
继续我们的案例，在根目录创建 package.json 来添加 webpack 需要的依赖：
{ "name": "project", "version": "1.0.0", "devDependencies": {"css-loader": "^0.28.4","style-loader": "^0.18.2","webpack": "^2.6.1"
}
} 别忘了运行 npm install。然后创建一个配置文件 webpack.config.js，在下面的配置中，对一个单独的module对象定义了rules属性，里面包含两个必须属性：test和use。相当于告诉webpack compiler，碰到「在require()/import语句中被解析为'.css'的路径」时，在把它们添加并打包之前，要先使用css-loader后使用style-loader去转换
var webpack = require('webpack');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: 'bundle.js'//出口名称 },
module: {
rules: [
{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
]
}
} 同时简化 entry.js 中的 style.css 加载方式：
require('./style.css'); 最后运行 webpack，可以看到 webpack 通过配置文件执行的结果和上一节通过命令行 webpack entry.js bundle.js --module-bind 'css=style!css' 执行的结果是一样的
如果配置文件并不叫做默认的webpack.config.js，而是其他的名称，如test.js，则需要设置如下命令进行打包
webpack --config test.js
插件
插件可以完成更多 loader 不能完成的功能。插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。详细信息移步至此
想要使用一个插件，只需要require()它，然后把它添加到plugins数组中。内置插件则不需要require，直接使用即可
接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。
修改 webpack.config.js，添加 plugins：
var webpack = require('webpack');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路径filename: 'bundle.js'//出口名称 },
module: {
rules: [
{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
]
},
plugins: [new webpack.BannerPlugin('This file is created by xiaohuochai')
]
} 然后运行 webpack，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息：
/*! This file is created by xiaohuochai *//******/ (function(modules) { // webpackBootstrap/******/ // The module cache/******/ var installedModules = {};// 后面代码省略
开发环境
当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色
$ webpack --progress --colors
如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的
$ webpack --progress --colors --watch
比如，执行以上命令后，修改'style.css'的body的背景颜色为红色，不用重新编译，刷新页面后，页面即发生改变
当然，使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面
# 安装 $ npm install webpack-dev-server -g # 运行 $ webpack-dev-server --progress --colors
比如，执行以上命令后，修改'style.css'的body的背景颜色为蓝色，不用重新编译，也不用刷新页面，页面即发生改变
위 내용은 webpack--모듈 패키저에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!