react、webpack、跨域代理多頁面
- 小云云原創
- 2018-02-23 10:25:193004瀏覽
初學react，利用webpack進行工程化開發管理，遇到一些問題，如多頁面處理，跨域代理的設置，如何同時引入使用jQuery。第一次試水，簡單寫了一個表格組件。
先照著react官網提供的教學使用create-react-app建立react專案
npm install -g create-react-app create-react-app my-app cd my-app npm start
OK，第一個react程式跑起來了，然後第一個問題來了，這是一個單頁應用，依照以往的開發經驗，由於需要開發的平台會比較複雜，需要做成多頁面，如何配置成多頁面呢：
改造一下my-app目錄下的package. json檔案（這個檔案決定了你前端工程化開發時候需要安裝的依賴，包括react也是在這裡安裝的哦）
附上我的package.json:
{
"name": "my-app",
"version": "1.0.0",
"description": "pack test",
"main": "index.js",
"dependencies": {
"expose-loader": "^0.7.4",
"jquery": "^3.2.1",
"webpack": "^3.10.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.0.0",
"glob": "^7.1.2",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"jquery": "^3.2.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.8.1"
},
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
},
"author": "albert",
"license": "ISC"
}
我們把原來目錄下的node_modules資料夾刪除掉，然後在package.json所在目錄下跑
npm i
就會自動產生node_modules資料夾並安裝我們在package.json裡定義的那些依賴了。
package.json裡可以看到我要安裝jqeury依賴，後面會聊這個。另外想聊一下的是這一句
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
}
這裡我們指定了npm指令腳本，對應的運行指令分別是npm start 和npm run build(一定要加上run，初學跑的時候沒帶run，一直跑不出來，被這個懵圈了好久o(╥﹏╥)o)
npm start中我們指定了利用是用webpack的dev server來運行，會啟動一個伺服器。這個開發的時候用很爽，編輯了程式碼儲存後會熱更新，前端程式碼自動重新建置並通知瀏覽器刷新。此時打包的檔案是在記憶體中產生的，所以不要費勁去目錄下找了，你根本找不到o(￣︶￣)o
npm run build運行後是用來真正產生webpack打包後的檔案的，你可以指定輸出目錄，具體參考webpack.config.js。這個指令產生的檔案可以放到後端伺服器指定的靜態檔案目錄下，這些就是用來上線的檔案。
再瞥見我的webpack.config.js，這個檔案是用來告訴webpack按什麼樣的方式來建立前端工程，如何打包等等
const webpack = require('webpack');
const glob = require('glob');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpackConfig = {
entry: {},
output:{
// path:path.resolve(__dirname, './dist/'),
path:path.resolve('C:/wamp64/www/path/'),
filename:'[name].[chunkhash:6].js'
},
//设置开发者工具的端口号,不设置则默认为8080端口
devServer: {
inline: true,
port: 8181,
proxy: {
'/': {
target: 'http://localhost:80',
secure: true,
changeOrigin: true
}
}
},
module:{
rules:[
{
test:/\.js?$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['es2015','react']
}
},
{
test: /\.(scss|sass|css)$/,
loader: ExtractTextPlugin.extract({fallback: "style-loader", use: "css-loader"})
},
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
]
},
plugins: [
new ExtractTextPlugin("[name].[chunkhash:6].css"),
new CleanWebpackPlugin(
['path'],
{
root: 'C:/wamp64/www/',
verbose: true,
dry: false
}
)
],
};
// 获取指定路径下的入口文件
function getEntries(globPath) {
const files = glob.sync(globPath),
entries = {};
console.log(files)
files.forEach(function(filepath) {
const split = filepath.split('/');
const name = split[split.length - 2];
entries[name] = './' + filepath;
});
return entries;
}
const entries = getEntries('src/**/index.js');
Object.keys(entries).forEach(function(name) {
webpackConfig.entry[name] = entries[name];
const plugin = new HtmlWebpackPlugin({
filename: name + '.html',
template: './public/index.html',
inject: true,
chunks: [name]
});
webpackConfig.plugins.push(plugin);
})
module.exports = webpackConfig;
相關推薦：
以上是react、webpack、跨域代理多頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！