webpack-dev-server 구성 및 사용 단계에 대한 자세한 설명

이번에는 webpack-dev-server 구성 및 사용 단계에 대해 자세히 설명하고, webpack-dev-server 구성 및 사용 시 주의 사항은 무엇인지 살펴보겠습니다. .

1Install WebPack-dev-server

터미널에

npm i webpack-dev-server

를 입력하여 webpack-dev-server 패키지

2를 패키지의 스크립트에 구성합니다. json 파일 코드 추가

"dev":"WebPack-dev-server --config webpack.config.js”

webpack.config.js 파일에 전체적으로 추가

target:"web"

터미널 입력

npm i cross-env

env 설치

환경 구성

Variables

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

webpack.config.JS 파일에 명령문 추가

const isDev = process.env.NODE_ENV ==='development'

isDev 값이 development

Change

module

.exports와 같은 값인지 상수 구성으로 내보내고

module.exports = config

구성을 쉽게 변경할 수 있습니다webpack.config.js

if（isDev）{
 config.devtool =“＃廉价模块-EVAL-源映射”//代码映射
 config.devServer = {
  port:8000,//启动服务监听端口
  host:'0.0.0.0'，//可以通过localhost访问
  overlay:{//在页面上显示错误信息
   errors：true，
   },
   open:true，//启动webpack-dev-server时自动打开浏览器
   hot:true //启用热更
 } 
 config.plugins.push(
  new webpack.HotModuleReplacementPlugin()，
  new webpack.NoEmitOnErrorsPlugin()//热更相关插件
 )
}

에 문을 추가하세요.3. HTML 페이지 만들기

터미널 입력

npm i html-webpack-plugin

html-webpack-plugin 플러그인 설치

webpack.config.js

const HTMLPlugin = require('html-webpack-plugin')

Configuration

 plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: isDev ? '"development"' : '"production"'
      }
    }),
    new HTMLPlugin()
  ]

에 명령문 추가

npm run dev

위 단계를 완료한 후 터미널 입력

rrreee

패키징이 완료된 후 브라우저를 열고 주소 localhost:8000을 입력하여 페이지에 들어갑니다

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 관련 기사를 주목하십시오. PHP 중국어 웹사이트!

추천 도서:

웹팩+react 개발 환경 구축 방법

React 패밀리 버킷 환경 구축 방법

위 내용은 webpack-dev-server 구성 및 사용 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!