⑴ webpack打包react項目babel-loader轉換es6語法中『...』錯誤
三個點只能在最後，不能在第一位出現的吧
⑵ 如何定位 react webpack 打包定位哪個資源出問題 了
通過 assets-webpack-plugin 生成一個記錄了版本號的文件
// 部分代碼
new AssetsPlugin({
filename: 'build/webpack.assets.js',
processOutput: function (assets) {
return 'window.WEBPACK_ASSETS = ' + JSON.stringify(assets);
}
})
在html中把入口文件引入即可,（html一般也引入入口文件和公共文件也就行了吧）剩下的模塊載入時webpack的分內事了
⑶ react-webpack 怎麼打包發布
. 為什麼用 webpack? 他像 Browserify, 但是將你的應用打包為多個文件. 如果你的單頁面應用有多個頁面, 那麼用戶只從下載對應頁面的代碼. 當他么訪問到另一個頁面, 他們不需要重新下載通用的代碼. 他在很多地方能替代 Grunt 跟 Gulp
⑷ webpack怎麼自動編譯reactjs
使用webpack編譯打包react是非常便捷的。這也是人們常用的一種方式。但是在使用過程中，一定要注意一個細節，那就是webpack和babel-loader的安裝位置。
react安裝
當然，使用react必須先安裝react和react-dom，其安裝方式很簡單（前提是我們必須安裝有npm）。
# npm install react react-dom –save
react安裝就這樣簡單，其實react和react-dom就是相當於js類庫。但是我們需要解析器來解析react的語法。
react解析器babel安裝
babel安裝的位置是我們這篇文章的目的。babel有兩種安裝的位置：一種是全局安裝，一種是本地安裝——也就是安裝在項目目錄下的node_moles下。
# npm install babel-core babel-loader babel-preset-react –save-dev
//本地安裝
#npm install babel-core babel-loader babel-preset-react –g
//全局安裝
一般情況下我們選擇本地安裝，這樣便於管理。
打包工具webpack的安裝
同樣，webpack的安裝位置也是這篇文章描述的所要注意的點。當然，它也有兩種安裝的位置：全局安裝和本地安裝。
# npm install webpack –save-dev
//本地安裝
# npm install webpack –g
//全局安裝
如果選擇本地安裝，那麼在使用的時候較麻煩一些，我們需要在命令前加上路徑。所以一般情況下都是全局安裝，這樣就可以在任意位置直接使用。
這里我們選擇全局安裝。這樣才能出現我們將要說的問題。
webpack配置文件編寫
安裝完webpack以後，下面來編寫webpack配置文件webpack.config.js。這里我不寫全部，只寫載入loader部分。
代碼一
mole:{
loaders: [
{
test: /\.js$/,
loader: 'babel',
query:{
presets:['react']
}
}
]
}
編譯過程中出現的錯誤
好了，到了關鍵的地方了。現在我們整個系統的配置是這樣的：babel安裝到本地，webpack安裝到全局位置，webpack配置文件如代碼一所示。
接下來我們就要編譯打包我們的項目。
# webpack
執行該命令以後，你會發現出現如下的錯誤：
ERROR in (webpack)/~/node-libs-browser/~/process/browser.js
Mole build failed: Error: Couldn't find preset "react" relative to
directory
"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"
……
這也就是說找不到babel-preset-react。
好了，說了這么多終於在這里引出了我們將要討論的問題（這里大家不要嫌我啰嗦，為什麼出現這種問題，其原因總要弄清楚。什麼樣的配置會出現這種問題，了解以後才容易上手解決）。
解決問題的方式
出現上述問題以後，我們有這樣三種方式可以解決。
方式一
要解決這個問題很簡單。我們知道，出現這個問題是因為bable和webpack安裝的位置不同，所以找不到babel-preset-react。因為在配置文件中有這樣一段代碼。
query:{
presets:['react']
}
好了，既然知道是安裝位置不同，那我們可以將babel安裝在全局位置，這樣這個問題不就解決了嗎。
#npm remove babel-core babel-loader babel-preset-react –save-dev
//首先移除原先安裝的babel
#npm install babel-core babel-loader babel-preset-react –g
//全局安裝
沒錯，問題解決了。但是我們不推薦使用這種方式。因為這樣不便於管理，所以還是使用其他的方式。
方式二
此種方式和方式一大同小異。方式一是改變babel的安裝位置，而這里是改變webpack的安裝位置。原先webpack是安裝到全局位置的，所以找不到安裝到本地項目目錄下的babel-preset-react。因此我們可以改變webpack的位置。
# npm remove webpack –g
//移除原先的webpack
# npm install webpack –save-dev
//將webpack安裝到本地位置——也就是項目目錄下的node_moles中
# ln –s /項目根目錄/node_moles/webpack/bin/webpack.js /usr/bin/webpack
//為了使用webpack方便，在這里我們在/usr/bin目錄下建立軟連接（也就是快捷方式）
//這樣我們就可以在任意位置直接使用webpack命令了。
此時我們已經改變了webpack的安裝位置。現在二者同在項目目錄下安裝。所以可以正確編譯了。
此種方式較方式一，我個人比較推薦這種方式，這樣比較方便管理。但是，這種方式也不是沒有弊端。如果我們有多個項目，那我們就需要在每個項目下都安裝webpack，那豈不是很麻煩。所以這種方式也不是很好。
方式三
該方式應該說是最值得推薦的，因為不需要改變webpack和babel的安裝位置。webpack還是在全局位置，babel還是在本地項目位置下。我們需要做的就是修改webpack的配置文件，在代碼一的基礎上添加一句代碼。
代碼二
mole:{
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude:/node_moles/,
query:{
presets:['react']
}
}
]
}
⑸ react-native 怎麼打包發布
react-native ios 打包安裝到手機中的方法： 1、安裝nactiv-cli來完成react-native所運行的環境，安裝命令如下： npm install -g react-native-cli 2、運行源碼抓取命令手機React Native的源碼和依賴，提供在xcode中創建的項目之用。
⑹ 用react寫完了頁面，怎麼打包成app
想快速打包的話，國內的用HBuilder（國人開發，中文支付，文檔全面），集成了支付、分享、推送等常用功能，配置下appid和appsecret就可以快速使用，也是基於Webview的，這樣你已經寫好的代碼什麼都不用改，直接用webpack打包之後放到app裡面去就可以了。
⑺ 如何使用react和webpack
webpack是一個前端資源模塊化管理和打包工具，說白了就是方便我們管理自己的常用的一些代碼，比如你開發中用到sass以及jade同時用到es6，開發時你不可能改動某個地方就挨個命令去轉換在到瀏覽器去看效果，那樣效率是非常低的。所以webpack幫我們省去了那些多餘的步驟。
基本入門
入口文件配置（entry）；
輸出配置（output）；
載入器配置（mole）；
其他配置（resolve）；
build存放編譯後的文件，development存放react代碼的文件夾，components存放react組件的文件夾，node_moles存放安裝的依賴。
⑻ 如何使用webpack 打包react
1、先初始化 ： npm init
2、npm i webpack -D
3、npm i webpack-dev-server -D
4、npm i webpack-dev-server --inline
5、npm i babel-loader babel-core babel-preset-es2015 -D
6、npm i react -S
7、npm i react-dom -S
最後啟動服務： webpack-dev-server --inline