웹팩 모듈 관리 및 패키징 도구 사용 방법

이번에는 웹팩 모듈 관리 및 패키징 도구 사용 방법에 대해 설명하고, 웹팩 모듈 관리 및 패키징 도구 사용 시 주의사항은 무엇인지 알아보겠습니다.

Webpack 소개

webpack은 현재 가장 널리 사용되는 프런트엔드 리소스 모듈식 관리 및 패키징 도구입니다. 종속성 및 규칙에 따라 프로덕션 환경 배포에 적합한 프런트엔드 리소스로 많은 느슨한 모듈을 패키징할 수 있습니다. 또한 요청 시 로드되는 모듈의 코드를 분리하고 실제로 필요할 때 비동기적으로 로드할 수도 있습니다. 로더 변환을 통해 CommonJs 모듈, AMD 모듈, ES6 모듈, CSS, 이미지, JSON, Coffeescript, LESS 등 모든 형태의 리소스를 모듈로 간주할 수 있습니다.

모듈 시스템<script> 태그의 진화</script>

<script></script>
<script></script>
<script></script>
<script></script>

이것은 가장 독창적인 JavaScript 파일 로딩 방법입니다. 각 파일이 모듈로 간주되면 해당 인터페이스는 일반적으로 전역 범위에 노출됩니다. window 개체의 경우 서로 다른 모듈의 인터페이스 호출이 동일한 범위에 있습니다. 일부 복잡한 프레임워크는 네임스페이스 개념을 사용하여 이러한 모듈의 인터페이스를 구성합니다.

이 원래 로드 방법에는 몇 가지 명백한 단점이 있습니다.

전역 범위에서 변수 충돌이 발생하기 쉽습니다.

1. 파일은 <script>의 쓰기 순서로만 로드될 수 있습니다. 모듈과 코드베이스 간의 문제는 주관적으로 해결해야 합니다</script>

2. 대규모 프로젝트에서는 다양한 리소스 관리가 어렵고, 장기간 누적된 문제로 인해 코드베이스에 혼란이 발생합니다

CommonJS 사양
CommonJS 서버, 데스크톱 환경 등 서버 환경 외부의 자바스크립트 생태계 구축을 목표로 프로젝트를 탐색하고 있습니다.

CommonJS 사양은 JavaScript의 범위 문제를 해결하기 위해 정의된 모듈 형태로, 각 모듈이 자체 네임스페이스에서 실행될 수 있도록 합니다. 이 사양의 주요 내용은 모듈이 module.exports를 통해 외부 변수나 인터페이스를 내보내고 require()를 통해 다른 모듈의 출력을 현재 모듈 범위로 가져와야 한다는 것입니다. 직관적인 예

// moduleA.js
module.exports = function( value ){
  return value * 2;
}
// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2(4);

AMD 사양

AMD(비동기 모듈 정의)는 브라우저 환경에 맞게 설계되었습니다. 왜냐하면 CommonJS 모듈 시스템은 동기식으로 로드되고, 현재 브라우저 환경은 모듈 조건의 동기식 로딩을 위한 준비가 되어 있지 않기 때문입니다. .

모듈은 다음 형식으로 정의 함수를 통해 클로저에 정의됩니다.

define(id?: String, dependencies?: String[], factory: Function|Object);

id는 모듈의 이름이며 선택적 매개변수입니다. factory는 함수 또는 객체인 모듈의 특정 구현을 래핑하는 마지막 매개변수입니다. 함수인 경우 반환 값은 출력 인터페이스 또는 모듈의 값입니다.

일부 사용 사례

jQuery 모듈에 따라 달라지는 myModule이라는 모듈을 정의하세요.

define('myModule', ['jquery'], function($) {
  // $ 是 jquery 模块的输出
  $('body').text('hello world');
}); // 使用 require(['myModule'], function(myModule) {});

참고: webpack에서 모듈 이름은 로컬 범위만 가지며 Require.js에서 모듈 이름은 전역 범위를 갖습니다. 전 세계적으로 사용되는 견적.

일반적으로 애플리케이션의 시작 기능으로 사용되는 ID 값 없이 익명 모듈을 정의합니다.

define(['jquery'], function($) {
  $('body').text('hello world');
});

AMD도 require() 문을 사용하여 모듈을 로드하지만 CommonJS와 달리 두 개의 매개변수가 필요합니다

첫 번째 매개변수 [ module] 은 배열이고, 내부 멤버는 로드할 모듈입니다. 두 번째 매개변수인 callback은 로드가 성공한 후의 콜백 함수입니다. 이전 코드를 AMD 형식으로 다시 작성하면 다음과 같이 표시됩니다.

math.add() 및 수학 모듈 로딩이 동기화되지 않아 브라우저가 정지되지 않습니다. 따라서 분명히 AMD는 브라우저 환경에 더 적합합니다. 현재 AMD 사양을 구현하는 두 가지 주요 Javascript 라이브러리가 있습니다: require.js 및 cur.js. 모듈 종속성을 기반으로 정적 분석을 수행한 다음 지정된 규칙에 따라 이러한 모듈에 해당하는 정적 리소스를 생성합니다.

Webpack의 기능

코드 분할

Loader

智能解析

插件系统

快速运行

webpack基本使用

创建项目根目录

初始化

npm init 或 npm init -y

全局安装

npm install webpack -g

局部安装,在项目目录下安装

npm install webpack --save-dev

--save: 将安装的包的信息保存在package中

--dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件

如果使用web开发工具,单独安装

npm install webpack-dev-server --save-dev

基本使用

首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：

<!-- index.html -->


<meta>


<script></script>

创建entry.js

// entry.js : 在页面中打印出一句话
document.write('It works.')

然后编译 entry.js并打包到 bundle.js文件中

// 使用npm命令 
webpack entry.js bundle.js

使用模块

1.创建模块module.js,在内部导出内容

module.exports = 'It works from module.js'

2.在entry.js中使用自定义的模块

//entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块

加载css模块

1.安装css-loader

npm install css-loader style-loader --save-dev

2.创建css文件

//style.css
body { background: yellow; }

3.修改 entry.js：

require("!style-loader!css-loader!./style.css") // 载入 style.css
document.write('It works.')
document.write(require('./module.js'))

创建配置文件webpack.config.js

1.创建文件

var webpack = require('webpack')
module.exports = {
 entry: './entry.js',
 output: {
  path: __dirname,
  filename: 'bundle.js'
 },
 module: {
  loaders: [
    //同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
   {test: /\.css$/, loader: 'style-loader!css-loader'}
  ]
 }
}

2.修改 entry.js 中的 style.css 加载方式：require('./style.css')

3.运行webpack

在命令行页面直接输入webpack

插件使用

1.插件安装

//添加注释的插件
npm install --save-devbannerplugin

2.配置文件的书写

var webpack = require('webpack')
module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      //同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ],
    plugins: [
      //添加注释的插件
      new webpack.BannerPlugin('This file is created by zhaoda')
    ]
  }
}

3.运行webpack

// 可以在bundle.js的头部看到注释信息
/*! This file is created by zhaoda */

开发环境

webpack

--progress : 显示编译的进度

--colors ：　带颜色显示，美化输出

--watch　：　开启监视器，不用每次变化后都手动编译

12.4.7.1. webpack-dev-server

开启服务,以监听模式自动运行

1.安装包

npm install webpack-dev-server -g --save-dev

2.启动服务

实时监控页面并自动刷新

webpack-dev-server --progress --colors

自动编译

1.安装插件

npm install --save-dev html-webpack-plugin

2.在配置文件中导入包

var htmlWebpackPlugin = require('html-webpack-plugin')

3.在配置文件中使用插件

plugins: [
    //添加注释的插件
    new webpack.BannerPlugin('This file is created by zhaoda'),
    //自动编译
    new htmlWebpackPlugin({
      title: "index",
      filename: 'index.html', //在内存中生成的网页的名称
      template: './index.html' //生成网页名称的依据
    })
  ]

4.运行项目

webpack--save-dev

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

调用模式与this绑定

在实战项目中怎样使用jquery layur弹出层

위 내용은 웹팩 모듈 관리 및 패키징 도구 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!