웹팩 마이크로서버를 구축하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

웹팩 마이크로서버를 구축하는 방법은 무엇입니까?

零下一度

Jun 26, 2017 pm 01:36 PM

web webpack 잘 우리를

[서문]: 최근 Baidu Map API 작업 시 webpack의 외부를 사용했기 때문에,프로젝트를 빌드한 후 일부 "마무리 작업", 즉 패키징을 대신 수행하기 위해 webpack을 사용했다는 사실을 발견했습니다. 프로젝트 개발의 "주요 프로세스"에 이를 통합하는 것은 실제로 "최상의 활용을 하지 않는 것"입니다. 오늘 학습 기사는 다음과 같습니다. webpack-dev-server를 사용하여 웹팩 서버 구축

참조:

webpack-dev-server의 github 주소:

webpack1 공식 문서http://webpack.github.io/docs/webpack-dev-server.html (문서 2개 읽기 권장)

webpack2 공식 문서 (읽는 것을 추천)

개요:

1. webpack에 대한 지식을 복습하세요

2. 속성

3. Webpack-dev-server의 자동 새로 고침 및 모듈 핫 교체 메커니즘

4. webpack에서 서버를 구성하는 세 가지 방법

webpack에 대한 지식 검토

디렉토리 구조를 단순화했는데 다음과 같습니다.

My webpack.config.js:

var webpack = require('webpack')var path =require('path')
module.exports = {
entry:{
   app:path.join(__dirname,'src','index.js')
},
output:{
   filename:'bundle.js',
   path:path.join(__dirname,'dist')
  }
}

로그인 후 복사

My src/ index.js:

require('./a.js')
require('./b.js')
console.log('我是index.js')

로그인 후 복사

내 src/a.js:

console.log('我是a.js')

로그인 후 복사

내 src/b.js:

console.log('我是b.js')

로그인 후 복사

내 dist/index.html :

/*其他部分省略*/<body>  <script src="./bundle.js?1.1.11"></script></body>

로그인 후 복사

터미널에서 "webpack" 명령을 실행하면 디렉토리는 다음과 같습니다:

webpack의 메커니즘을 검토하는 그림:

자, 이제, 서버 구축을 시작해 보겠습니다.

가장 간단한 방법으로 서버를 구축하는 방법은 무엇입니까?

1. 하나의 모듈을 하나씩 설치해야 합니다

터미널에 프로젝트 디렉터리를 입력하고 npm install webpack-dev-server --save-dev를 입력한 후 Enter를 누르세요

2. 터미널에서 다음 명령을 실행합니다.

node_modules/.bin/webpack-dev-server(网上有的说直接输webpack-dev-server那是错的)

成功！输出的是这一段信息：

然后进入默认的localhost:8080页面：

到这里，我们要做的第一步就成功啦！

进入dist后，我们发现报了这样一段错误：

what?没有找到bundle.js?

所以我们要在webpack.config.js里写一下配置：

module.exports = {/*这里省略entry和output，参照上面写的内容*/
  devServer: {
       contentBase: path.join(__dirname, "dist")
   }
}

로그인 후 복사

保存，后打开页面看控制台，报错已经消失了！正确打印了被打包的文件内容：

详解webpack-dev-server的配置属性

1.devServer.contentBase

contentBase是我们今天要讲的第一个webpack-dev-server的配置属性，那么，contentBase做了什么事情呢？——它指定了服务器资源的根目录，如果不写入contentBase的值，那么contentBase默认是项目的目录。

在上面例子中产生错误和后来解决错误的原因：

产生错误：因为bundle.js被"放在了"我们的项目根目录里，在dist/html里此时显然不能根据路径找到bundle.js

解决错误：通过配置contentBase: path.join(__dirname, "dist")将bundle.js"放在了"dist目录下，此时bundle.js和dist/index.html位于同一目录下，通过 src="./bundle.js?1.1.11"自然就找到bundle.js了

webpack打包和webpack-dev-server开启服务的区别——

webpack输出真实的文件，而webpack-dev-server输出的文件只存在于内存中,不输出真实的文件！（注意下面两张图的区别）

webpack:当我们在终端运行"webpack"后：

webpack-dev-server:当我们在终端运行"node_modules/.bin/webpack-dev-server后：

这也就是我在上面的阐述中将bundle.js?1.1.11"放在了"加上双引号的原因

2.devServer.port

port配置属性指定了开启服务的端口号：

devServer: {
   port:7000}

로그인 후 복사

设置端口号为7000:

运行：node_modules/.bin/webpack-dev-server

这个时候就不是默认的8080的端口了，而是我们设置的7000

3.devServer.host

host设置的是服务器的主机号：

修改配置为：

devServer: {
   contentBase: path.join(__dirname, "dist"),
   port:7000,
   host:'0.0.0.0'}

로그인 후 복사

此时localhost:7000和0.0.0.0:7000都能访问成功

4.devServer.historyApiFallback

在文档里面说的很清楚，这个配置属性是用来应对返回404页面时定向到特定页面用的（the index.html page will likely have to be served in place of any 404 responses)

在dist目录下新增一个HTML页面：

/*剩下的都是很常规的HTML内容，故省略*/<p>这里是404界面</p>

로그인 후 복사

我们把webpack.config.js修改如下：

module.exports = {/*这里省略entry和output，参照上面写的内容*/devServer: {
contentBase: path.join(__dirname, "dist"),
historyApiFallback:{
   rewrites:[
      {from:/./,to:'/404.html'}
   ]
  }
 }
}

로그인 후 복사

打开页面，输入一个不存在的路由地址：

5.devServer.overlay

这个配置属性用来在编译出错的时候，在浏览器页面上显示错误，默认是false，可设置为true

首先我们人为制造一个编译错误：在我们尚未配置babel loader的项目里使用ES6写法：

在src/index.js里写入“const a”

在shell里提示编译错误：

但在浏览器里没有提示：

所以我们把webpack.config.js修改为：

module.exports = {     /*这里省略entry和output，参照上面写的内容*/
   devServer: {
       contentBase: path.join(__dirname, "dist"),
       overlay: true
   }
}

로그인 후 복사

再重新运行node_modules/.bin/webpack-dev-server，浏览器上把错误显示出来了

6.devServer.stats（字符串）

这个配置属性用来控制编译的时候shell上的输出内容，我们没有设置devServer.stats时候编译输出是这样子的：

（其中看起来有许多看似不重要的文件也被打印出来了）

stats: "errors-only"表示只打印错误：

我们把配置改成：

devServer: {
   contentBase: path.join(__dirname, "dist"),
   stats: "errors-only"}

로그인 후 복사

因为只有错误才被打印，所以，大多数信息都略过了

除此之外还有"minimal"，"normal"，"verbose"，这里不多加赘述

7.devServer.quiet

当这个配置属性和devServer.stats属于同一类型的配置属性

当它被设置为true的时候，控制台只输出第一次编译的信息，当你保存后再次编译的时候不会输出任何内容，包括错误和警告

来做个对比吧：

quiet：false（默认）：

第一次编译：

第二次编译（当你保存的时候）

quiet:true

第一次编译同上

第二次编译什么都不输出

【吐槽】这样看的话感觉这个配置好像只有负面作用呢.....

8.devServer.compress

这是一个布尔型的值，当它被设置为true的时候对所有的服务器资源采用gzip压缩

采用gzip压缩的优点和缺点：

优点：对JS，CSS资源的压缩率很高，可以极大得提高文件传输的速率，从而提升web性能

缺点：服务端要对文件进行压缩，而客户端要进行解压，增加了两边的负载

9.devServer.hot和devServer.inline

在这之前，首先要说一下的是webpack-dev-server的自动刷新和模块热替换机制

webpack-dev-server的自动刷新和模块热替换机制

这两个机制是紧紧联系在一起的

从外部角度看——自动刷新

当我们对业务代码做了一些修改然后保存后（command+s），页面会自动刷新，我们所做的修改会直接同步到页面上，而不需要我们刷新页面，或重新开启服务

（The webpack-dev-server supports multiple modes to automatically refresh the page）

从内部角度看——模块热替换

在热替换（HMR）机制里，不是重载整个页面，HMR程序会只加载被更新的那一部分模块，然后将其注入到运行中的APP中

（In Hot Module Replacement, the bundle is notified that a change happened. Rather than a full page reload, a Hot Module Replacement runtime could then load the updated modules and inject them into a running app.）

webpack-dev-server有两种模式可以实现自动刷新和模块热替换机制

1. Iframe mode(默认,无需配置)

页面被嵌入在一个iframe里面，并且在模块变化的时候重载页面

2.inline mode（需配置）添加到bundle.js中

当刷新页面的时候，一个小型的客户端被添加到webpack.config.js的入口文件中

例如在我们的例子中，在使用inline mode的热替换后，相当于入口文件从

entry:{
    app:path.join(__dirname,'src','index.js')
}

로그인 후 복사

变成了：

entry:{
    app:[path.join(__dirname,'src','index.js'),             'webpack-dev-server/client?http://localhost:8080/'  ]
}

로그인 후 복사

从一个入口变成了两个入口，并实现刷新

那怎么才能inline mode模式的刷新呢？

你需要做这些：

1在配置中写入devServer.hot：true和devServer.inline：true

2增加一个插件配置webpack.HotModuleReplacementPlugin()

例如：

var webpack = require('webpack')
module.exports = {   /*省略entry ,output等内容*/
   plugins:[new webpack.HotModuleReplacementPlugin()
    ],
   devServer: {
        inline:true,
        hot:true}
}

로그인 후 복사

打开页面：

如果有上面两行输出则表明你已经配置成功

现在还有一个问题，那就是每次直接输入node_modules/.bin/webpack-dev-server来启动服务器对我们来说简直就是莫大的痛苦，那么怎么对这一过程进行简化呢？

答案：把这个运行脚本写到package.json里就行了！

这里我把我的package.json写成：

{   "name": "webpackTest2",   "dependencies": {},   "devDependencies": {},   "scripts": {       "start": "node_modules/.bin/webpack-dev-server" }
}

로그인 후 복사

在终端运行npm start:

运行成功！

配置服务的三种方式：

1在webpack.config.js输出对象中的devServer属性中写配置（也就是我们上述所有例子的做法）

2写在package.json中，写在node 命令对应的脚本中，例如我们可以写成：

"scripts": {

"start": "node_modules/.bin/webpack-dev-server --port 8000 --inline true "

}

(但这显然并不是一个值得推荐的方式)

3使用纯node的API实现，下面是一个官方给的例子

var config = require("./webpack.config.js?1.1.11");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");var compiler = webpack(config);var server = new WebpackDevServer(compiler, {       /*我们写入配置的地方*/});
server.listen(8080);

로그인 후 복사

위 내용은 웹팩 마이크로서버를 구축하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7549

Cakephp 튜토리얼

1382

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

VUE3 시작하기 튜토리얼: Webpack을 사용한 패키징 및 빌드 Jun 15, 2023 pm 06:17 PM

Vue는 대화형의 효율적인 웹 애플리케이션을 신속하게 구축하는 데 도움이 되는 탁월한 JavaScript 프레임워크입니다. Vue3은 Vue의 최신 버전으로, 많은 새로운 특징과 기능을 도입했습니다. Webpack은 현재 프로젝트의 다양한 리소스를 관리하는 데 도움이 되는 가장 인기 있는 JavaScript 모듈 패키저 및 빌드 도구 중 하나입니다. 이 기사에서는 Webpack을 사용하여 Vue3 애플리케이션을 패키징하고 빌드하는 방법을 소개합니다. 1. 웹팩 설치

Java API 개발에서 웹 서버 처리를 위해 Jetty7 사용 Jun 18, 2023 am 10:42 AM

JavaAPI 개발에서 웹 서버 처리를 위해 Jetty7 사용 인터넷의 발전과 함께 웹 서버는 애플리케이션 개발의 핵심 부분이 되었으며 많은 기업의 초점이기도 합니다. 증가하는 비즈니스 요구를 충족하기 위해 많은 개발자가 웹 서버 개발에 Jetty를 사용하기로 선택했으며 그 유연성과 확장성은 널리 인정받고 있습니다. 이 기사에서는 We 용 JavaAPI 개발에서 Jetty7을 사용하는 방법을 소개합니다.

웹상의 얼굴 차단 공격에 대한 실시간 보호(머신러닝 기반) Jun 10, 2023 pm 01:03 PM

얼굴 차단 사격은 영상 속 인물을 가리지 않고 다수의 사격이 떠다니는 것처럼 보이도록 하여 마치 인물 뒤에서 떠다니는 것처럼 보이게 하는 것을 의미합니다. 기계 학습은 몇 년 동안 널리 사용되었지만 많은 사람들은 이러한 기능을 브라우저에서도 실행할 수 있다는 사실을 모릅니다. 이 기사에서는 기사 마지막 부분에 적용 가능한 몇 가지 시나리오를 소개합니다. 이 솔루션을 통해 몇 가지 아이디어를 얻을 수 있기를 바랍니다. mediapipeDemo(https://google.github.io/mediapipe/)는 주류 얼굴 차단 공세 주문형 업로드의 구현 원리를 보여줍니다. 비디오 서버 백그라운드 계산은 비디오 화면의 세로 영역을 추출하고 이를 svg로 변환합니다. 클라이언트가 비디오를 재생하는 동안 서버에서 svg를 다운로드하고 사격, 초상화와 결합합니다.

Golang을 사용하여 웹 애플리케이션에 대한 양식 유효성 검사를 구현하는 방법 Jun 24, 2023 am 09:08 AM

양식 유효성 검사는 웹 애플리케이션 개발에서 매우 중요한 링크로, 애플리케이션의 보안 취약성과 데이터 오류를 방지하기 위해 양식 데이터를 제출하기 전에 데이터의 유효성을 확인할 수 있습니다. Golang을 사용하여 웹 애플리케이션에 대한 양식 유효성 검사를 쉽게 구현할 수 있습니다. 이 기사에서는 Golang을 사용하여 웹 애플리케이션에 대한 양식 유효성 검사를 구현하는 방법을 소개합니다. 1. 폼 유효성 검사의 기본 요소 폼 유효성 검사를 구현하는 방법을 소개하기 전에 먼저 폼 유효성 검사의 기본 요소가 무엇인지 알아야 합니다. 양식 요소: 양식 요소는

조종석 웹 UI에서 관리 액세스를 활성화하는 방법 Mar 20, 2024 pm 06:56 PM

Cockpit은 Linux 서버용 웹 기반 그래픽 인터페이스입니다. 이는 주로 신규/전문가 사용자가 Linux 서버를 보다 쉽게 관리할 수 있도록 하기 위한 것입니다. 이 문서에서는 Cockpit 액세스 모드와 CockpitWebUI에서 Cockpit으로 관리 액세스를 전환하는 방법에 대해 설명합니다. 콘텐츠 항목: Cockpit 입장 모드 현재 Cockpit 액세스 모드 찾기 CockpitWebUI에서 Cockpit에 대한 관리 액세스 활성화 CockpitWebUI에서 Cockpit에 대한 관리 액세스 비활성화 결론 조종석 입장 모드 조종석에는 두 가지 액세스 모드가 있습니다. 제한된 액세스: 이는 조종석 액세스 모드의 기본값입니다. 이 액세스 모드에서는 조종석에서 웹 사용자에 액세스할 수 없습니다.

웹 표준이란 무엇입니까? Oct 18, 2023 pm 05:24 PM

웹 표준은 W3C 및 기타 관련 기관에서 개발한 일련의 사양 및 지침으로, HTML, CSS, JavaScript, DOM, 웹 접근성 및 성능 최적화를 포함하며, 이러한 표준을 따르면 페이지의 호환성이 향상됩니다. 접근성, 유지 관리성 및 성능. 웹 표준의 목표는 웹 콘텐츠가 다양한 플랫폼, 브라우저 및 장치에서 일관되게 표시되고 상호 작용할 수 있도록 하여 더 나은 사용자 경험과 개발 효율성을 제공하는 것입니다.

웹이 무슨 뜻이야? Jan 09, 2024 pm 04:50 PM

웹은 인터넷의 응용 형태인 월드 와이드 웹(World Wide Web)이라고도 알려진 글로벌 광역 네트워크입니다. 웹은 하이퍼텍스트와 하이퍼미디어를 기반으로 한 정보 시스템으로, 사용자는 하이퍼링크를 통해 여러 웹 페이지 사이를 이동하여 정보를 검색하고 얻을 수 있습니다. 웹의 기본은 인터넷이며, 이는 통일되고 표준화된 프로토콜과 언어를 사용하여 서로 다른 컴퓨터 간의 데이터 교환과 정보 공유를 가능하게 합니다.

웹 개발에서 PHP는 프런트엔드인가요, 백엔드인가요? Mar 24, 2024 pm 02:18 PM

PHP는 웹 개발의 백엔드에 속합니다. PHP는 주로 서버 측 로직을 처리하고 동적 웹 콘텐츠를 생성하는 데 사용되는 서버 측 스크립팅 언어입니다. 프런트엔드 기술과 비교하여 PHP는 데이터베이스와의 상호 작용, 사용자 요청 처리, 페이지 콘텐츠 생성과 같은 백엔드 작업에 더 많이 사용됩니다. 다음으로, 백엔드 개발에서 PHP 적용을 설명하기 위해 특정 코드 예제가 사용됩니다. 먼저 데이터베이스에 연결하고 데이터를 쿼리하기 위한 간단한 PHP 코드 예제를 살펴보겠습니다.

See all articles

웹팩 마이크로서버를 구축하는 방법은 무엇입니까?

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제