react+webpack4.0環境搭建

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

環境：

node: 10.6.0

react： ^16.4.1

webpack: ^4.6.1

安裝node
執行npm init，新建一個專案，這裡是myBlog
執行npm install webpack webpack-cli webpack-merge --save-dev
如需安裝webpack-dev-server, 同時安裝webpack-dev-server
這裡解釋下dependencies和devDependencies的區別，通過—save安裝的包會放在dependencies下面，通過—save-dev安裝的包會放在devDependencies下面，兩者當你在專案下執行npm install的時候都會安裝，區別是在使用npm釋出後，其他人使用npm install安裝你的包時，只會安裝dependencies下的依賴。對於package.json中項的解釋，詳見npm的文件。
執行npm install react react-dom --save安裝react
在專案目錄下新建資料夾：config，dist和src（Mac下touch config dist src）
config裡面放專案的配置檔案，包括我們接下來就要寫的webpack的配置檔案，此外還可以放資料庫的配置檔案，埠配置等等
Dist作為webpack的打包出口路徑，下面放網頁的index.html以及webpack打包出來的檔案
src作為webpack的入口路徑，下面放webpack入口檔案，這裡我命名為index.js
在src下面新建index.js，先在裡面放簡單的一句話：document.write(“hello world”); 用於測試webpack
下面就是開始寫webpack的配置檔案，這裡我寫了三個檔案，一個是webpack.base.js作為配置的基本檔案，和webpack.config.js作為生產環境的配置，還有webpack.dev.js作為開發環境的配置，配置如下：

webpack.base.js

const path = require("path");



module.exports = {

    //入口檔案

    entry: {

        main: './src/index.js'

    },

    //出口檔案

    output: {

        path: path.resolve(__dirname, '../dist'),

        filename: "bundle.js"

    },

    module: {},

    plugins: []

};

webpack.config.js

const merge = require('webpack-merge');//webpack配置檔案合併

const baseConfig = require("./webpack.base.js");//基礎配置



let config = {

    mode: 'production'

};



module.exports = merge(baseConfig, config);

webpack.dev.js

const path = require("path");

const merge = require('webpack-merge');//webpack配置檔案合併

const baseConfig = require("./webpack.base.js");//基礎配置



let config = {

    mode: 'development',

    devServer: {

        contentBase: path.resolve(__dirname, '../dist'),

        host: 'localhost',

        compress: true,

        port: 8888

    }

};



module.exports = merge(baseConfig, config);

在dist目錄下新建index.html, 內容如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

<div id=“root"></div>

<script src="./bundle.js"></script>

</body>

</html>

然後在package.json中配置scripts，新增指令碼：

"dev": "webpack-dev-server --config=config/webpack.dev.js",

"build": "webpack --config=config/webpack.config.js"

然後執行npm run build，再在瀏覽器中開啟dist/index.html 或者執行npm run dev, 在瀏覽器中開啟localhost:8888, 出現hello world即代表成功.
接下來就是配置react, 這裡我們使用babel進行打包,使我們在寫程式碼的時候可以使用es6的語法. 在終端下執行 npm install babel-cli babel-core babel-loader babel-preset-env babel-preset-react babel-plugin-transform-class-properties --save-dev
修改我們的index.js, 使用react風格, 完整內容如下:

import React from 'react'

import ReactDOM from 'react-dom'



class App extends React.Component{

    getText = () => {

        return "hello world";

    }



    render(){

        return (

            <h1>{this.getText()}</h1>

        )

    }

}



ReactDOM.render(

    <App />,

    document.getElementById('root')

);

此時在跑是會報錯的,因為預設是不支援這種語法,需要使用babel進行轉換,在webpack.base.js中的module下新增配置資料,如下:

module: {

    rules: [

        {

            test: /\.js$/,

            exclude: /node_modules/,

            loader: "babel-loader",

            options: {

                presets: [["env"],["react"]],

                plugins: [

                    "transform-class-properties"

                ]

            }

        }

    ]

},

注意: 這裡的意思是除了node_modules目錄下,專案裡所有的字尾為.js的檔案都使用babel-loader進行轉換, 其中test是一個正則表示式,如果你使用了字尾為jsx的格式, 則這裡需要修改正則. Options中是babel的配置,也可以在專案根目錄下新建.babelrc檔案,然後將其放在.babelrc檔案中. 具體的配置根據babel的文件和自己的需求進行修改, 這裡簡單介紹下我使用的配置: env是babel建議用來取代babel-preset-es2016和2015的, 能夠支援es6和es5的語法, react能夠支援jsx的語法, transform-class-properties是用來支援類中方法使用箭頭函式的.

然後再執行npm run build或npm run dev進行打包即可

至此我們便搭建起了一個基本的react+webpack4的專案, 在後續的專案中會陸續增加相應的配置, 以上一個將基本配置完成的專案程式碼可以在我的github專案: https://github.com/wushuangYK/myBlog.git 中的base分支中找到, 你也可以在其他分支上關注該專案的後續開發進度.

feel free to contact me:[email protected]

最後附上參考連結:

react+webpack4.0環境搭建

react+webpack4.0環境搭建

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

AngularJS4.0環境搭建詳解--windows系統環境

react+es6+webpack環境搭建以及項目入門

mac 下 react Native android環境搭建

react-native 開發環境搭建

react-native-開發環境搭建

windows10-nginx-mysql8.0-php7.0環境搭建

Ubuntu16.04+CUDA8.0+cuDNN5.1+Python2.7+TensorFlow1.2.0環境搭建

Angular4.0環境搭建

Python3.7、Eclipse 4.5、 Java 8、 PyDev 5.2.0、 selenium-3.14.0環境搭建

React Native 入門環境搭建

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

區塊鏈 Hyperledger Fabric v1.0.0 環境搭建

Hadoop2.7.2 HBase2.0.0環境搭建

react(一)基礎環境搭建

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

react native ts環境搭建

VS2013+OpenCV3.1.0環境搭建

Tomcat9.0環境搭建與原始碼編譯

react+webpack4.0環境搭建

相關推薦