webstorm環境下，react+webpack+nodejs搭建專案環境
阿新 • • 發佈：2019-01-05
一、建立基本目錄結構
1.新建專案工程：PockerUI
2.配置jsx
3.安裝 webpack
在此之前你應該已經安裝了 node.js.
npm install webpack -g引數-g表示我們將全域性(global)安裝 webpack, 這樣你就能使用 webpack 命令了.
webpack 也有一個 web 伺服器 webpack-dev-server, 我們也安裝上
npm install webpack-dev-server -g
webpack 配置檔案
新建檔案：webpack.config.js （webpack 使用一個名為 webpack.config.js 的配置檔案【必須】 )
//process.noDeprecation = true;
var path = require('path');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {
entry: {//輸入檔案
'index': './src/js/index.js'//‘index’是生成檔案的名稱，，多個生成檔名將匹配output裡的[name],'index'後面的需要被載入到index的檔案的路徑，可用陣列方式載入多個檔案，如['./src/js/index.js'，'./src/js/base.js'] 新建檔案：package.json （需要引入的相關依賴【必須】）
{
"name": "react-es6-less-bootstrap-webpack-template",
"version": "1.0.0",
"description": "A simple webpack template.",
"repository": {},
"scripts": {
"start": "webpack -d --progress --colors --watch",
"build/":"webpack -p"
},
"dependencies": {
"bootstrap": "^3.3.5",
"react": "^0.14.0",
"react-dom": "^0.14.1",
"jade": "1.11.0",
"jquery": "^3.2.1"
},
"devDependencies": {
"babel-core": "^5.8.30",
"babel-loader": "^5.3.2",
"browser-sync": "^2.11.2",
"browser-sync-webpack-plugin": "^1.0.1",
"css-loader": "^0.21.0",
"file-loader": "^0.8.4",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.7.2",
"less": "^2.5.3",
"less-loader": "^2.2.1",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.2"
},
"author": "",
"license": ""
}執行node，安裝packpage.json中的外掛
npm install
下面就是專案開發中的程式碼了
根據個人習慣建立目錄結構：
新建模組js檔案：hiDom.js
注：這裡的HiDoms節點名可以任意命名，但首字母必須大寫
import React from 'react';
import '../less/common.less';
export default class HiDoms extends React.Component{
render(){
return(
<div className="hiDoms">
hi react !
</div>
)
}
}新建js檔案：index.js
import $ from 'jquery';
import React from 'react';
import { render } from 'react-dom';
import HiDoms from './hiDom';
render(<HiDoms />, $('#content')[0]);新建html頁面：index.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>react demo</title>
</head>
<body>
<div id="content"></div>
</body>
</html>新建less檔案：common.less
.hiDoms {
align-items: center;
background: #ff6600;
color: black;
font-size: 32px;
text-align: center;
padding: 2px;
}完整的目錄結構：
執行專案
開發模式 npm run start
生產模式 npm run build
最終網頁效果：
