react+webpack4.0環境搭建
環境:
node: 10.6.0
react: ^16.4.1
webpack: ^4.6.1
-
安裝node
-
執行npm init,新建一個專案,這裡是myBlog
-
執行npm install webpack webpack-cli webpack-merge --save-dev
-
如需安裝webpack-dev-server, 同時安裝webpack-dev-server
-
這裡解釋下dependencies和devDependencies的區別, 通過—save安裝的包會放在dependencies下面,通過—save-dev安裝的包會放在devDependencies下面,兩者當你在專案下執行npm install的時候都會安裝,區別是在使用npm釋出後,其他人使用npm install安裝你的包時,只會安裝dependencies下的依賴。對於package.json中項的解釋,詳見npm的文件。
-
執行npm install react react-dom --save安裝react
-
在專案目錄下新建資料夾:config,dist和src(Mac下touch config dist src)
-
config裡面放專案的配置檔案,包括我們接下來就要寫的webpack的配置檔案,此外還可以放資料庫的配置檔案,埠配置等等
-
Dist作為webpack的打包出口路徑,下面放網頁的index.html以及webpack打包出來的檔案
-
src作為webpack的入口路徑,下面放webpack入口檔案,這裡我命名為index.js
-
在src下面新建index.js, 先在裡面放簡單的一句話:document.write(“hello world”); 用於測試webpack
-
下面就是開始寫webpack的配置檔案,這裡我寫了三個檔案,一個是webpack.base.js作為配置的基本檔案,和webpack.config.js作為生產環境的配置,還有webpack.dev.js作為開發環境的配置,配置如下:
webpack.base.js
const path = require("path"); module.exports = { //入口檔案 entry: { main: './src/index.js' }, //出口檔案 output: { path: path.resolve(__dirname, '../dist'), filename: "bundle.js" }, module: {}, plugins: [] };
webpack.config.js
const merge = require('webpack-merge');//webpack配置檔案合併
const baseConfig = require("./webpack.base.js");//基礎配置
let config = {
mode: 'production'
};
module.exports = merge(baseConfig, config);
webpack.dev.js
const path = require("path");
const merge = require('webpack-merge');//webpack配置檔案合併
const baseConfig = require("./webpack.base.js");//基礎配置
let config = {
mode: 'development',
devServer: {
contentBase: path.resolve(__dirname, '../dist'),
host: 'localhost',
compress: true,
port: 8888
}
};
module.exports = merge(baseConfig, config);
-
在dist目錄下新建index.html, 內容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id=“root"></div>
<script src="./bundle.js"></script>
</body>
</html>
-
然後在package.json中配置scripts,新增指令碼:
"dev": "webpack-dev-server --config=config/webpack.dev.js",
"build": "webpack --config=config/webpack.config.js"
-
然後執行npm run build, 再在瀏覽器中開啟dist/index.html 或者執行npm run dev, 在瀏覽器中開啟localhost:8888, 出現hello world即代表成功.
-
接下來就是配置react, 這裡我們使用babel進行打包,使我們在寫程式碼的時候可以使用es6的語法. 在終端下執行 npm install babel-cli babel-core babel-loader babel-preset-env babel-preset-react babel-plugin-transform-class-properties --save-dev
-
修改我們的index.js, 使用react風格, 完整內容如下:
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
getText = () => {
return "hello world";
}
render(){
return (
<h1>{this.getText()}</h1>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
-
此時在跑是會報錯的,因為預設是不支援這種語法,需要使用babel進行轉換,在webpack.base.js中的module下新增配置資料,如下:
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: [["env"],["react"]],
plugins: [
"transform-class-properties"
]
}
}
]
},
注意: 這裡的意思是除了node_modules目錄下,專案裡所有的字尾為.js的檔案都使用babel-loader進行轉換, 其中test是一個正則表示式,如果你使用了字尾為jsx的格式, 則這裡需要修改正則. Options中是babel的配置,也可以在專案根目錄下新建.babelrc檔案,然後將其放在.babelrc檔案中. 具體的配置根據babel的文件和自己的需求進行修改, 這裡簡單介紹下我使用的配置: env是babel建議用來取代babel-preset-es2016和2015的, 能夠支援es6和es5的語法, react能夠支援jsx的語法, transform-class-properties是用來支援類中方法使用箭頭函式的.
-
然後再執行npm run build或npm run dev進行打包即可
至此我們便搭建起了一個基本的react+webpack4的專案, 在後續的專案中會陸續增加相應的配置, 以上一個將基本配置完成的專案程式碼可以在我的github專案: https://github.com/wushuangYK/myBlog.git 中的base分支中找到, 你也可以在其他分支上關注該專案的後續開發進度.
feel free to contact me:[email protected]
最後附上參考連結:
相關推薦
react+webpack4.0環境搭建
環境: node: 10.6.0 react: ^16.4.1 webpack: ^4.6.1 安裝node 執行npm init,新建一個專案,這裡是myBlog 執行npm install webpack we
0.react學習筆記-環境搭建與腳手架
0.環境搭建 筆者使用的是deepin/mac兩種系統,因為兩個電腦經常切換用。環境搭建沒什麼區別。 0.1 node安裝 按照node官網敘述安裝 # Using Debian, as root curl -sL https://deb.nodesource.com/setup_10.x | bas
AngularJS4.0環境搭建詳解--windows系統環境
class images 開發 安裝 hub 詳解 ans win 總結 第一步:安裝NodeJS 下載最新版的NodeJS並安裝,安裝完成後打開CMD命令行,輸入以下命令: node -v 若返回類似版本號則代表NodeJS安裝成功,如下: 第二部
react+es6+webpack環境搭建以及項目入門
是我 輸出 項目 啟動 author 輸入 解釋 每次 span 前言:拖了這麽久,小菜鳥終於開始正式應用react,和es6來開發項目了。之前超喜歡同學的一個博客風格,這裏貼一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一下
mac 下 react Native android環境搭建
否則 編譯速度 方案 立即生效 cat blog ref spa 默認 1、參考 上一篇的博客文章 “mac 下 react Native ios環境搭建”,前面幾步都是必須的,只是,原生客戶端不一致 2、Android Studio的安裝 A:安裝JAVA
react-native 開發環境搭建
post 註意 令行 圖片 技術 usb bubuko http androi 首先安裝jdk。本教程基於jdk1.8,安裝時有一點要特別註意:jdk和jre必須裝到不同目錄下,否則初始化react-native項目時大概率報tools.jar not found ex
react-native-開發環境搭建
Go roi ids ati ios studio androi 工具 sta 一、開發環境搭建-windows平臺; 安裝 node 安裝 react native npm install -g react-native-cli 安裝Android開發工具Androi
windows10-nginx-mysql8.0-php7.0環境搭建
cti 啟動方式 -- ini 存儲引擎 onf pan mysql 8.0 技術 首先去nginx,mysql,php官網下載版本 先配置nginx,下載下來是這個樣子的 找到conf/nginx.conf,建議先備個份,下面是改動的地方
Ubuntu16.04+CUDA8.0+cuDNN5.1+Python2.7+TensorFlow1.2.0環境搭建
選擇 per orf stop lis option amd64 pan repo 軟件版本說明:我選的Linux系統是Ubuntu16.04,CUDA用的8.0,Ubuntu16.04+CUDA8.0+cuDNN5.1+Python2.7只支持TensorFlow1.3.
Angular4.0環境搭建
tps 地址 過程 ron https span -c cor 環境 1.安裝nodejs 先裝nodejs,如果你的電腦已經裝過了,最好確認是比較新的版本,否則可能會出問題 沒有安裝的直接去nodejs官網下載nodejs安裝. 下載地址:https://nodejs.o
Python3.7、Eclipse 4.5、 Java 8、 PyDev 5.2.0、 selenium-3.14.0環境搭建
系統 keys nload 令行 集成 nis 連接 百度一下 oca python環境搭建Eclipse 4.5、 Java 8、 PyDev 5.2.0、 Python3.7、 selenium-3.14.0 1 安裝Python 下載地址:http://www.pyt
React Native 入門環境搭建
參考文獻:http://wiki.jikexueyuan.com/project/react-native/GettingStarted.html 這裡說下我的安裝步驟以及安裝時遇到的問題: 1、安裝 Homebrew 網址: http://brew
win10的react native 開發環境搭建,使用Android模擬器
1.開啟cmd的管理員模式,win+X,選擇命令提示符(管理員)即可,執行如下命令: @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy
區塊鏈 Hyperledger Fabric v1.0.0 環境搭建
前言:最近專案涉及到超級賬本,在有些理論知識的基礎上,需要整一套環境來。 這是一個特別要注意的事情,筆者之前按照網路上推薦,大部分都是推薦ubuntu系統的,於是下載Ubuntu系統(16.04.5和18.04都試試),遇到各種問題,一直不能成功,大概花了好多天,一直不成功,後來都要放棄了,
Hadoop2.7.2 HBase2.0.0環境搭建
叢集配置 HBase – Hadoop Database,是一個高可靠性、高效能、面向列、可伸縮的分散式儲存系統,利用HBase技術可在廉價PC Server上搭建起大規模結構化儲存叢集。 一、基礎環境 JDK :1.8.0_65 (要求1
react(一)基礎環境搭建
以下安裝都需要先搭建nodejs、Npm包管理工具,官網可以下載。 首先用npm 安裝 create-react-app工具,其可以自動地在本地目錄中建立react專案。 在cmd命令列中輸入:
windows 下react native App環境搭建問題總結
windows 下react native App環境搭建問題總結 最近在玩react native app但是環境搭建就遇到了很多問題。其中大部分都是分別在網上找到的解決辦法,但是比較分散所以先總結出來以供參考! 環境搭建過程中用到的工具 模擬器:genymotio
react native ts環境搭建
react native編寫原生應用,不僅可以編寫android,還可以編寫ios,使得我們的程式設計,變得更加的簡潔,那其實搭建react native環境是非常簡單的,隨著網際網路的發展,那對於編寫的規範也變得更加的嚴格,比如說,出現的typescript,但是給程式設計也帶來一些麻煩,比如,實現同樣
VS2013+OpenCV3.1.0環境搭建
文章目錄 本人環境 1. 下載原始碼 2. 新增環境變數 3. 新建工程 4. 測試 處理警告資訊 本人環境 Win10+64位+VS2013+Opencv3.1.0(只要環境變數和庫目錄配
Tomcat9.0環境搭建與原始碼編譯
使用IntelliJ IDEA 搭建Tomcat9.0專案 準備條件: 下載原始碼 這裡我們下載的Tomcat的原始碼版本是9.0.12。 下載地址: https://tomcat.apache.org/download-90.cgi &