webpack+react開發環境搭建

時間 2019-12-13

標籤 webpack+react webpack react 開發環境搭建欄目 React 简体版

原文原文鏈接

1、安裝Node.js

Node.js能夠直接從官網下載，按照默認的安裝方式安裝便可。css

2、安裝webpack

Webpack能夠使用npm安裝，新建一個空的練習文件夾，在終端中轉到該文件夾後執行下述指令就能夠完成安裝。html

//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack

3、安裝webpack-dev-server

//全局安裝
npm install -g webpack-dev-server
//安裝到你的項目目錄
npm install --save-dev webpack-dev-server

4、生成package.json文件

//生成初始的package.json文件
npm init -y

在項目文件夾中新建兩個文件夾：app和build,分別存放着main.js和index.html
node

//package.json
{
  "name": "tic-tac-toe",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",//把npm的build命令指向webpack命令
    "start": "webpack-dev-server --inline --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

//index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hacker News Front Page</title>
</head>

<body>
<div id="root"></div>
<script src="http://localhost:8080/bundle.js"></script>//注意src屬性
</body>

</html>

5、新建webpack.config.js文件

在項目目錄下新建一個webpack.config.js文件，內容以下：react

module.exports = {
  entry:  __dirname + "/app/main.js",//已屢次說起的惟一入口文件
  output: {
    path: __dirname + "/build",//打包後的文件存放的地方
    filename: "bundle.js"//打包後輸出文件的文件名
  }
}

6、Loaders

1.JSON

//安裝能夠裝換JSON的loader
npm install --save-dev json-loader

2.Babel

// npm一次性安裝多個依賴模塊，模塊之間用空格隔開
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

3.react

npm install --save react react-dom

4.css

//安裝
npm install --save-dev style-loader css-loader

最終的webpack.config.js文件：webpack

//webpack.config.js

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015','react']
        }
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'//添加對樣式表的處理
      }
    ]
  },

  devServer: {...}
}