溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近由于項目需要，所以嘗試使用webpack搭建react運行環境，在克服了一系列困難后，終于能在頁面輸出"Hello World"，特地把整個過程記錄下來，利人利己。
首先我創建了一個文件夾webpack-helloworld-demo，之后的大部分操作都會在這個文件夾下進行。
1.初始化文件夾
npm init //初始化一個package.json文件 git init //產生.git文件，便于之后版本提交回退
2.搭建webpack環境
npm install webpack --save-dev //安裝webpack依賴
--save建議使用，這樣當別人clone你的代碼時，只需要npm install就可以安裝好所有需要的依賴，并且你也可以在你的package.json文件夾中看到你使用的哪些依賴。
現在我們可以測試下webpack有沒有安裝成功，在文件夾根目錄下創建三個文件，分別是entry.js，bundle.js，index.html，文件內容分別如下。
//entry.js
document.write('Hello World');
//index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
bundle.js內容為空
執行命令行：webpack ./entry.js bundle.js
之后會發現bundle.js文件下有好多代碼出現，這就是經過webpack打包后的文件。在瀏覽器打開index.html,頁面會出現Hello World，webpack安裝成功！
3.配置webpack
創建webpack.config.js文件，進行如下基本配置
module.exports = {
entry: "./entry.js", // 要打包的入口文件
output: { //打包后的文件
path: __dirname, //表示使用絕對路徑
filename: "bundle.js" //輸出文件名
},
module: {
loaders: [ //用于加載一些靜態文件夾（css樣式，圖片之類）
{ test: /\.css$/, loader: "style!css" },
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/, //不進行轉換的文件，可以提高打包速度
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}
]
}
};
執行命令：webpack
打開index.html出現Hello World,配置成功。
現在我們的文件目錄如下：
4.express下運行
npm install express --save-dev
創建server.js
var express = require('express');
var app = express();
app.use(express.static('./')); //訪問當前目錄下的靜態文件。默認訪問index.html
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
執行命令： webpack // 用于打包文件 node server.js // 開啟服務器
瀏覽器訪問 http://localhost:3000/ ， 頁面顯示Hello World，運行成功！
5.配置 React, ES6 & Babel 6
npm install react --save-dev npm install react-dom --save-dev npm install babel-loader --save-dev // 轉換JSX npm install babel-core --save-dev // babel的核心包 npm install babel-preset-es2015-dev // es2015的babel預設 npm install babel-preset-react-dev // react的babel預設
創建文件.babelrc
{
"presets": [
"es2015",
"react"
]
}
接下來就是寫react小例子測試啦，在entry.js寫入：
import React, {Component} from 'react';
import {render} from "react-dom";
class HelloMessage extends React.Component {
render() {
return <div>Hello World</div>;
}
}
render(<HelloMessage />, document.getElementById('app'));
為了將組件渲染到頁面，我們需要在index.html中添加一個相當于容器的div：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div id="app"></div> // 添加的div，渲染至div中 <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
瀏覽器訪問 http://localhost:3000/ ， 頁面顯示Hello World，運行成功！
現在我們的文件目錄為：
至此我們就搭建好了一個簡單的環境啦～
框架Github地址：https://github.com/DQing/webpack-helloworld-demo.git
大家在搭建框架時不要忘了小步提交。
還可以進行一些額外的配置，步驟其實都差不多
框架Github地址：https://github.com/DQing/jishiben.git
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
