初始化一個react項目
mkdir init_react
cd init_react
npm init //如果沒有什么特殊的配置一路回車，得到package.json文件
目錄結構
dist ---------------------------------------------> //用於存放webpack打包之后的項目文件
index.html ----------------------------------> //webpack打包之后的html文件
main.hash值.bundle.js ---------------------> //webpack打包之后的js文件
node_modules --------------------------------> //項目當中使用的第三方庫文件存放目錄
src ----------------------------------------------> //生產環境中代碼存放目錄
index.html ----------------------------------> //前端統一的html模版文件
index.js -------------------------------------> //項目的主入口文件
index.less -----------------------------------> //項目中的樣式文件
.babelrc ----------------------------------------> //babel的配置文件
package.js
webpack.config.js -----------------------------> //webpack的配置文件
安裝webpack打包工具和webpack-dev-server服務器
npm install webapck --save
npm install webpack-dev-server --save
安裝react和react-dom
npm install react --save
npm install react-dom --save
安裝babel
npm install babel-preset-es2015 babel-preset-react babel-preset-stage-0 babel-polyfill babel-core --save-dev
創建.babelrc文件,配置babel 預處理
{
"presets": ["es2015","react","stage-0"]
}
處理樣式需要安裝less
npm install less --save
安裝webpack 的 loader
npm install babel-loader style-loader css-loader less-loader --save-dev
安裝webpack插件
npm install extract-text-webpack-plugin html-webpack-plugin --save-dev
創建webpack.config.js文件
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
devtool:'eval', //source-map
entry:{
main:'./src/index.js'//入口文件
},
output:{
path:path.join(__dirname, 'dist'),//出口文件
filename: '[name].[hash:8].bundle.js'
},
resolve: {
extensions: [' ', '.js','.jsx', '.json','.css','.less']
},
module:{
rules: [{
test: /\.less$/,//加載less樣式的loader
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'less-loader']
})
}, {
test: /\.js?$/,//用於解析es6語法的babel-loader
exclude: /node_modules/,
use: 'babel-loader'
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin(), //熱更新
new webpack.NoEmitOnErrorsPlugin(), //錯誤不編譯
new ExtractTextPlugin('style.css'), //css模塊獨立
new HtmlWebpackPlugin({
title: 'Redux Practive', //標題
// favicon: './src/assets/img/favicon.ico', //favicon路徑
filename: './index.html', //生成的html存放路徑，相對於 path
template: './src/index.html', //html模板路徑
inject: true, //允許插件修改哪些內容，包括head與body`
minify: { //壓縮HTML文件
removeComments: true, //移除HTML中的注釋
collapseWhitespace: false //刪除空白符與換行符
}
})
]
}
修改package.json
{
"name": "init_react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --inline --progress --colors --watch --compress --content-base ./dist --port 8086 --host 0.0.0.0",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"less": "^2.7.2",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.6.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.29.0",
"less-loader": "^4.0.5",
"style-loader": "^0.18.2"
}
}
創建html模版文件
在項目的根目錄下創建src目錄並創建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
在src目錄下創建index.js
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
)