快速搭建 webpack + react 環境

時間 2020-03-16

原文原文鏈接

安裝

首先你須要點擊這裏安裝 nodejs（npm）。而後執行：css

創建一個目錄做爲項目根目錄並初始化：html

mkdir react-webpack
cd react-webpack/
npm init

安裝相關組件node

這裏包括了本文所須要的所有組件react

npm i --save-dev react react-dom react-transform-hmr webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015 babel-plugin-react-transform css-loader style-loader less less-loader react-transform-catch-errors redbox-react --registry=https://registry.npm.taobao.org

下面簡單說明上述組件功能webpack

react: react基礎組件
react-dom: react 操做 DOM 組件
react-transform-hmr: hot module reloading 爲熱替換依賴插件
webpack: webpack 基礎組件
webpack-dev-server: webpack 服務器組件
babel-core: babel 核心組件
babel-loader: 轉碼工具
babel-preset-react: 支持 react 轉碼
babel-preset-es2015: 支持 ES6 轉碼
babel-plugin-react-transform: 實現 babel 熱替換
css-loader: 對 css 文件進行打包
style-loader: 將樣式添加進 DOM 中
less: less 語法支持
less-loader: 對 less 文件進行打包
react-transform-catch-errors: 將錯誤顯示在瀏覽器中
redbox-react: 渲染插件，配合上一個使用顯示錯誤

hello world

創建以下目錄結構(圖中不包括 node_modules 目錄，實際項目中必須保留，下同)web

其中 webpack.config.js 內容以下shell

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval-source-map',   //開啓 soursemap
  entry: path.resolve(__dirname, './src/index.js'),  //指定入口
  output: {      //設置輸出路徑
    path: path.resolve(__dirname, './build'),
    filename: "index.js"
  },
  module: {    //設置 babel 模塊
    loaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: "babel-loader"
    }]
  },
  plugins: [    //加載插件
    new webpack.HotModuleReplacementPlugin() //熱模塊替換插件
  ]
};

其中 .babelrc 內容以下：npm

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

其中 src/index.js 內容以下：json

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello World</h1>,
  document.getElementById('root')
);

其中 build/index.html 內容以下：瀏覽器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>demo</title>
</head>
<body>
  <div id="root"></div>
</body>
<script src="index.js"></script>
</html>

修改 package.json 中的 scripts 部分以下：

"scripts": {
  "build": "webpack"
}

然後運行 'npm run build' 運行在本地 './build/index.html' 看到渲染的頁面

服務器環境配置

修改或添加 webpack.config.js 中如下部分：

entry: ['webpack/hot/dev-server', path.resolve(__dirname, './src/index.js')],  //指定入口
devServer: {   //配置本地服務器
  contentBase: './build',
  colors: true,
  historyApiFallback: true,
  inline: false,
  port: 4444,
  process: true
}

修改 package.json 中的 scripts 部分以下：

"scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server"
}

然後運行 'npm run dev' 運行在本地 'http://localhost:4444/' 看到渲染的頁面


## 配置 css 和 less

在 ./src/ 中添加 index.less 和 font.css，分別寫入如下內容測試功能

/ index.less /
h1 {
background-color: red;
}
/ font.css /
h1 {
color: yellow;
}

修改 webpack.config.js 部分：

module: { //設置 babel 模塊
loaders: [{

test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"

},{

test: /\.css$/,
loader: 'style-loader!css-loader'

},{

test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'

}]
}

修改 src/index.js 以下：

import React from 'react';
import ReactDOM from 'react-dom';
import './font.css';
import './index.less';

ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('root')
);

而後重啓運行(因爲修改了 webpack.config.js，不能使用熱替換)頁面能夠看到相關樣式

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。