菜雞專用 react+webpack+webstorm環境搭建那點事兒

阿新 • • 發佈：2019-02-11

react+webpack+webstorm環境搭建那點事兒

一.安裝穩定版node.js(已整合npm)，安裝新版的webstorm
坑：
1.cmd中配置npm的路徑例如：
npm config set prefix "d:\nodejs\node_global" npm config set cache "d:\nodejs\node_cache"
2.修改環境變數中的node路徑：

新建一個NODE_PATH的鍵，輸入你自己給定的全域性存放路徑
這裡寫圖片描述
同樣,使用者變數中的PATH路徑也要改成和NODE_PATH一直的路徑
administrator中path新增d:\nodejs\node_global;

npm install webpack -g // 開啟cmd全域性安裝webpack

3.以上的步驟全部完成以後，開啟CMD，輸入node,再鍵入require(‘webpack’)

二.安裝各種依賴項
開啟奇卡無比的webstorm的命令列(左下角T打頭的，反正你也不會讀)

npm init -y//初始化
npm install --save-dev [email protected]^2.1.0-beta.25 webpack-dev-server@^1.16.2 //安裝webpack以及webpack測試伺服器，注意版本號
npm install --save-dev 
 babel-core babel-loader babel-preset-es2015 //安裝babel，babel的作用是將es6的語法編譯成瀏覽器認識的語法
npm install --save-dev css-loader sass-loader style-loader url-loader
 //用來解析css

npm install  react react-dom react-router react-hot-loader  jsx-loader html-webpack-plugin --save-dev 
//react

大致依賴安裝如上，具體的按具體需求來；
坑：webpack以及webpack測試伺服器的版本號是整個熱過載的關鍵，別的流程基本和能搜到的文章一模一樣，不多bb；此處指定載入1.16.2伺服器版本——原因是預設安裝的server版本為2以上修改了語法導致，各處寫法與文章教程寫法不一致，引起報錯。

作為一個懶人加文盲，直接使用老版本吧。
有興趣的同學可以通讀下webpack官方文件，有好處。
三.新增檔案
1.照這圖抄寫目錄結構
這裡寫圖片描述

2.在抄下個文件內容
index.js

var React = require('react');
var ProductBox;
ProductBox = React.createClass({
    render: function () {
        return (
            <div className="productBox">
                hello react&es2015&webpack!!!dsadsadsada
            </div>
        );
    }
});

module.exports = ProductBox;

main.js

let React = require('react');
let ReactDOM = require('react-dom');
let AppComponent = require('./index.js');
ReactDOM.render(<AppComponent />, document.getElementById('content'));

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React Project</title>
</head>
<body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<div id="content"></div>
<script src="./bundle.js"></script>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

.babelrc

{
  "presets": ["react", "es2015"]
}

package.json(可以直接抄瞭然後npm install，注意於script程式碼片，且name不能跟我們的模組和專案檔案目錄同名)

{
  "name": "1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "css-loader": "^0.26.2",
    "html-webpack-plugin": "^2.28.0",
    "jsx-loader": "^0.13.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-hot-loader": "^1.3.1",
    "react-router": "^3.0.2",
    "sass-loader": "^6.0.2",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "webpack": "^2.1.0-beta.25",
    "webpack-dev-server": "^1.16.2"
  }
}

webpack.config（注意entry路徑已經output路徑)

var path = require('path'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './app/main.js')],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: 'bundle.js'
    },
    devServer: {
        inline: true,
        port: 8099
    },
    module: {
        loaders: [{
            test: /\.js?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            } //將react編譯成js檔案
        },
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //打包css檔案
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //編譯sass檔案
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
            //對圖片進行打包
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './build/index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
};

四收工
左下方自帶命令列輸入

webpack //生成打包bundle.js，若出現UNMET PEER DEPENDENCY對照補上依賴

若一片綠字兒

npm run build         //線上目錄

npm run dev          // 開發目錄

若還是綠字兒
。
。
。
那你運氣還蠻好的

http://localhost:8099/index.html //瀏覽器輸入訪問

完工，沒次寫完按一下ctrl+s儲存瀏覽器自動重新整理，無需在打包。
如果ctrl都嫌麻煩可以去掉wb設定裡的safe write（File->settings->System Settings），隨便寫一下就自動重新整理，卡死你！

至此一個十分簡陋的環境就搭好了，你想自己做一個屬於自己的環境嗎，
老實看文件去吧
除錯過程中記得看命令列的紅字，其實問題都寫在上面，不會就gooooogle一下
英文不好，不能科學上網的，那就慢慢磨把，總能搭好的，不是嗎，要有耐心。

這裡寫圖片描述

菜雞專用 react+webpack+webstorm環境搭建那點事兒

react+webpack+webstorm環境搭建那點事兒

菜雞專用 react+webpack+webstorm環境搭建那點事兒

React+webpack開發環境搭建+埠修改

react + webpack + ES6 環境搭建

React+Webpack+Webstorm開發環境搭建

webpack+react+es2015輕鬆環境搭建，配置，執行專案

mac 下 react Native android環境搭建

react-native 開發環境搭建

react-native-開發環境搭建

vue+webpack工程環境搭建

React Native 入門環境搭建

win10的react native 開發環境搭建，使用Android模擬器

react(一)基礎環境搭建

windows 下react native App環境搭建問題總結

react native ts環境搭建

0.react學習筆記-環境搭建與腳手架

webpack + babel 環境搭建

typescript+react+antd基礎環境搭建

react-native 開發環境搭建(寫於2018-12-31)

React+NodeJS+Express 環境搭建與部署

react新手入門環境搭建+入手操作

菜雞專用 react+webpack+webstorm環境搭建那點事兒

react+webpack+webstorm環境搭建那點事兒

相關推薦