1. 程式人生 > >配置react+nodejs+webpack^3.11.0

配置react+nodejs+webpack^3.11.0

1.首先給自己電腦配置安裝nodejs環境和npm包管理

       在cmd輸入命令node -v可檢視nodejs版本,最新版本nodejs自帶npm包管理,所以不需要單獨安裝npm。如下圖:

2.新建專案 

       在工作盤中(我的是D盤)新建專案資料夾(舉例FirstDemo),使用webstrom開啟並在控制檯中輸入npm init命令初始化一個package.json檔案,如下圖

3.載入node-module

      在控制檯中輸入npm install webpack webpack-dev-server babel --save-dev命令為專案載入webpack配置檔案,如下圖

接下來使用同種方法npm install 下面的包
"devDependencies": {
  "babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.9",
"eslint": "^4.17.0",
"eslint-plugin-react": "^7.6.1",
"file-loader": "^1.1.6",
"jquery": "^3.3.1"
, "less-loader": "^4.0.5", "react": "^16.2.0", "react-dom": "^16.2.0", "react-hot-loader": "^3.1.3", "style-loader": "^0.20.1", "url-loader": "^0.6.2", "webpack": "^3.11.0", "webpack-dev-server": "^2.11.1"
}

4.配置webpack(此版本為3.11.08)

        新建一個webpack.config.js的檔案,在檔案裡面新增如下資訊
/** *
 *  */
'use strict';
var path = 
require('path'); var webpack = require('webpack');module.exports = { devtool: 'eval', entry: './src/entry.js' , output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/static/' },module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.jsx?$/, loaders: ['babel-loader'], exclude: /node_modules/, }, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } ] }, resolve: { extensions: [ '*', '.js', '.json', '.less'] } };
在配置webpack時 我表明了版本,主要原因是最新版本的webpack配置跟舊版本比有很大變化,比如我按照原來版本配置,總是報錯:Getting error: configuration.resolve.extensions[0] should not be empty。解決方法是resolve: {
     extensions
: [ '*', '.js', '.json', '.less']
    }
將extensions中第一個空字元改為*號;

5.新建.babelrc的檔案,裡面的內容如下

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

6.新建server.js的檔案,裡面的內容如下

/** *
 *  */
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');
new WebpackDevServer(webpack(config),
{
        publicPath: config.output.publicPath,
hot: true,
inline:true,
historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
    if (err) {
        return console.log(err);
}
    console.log('Listening at http://localhost:3000/');
});

7.在控制檯輸入node server.js命令,執行專案。

如下圖

在瀏覽器位址列中輸入http://localhost:3000/