简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

웹팩을 사용하여 반응 개발 환경을 구축하는 방법

php中世界最好的语言
풀어 주다： 2018-05-29 17:30:29
원래의
1590명이 탐색했습니다.

이번에는 webpack을 사용하여 React 개발 환경을 구축하는 방법과 noteswebpack을 사용하여 React 개발 환경을 구축하는 방법에 대해 설명하겠습니다.

1.프로젝트 초기화

mkdir react-redux && cd react-redux
npm init -y
로그인 후 복사

2. Install webpack

npm i webpack -D
로그인 후 복사

npm i -D는 npm install --save-dev의 약어로, 모듈을 설치하고 package.json의 devDependency는 주로 개발 환경의 종속성 패키지입니다. webpack 4+ 버전을 사용하는 경우 CLI도 설치해야 합니다. 

npm install -D webpack webpack-cli
로그인 후 복사

3. 새 프로젝트 구조 만들기

react-redux
 |- package.json
+ |- /dist
+  |- index.html
 |- /src
  |- index.js
로그인 후 복사

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<p id="root"></p>
<script src="bundle.js"></script>
</body>
</html>
로그인 후 복사

index.js

document.querySelector('#root').innerHTML = 'webpack使用';
로그인 후 복사

비 전역 설치 시 패키징. 

node_modules\.bin\webpack src\index.js --output dist\bundle.js --mode development
로그인 후 복사

dist 디렉토리에서 html을 열어 webpack을 표시합니다.

을 사용하여 webpack

1을 사용하여 구성 파일

const path=require('path');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(dirname,'dist')
  }
};
로그인 후 복사

을 사용하여 node_modules.binwebpack -- 모드 프로덕션 확인 2.NPM 스크립트(NPM 스크립트)를 패키지하려면 package.json에 npm 스크립트(npm 스크립트)를 추가합니다. "build": "webpack --mode Production" 실행 npm run build 패키지 준비node_modules.binwebpack --mode production 可以以进行打包 2.NPM 脚本(NPM Scripts) 在在 package.json 添加一个 npm 脚本(npm script)： "build": "webpack --mode production" 运行 npm run build 即可打包

使用webpack构建本地服务器

webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载。

1.安装 npm i -D webpack-dev-server 修改配置文件webpack.config.js

const path=require('path');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(dirname,'dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:3000,
    open:true,//自动打开浏览器
  }
};
로그인 후 복사

运行 webpack-dev-server --progress ,浏览器打开localhost:3000,修改代码会实时显示修改的结果. 添加scripts脚本,运行 npm start 自动打开 http://localhost:8080/

"start": "webpack-dev-server --open --mode development"
로그인 후 복사

启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此使用webpack-dev-server进行开发的时候都看不到编译后的文件

2.热更新

配置一个webpack自带的插件并且还要在主要js文件里检查是否有module.hot

plugins:[
    //热更新,不是刷新
    new webpack.HotModuleReplacementPlugin()
  ],
로그인 후 복사

在主要js文件里添加以下代码

if (module.hot){
  //实现热更新
  module.hot.accept();
}
로그인 후 복사

在webpack.config.js中开启热更新

devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:3000,
    open:true,//自动打开浏览器
    hot:true //开启热更新
  },
로그인 후 복사

热更新允许在运行时更新各种模块，而无需进行完全刷新.

配置Html模板

1.安装html-webpack-plugin插件

npm i html-webpack-plugin -D
로그인 후 복사

2.在webpack.config.js里引用插件

const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
  entry:'./src/index.js',
  output:{
    //添加hash可以防止文件缓存,每次都会生成4位hash串
    filename:'bundle.[hash:4].js',
    path:path.resolve('dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:3000,
    open:true,//自动打开浏览器
    hot:true //开启热更新
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      hash:true, //会在打包好的bundle.js后面加上hash串
    })
  ]
};
로그인 후 복사

运行 npm run build 进行打包,这时候每次npm run build的时候都会在dist目录下创建很多打好的包.应该每次打包之前都将dist目录下的文件清空,再把打包好的文件放进去,这里使用clean-webpack-plugin插件.通过 npm i clean-webpack-plugin -D 命令安装.然后在webpack.config.js中引用插件.

const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
let CleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
  entry:'./src/index.js',
  output:{
    //添加hash可以防止文件缓存,每次都会生成4位hash串
    filename:'bundle.[hash:4].js',
    path:path.resolve('dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:3000,
    open:true,//自动打开浏览器
    hot:true //开启热更新
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      hash:true, //会在打包好的bundle.js后面加上hash串
    }),
     //打包前先清空
    new CleanWebpackPlugin('dist')
  ]
};
로그인 후 복사

之后打包便不会产生多余的文件.

编译es6和jsx

1.安装babel npm i babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -D babel-loader: babel

webpack을 사용하여 로컬 서버 구축

webpack-dev-server는 간단한 웹 서버를 제공하며 실시간으로 다시 로드할 수 있습니다. 1. npm i -D webpack-dev-server 설치 webpack.config.js

{
 "presets": ["env", "stage-0","react"] //从左向右解析
}
로그인 후 복사
webpack-dev-server --progress를 실행하고 브라우저에서 localhost:3000을 엽니다. , 수정 코드는 실시간으로 수정된 결과를 표시합니다. 스크립트를 추가하고 npm start를 실행하면 http://localhost:8080/

const path=require('path');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(dirname,'dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/(node_modules)/, //排除掉nod_modules,优化打包速度
        use:{
          loader:'babel-loader'
        }
      }
    ]
  }
};
로그인 후 복사
가 자동으로 열립니다. webpack-dev-server를 시작한 후에는 컴파일된 파일이 표시되지 않습니다. ,실시간으로 컴파일된 파일은 메모리에 저장됩니다. 따라서 webpack-dev-server를 사용하여 개발할 경우 컴파일된 파일을 볼 수 없습니다

2. Hot update

webpack에 포함된 플러그인을 구성하고 기본 js 파일에 module.hot이 있는지 확인하세요

npm install --save-dev webpack-merge
로그인 후 복사
기본 js 파일에 다음 코드를 추가하세요

const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
let CleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
  entry:['babel-polyfill','./src/index.js'],
  output:{
    //添加hash可以防止文件缓存,每次都会生成4位hash串
    filename:'bundle.[hash:4].js',
    path:path.resolve(dirname,'dist')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      hash:true, //会在打包好的bundle.js后面加上hash串
    }),
    //打包前先清空
    new CleanWebpackPlugin('dist'),
    new webpack.HotModuleReplacementPlugin() //查看要修补(patch)的依赖
  ],
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/(node_modules)/, //排除掉nod_modules,优化打包速度
        use:{
          loader:'babel-loader'
        }
      }
    ]
  }
};
로그인 후 복사
webpack.config.js에서 핫 업데이트 활성화
const merge=require('webpack-merge');
const path=require('path');
let webpack=require('webpack');
const common=require('./webpack.common.js');
module.exports=merge(common,{
  devtool:'inline-soure-map',
  mode:'development',
  devServer:{
    historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
    contentBase:path.resolve(dirname, '../dist'),//本地服务器所加载的页面所在的目录
    inline: true,//实时刷新
    open:true,
    compress: true,
    port:3000,
    hot:true //开启热更新
  },
  plugins:[
    //热更新,不是刷新
    new webpack.HotModuleReplacementPlugin(),
  ],
});
로그인 후 복사
핫 업데이트를 사용하면 전체 새로 고침 없이 런타임에 다양한 모듈을 업데이트할 수 있습니다.

Html 템플릿 구성

1. html-webpack-plugin 플러그인🎜
const merge = require('webpack-merge');
 const path=require('path');
 let webpack=require('webpack');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const common = require('./webpack.common.js');
 module.exports = merge(common, {
   mode:'production',
   plugins: [
     new UglifyJSPlugin()
   ]
 });
로그인 후 복사
🎜2을 설치하세요. 이때 webpack.config.js🎜
react-dom npm i react react-dom -S
로그인 후 복사
🎜에서 플러그인을 참조하여 패키징하세요. , npm이 build를 실행할 때마다 dist 디렉터리에 많은 패키지 패키지가 생성됩니다. 각 패키지 이전에 dist 디렉터리의 파일을 지운 다음 패키지된 파일을 넣어야 합니다. clean-webpack-plugin 플러그인은 여기에 사용됩니다. npm i clean-webpack-plugin -D 명령을 전달하여 설치하세요. 그런 다음 webpack.config.js에서 플러그인을 참조하세요.🎜
import React from 'react';
class App extends React.Component{
  render(){
    return (<p>佳佳加油</p>);
  }
}
export default App;
로그인 후 복사
🎜패키징 후에는 추가 파일이 생성되지 않습니다. 🎜🎜🎜🎜es6 및 jsx🎜🎜를 컴파일합니다. 🎜🎜1. babel npm 및 babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -D babel-loader를 설치합니다. babel loader babel-preset -env: 구성된 env에 따라 아직 지원되지 않는 기능만 컴파일합니다. babel-preset-react: jsx를 js로 변환🎜🎜2. .babelrc 구성 파일을 추가합니다🎜
import React from 'react';
import ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import App from './App';
ReactDOM.render(
  <AppContainer>
    <App/>
  </AppContainer>,
  document.getElementById('root')
);
if (module.hot) {
  module.hot.accept();
}
로그인 후 복사
로그인 후 복사
🎜3. webpack.config.js🎜
npm i -D react-hot-loader
로그인 후 복사
로그인 후 복사
🎜🎜🎜개발 환경을 프로덕션 환경과 분리합니다🎜🎜🎜🎜1. webpack- merge🎜
npm install style-loader css-loader url-loader --save-dev
로그인 후 복사
로그인 후 복사
🎜2를 공개 구성으로 webpack.common.js라는 새 파일을 생성하고 다음 내용을 작성합니다.🎜
npm install sass-loader node-sass --save-dev
로그인 후 복사
로그인 후 복사
🎜3 개발 환경 구성으로 webpack.dev.js라는 새 파일을 생성합니다🎜 
npm install --save-dev mini-css-extract-plugin
로그인 후 복사
로그인 후 복사
🎜4. 새 파일 만들기 webpack.prod.js라는 파일이 프로덕션 환경 구성으로 사용됩니다. 🎜
{
  test:/\.(png|jpg|gif)$/,
  use:[
    "url-loader"
  ]
},
로그인 후 복사
로그인 후 복사
🎜🎜🎜Configure React🎜🎜🎜🎜1. 새 App.js를 만듭니다. 그리고 다음 내용을 추가하세요.🎜
{
  test:/\.scss$/,
  use:[
    "style-loader",
    "css-loader",
    "sass-loader"
  ]
}
로그인 후 복사
로그인 후 복사
🎜3. index.js에 다음 내용을 추가하세요.🎜
import React from 'react';
import ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import App from './App';
ReactDOM.render(
  <AppContainer>
    <App/>
  </AppContainer>,
  document.getElementById('root')
);
if (module.hot) {
  module.hot.accept();
}
로그인 후 복사
로그인 후 복사

4.安装 react-hot-loader

npm i -D react-hot-loader
로그인 후 복사
로그인 후 복사

5.修改配置文件 在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch，一定要写在entry 的最前面，如果有 babel-polyfill 就写在babel-polyfill 的后面

6.在 .babelrc 里添加 plugin, "plugins": ["react-hot-loader/babel"]

处理SASS

1.安装 style-loader css-loader url-loader

npm install style-loader css-loader url-loader --save-dev
로그인 후 복사
로그인 후 복사

2.安装 sass-loader node-sass

npm install sass-loader node-sass --save-dev
로그인 후 복사
로그인 후 복사

3.安装 mini-css-extract-plugin ,提取单独打包css文件

npm install --save-dev mini-css-extract-plugin
로그인 후 복사
로그인 후 복사

4.配置webpack配置文件

webpack.common.js

{
  test:/\.(png|jpg|gif)$/,
  use:[
    "url-loader"
  ]
},
로그인 후 복사
로그인 후 복사

webpack.dev.js

{
  test:/\.scss$/,
  use:[
    "style-loader",
    "css-loader",
    "sass-loader"
  ]
}
로그인 후 복사
로그인 후 복사

webpack.prod.js

const merge = require('webpack-merge');
 const path=require('path');
 let webpack=require('webpack');
 const MiniCssExtractPlugin=require("mini-css-extract-plugin");
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const common = require('./webpack.common.js');
 module.exports = merge(common, {
   mode:'production',
   module:{
     rules:[
       {
         test:/\.scss$/,
         use:[
           // fallback to style-loader in development
           process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
           "css-loader",
           "sass-loader"
         ]
       }
     ]
   },
   plugins: [
     new UglifyJSPlugin(),
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // both options are optional
       filename: "[name].css",
       chunkFilename: "[id].css"
     })
   ]
 });
로그인 후 복사

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

推荐阅读：

详细解析微信小程序入门教程+案例

怎样使用angularjs中http服务器

위 내용은 웹팩을 사용하여 반응 개발 환경을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
react web webpack
원천：php.cn
이전 기사：vux 업로더 이미지 업로드 구성 요소를 사용하는 방법 다음 기사：Nodejs 전역 설치 모듈이 명령을 찾을 수 없음을 완벽하게 처리합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Angular 애플리케이션에서 Javascript 프로토타입 생성자를 가져올 때 오류가 발생합니다. 생성자가 있는 JS 파일을 가져오려고 하는 Angular 애플리케이션이 있습니다. 하지만 애플리케이션을 실행하면 webpack에서 오류가 발생합니다. 자산의 Ja...
에서 2024-04-04 11:36:15
0
1
288
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！