webpack+babel+ES6+react環境搭建
步驟：
1 創建項目結構
注意: 先創建一個項目目錄 react 這個名字自定義，然后進入到這個目錄下面
mkdir app //創建app目錄 用來存放項目源文件
mkdir dist // 創建dist目錄 用來存放打包好的文件
touch .gitignore //創建.gitignore 用來添加git 忽略的文件
touch webpack.config.js //創建webpack的配置文件
cd app //進入到app目錄
touch index.js //在app目錄中創建 index文件 入口文件
mkdir component //創建componet目錄 用來裝組件
2 初始化項目
npm init -y
做完上面兩步，得到項目目錄為：
3 安裝webpack
npm install webpack --save
注意：安裝完成以后，項目目錄下會生成一個node_modules的文件夾 用來存放npm包
4 打開webpack.config.js 文件 並添加配置項目
module.exports = {
context:__dirname+"/app", //源文件目錄
entry:{
app:"./index.js" //在源文件目錄下去找index.js 文件作為打包的入口文件
},
output:{
path:__dirname+"/dist", //生成的文件存放目錄
filename:"[name].bundle.js" //生成的文件 name 表示entry下面的app
}
}
5 讓npm 可以運行 webpack --在package.json 文件中 添加一條命令
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"./node_modules/.bin/webpack" //這條命令是新增加的
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.23.0",
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"webpack": "^2.2.1"
}
}
注意： 添加完成后就可以 通過 npm run dev 來打包編譯 js文件
6 在dist目錄下面新建index.html 文件，並且引入打包好的js文件
index.html 文件內容：
<!DOCTYPE html> <html lang="en"> <head> <metacharset="UTF-8"> <title>首頁</title> </head> <body> </body> <scriptsrc="app.bundle.js"></script> </html>
index.js文件內容：
doucment.write("hello world!!!!")
執行npm run dev 命令后 會在dist目錄下面生成一個 app.bundle.js 的文件 運行index.html 文件查看效果
6 通過babel來使用es6
安裝相關loader
npm install babel-loader babel-core babel-preset-es2015 --save
修改webpack.config.js 配置文件，添加規則
module.exports = {
context:__dirname+"/app",
entry:{
app:"./index.js"
},
output:{
path:__dirname+"/dist",
filename:"[name].bundle.js"
},
module:{
rules:[
{
test:/\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: { presets: ["react","es2015"] }
}],
},
]
}
}
7 添加react支持
npm install react react-dom babel-preset-react --save
注意：這里有坑： 安裝的時候報錯，最大的問題是因為我們項目名稱叫做 react 在package.json文件中有個name屬性值為react 只需要把這個react值改成其他的就可以安裝上 了
修改 app下面 index.js 文件
import React from 'react';
import ReactDOM from 'react-dom';
class IndexComponent extends React.Component{
render(){
return <h1>hello world!!!</h1>
}
}
var oBox = document.getElementById("box");
ReactDOM.render(<IndexComponent/>,oBox)
npm run dev 然后運行 index.html 文件查看效果
修改dist下面 index.html文件
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>首頁</title>
</head>
<body>
<divid="box"></div>
</body>
<scriptsrc="app.bundle.js"></script>
</html>
8 添加樣式支持
安裝css-loader 和 style-loader
npm install css-loader style-loader --save
修改配置webpack.config.js 配置文件
module.exports = {
context:__dirname+"/app",
entry:{
app:"./index.js"
},
output:{
path:__dirname+"/dist",
filename:"[name].bundle.js"
},
module:{
rules:[
{
test:/\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: { presets: ["react","es2015"] }
}],
},
{ //這里的內容是新增加的對樣式的支持
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
]
}
}
修改 index.js 文件
import React from 'react';
import ReactDOM from 'react-dom';
import styles from './css/index.css'; //這里內容屬於新增加的
class IndexComponent extends React.Component{
render(){
return <h1>hello world!!!</h1>
}
}
var oBox = document.getElementById("box")
ReactDOM.render(<IndexComponent/>,oBox)
在app目錄下新建css目錄 ，在css目錄下 新建 index.css 文件
h1{
color: green;
}
npm run dev 編譯 然后運行 dist目錄下index.html 文件 查看效果
9 添加web服務器支持
安裝 webpack-dev-server
npm install webpack-dev-server --save
修改package.json文件
把：
"dev": "./node_modules/.bin/webpack"
修改為：
"dev": "./node_modules/.bin/webpack-dev-server --content-base dist"
npm run dev 然后 在瀏覽器輸入 http://loaclhost:8080 查看效果