webpack+babel+ES6+react環境搭建

時間 2019-11-20

標籤 webpack+babel+es6+react webpack babel react 環境搭建欄目 React 简体版

原文原文鏈接

webpack+babel+ES6+react環境搭建

步驟：

1 建立項目結構

注意: 先建立一個項目目錄 react 這個名字自定義，而後進入到這個目錄下面

mkdir  app    //建立app目錄 用來存放項目源文件
mkdir  dist   // 建立dist目錄  用來存放打包好的文件
touch  .gitignore  //建立.gitignore  用來添加git 忽略的文件
touch   webpack.config.js   //建立webpack的配置文件
cd  app    //進入到app目錄  
touch  index.js  //在app目錄中建立 index文件  入口文件
mkdir  component  //建立componet目錄 用來裝組件

2 初始化項目

npm init -y

作完上面兩步，獲得項目目錄爲：

3 安裝webpack

npm install webpack --save

注意：安裝完成之後，項目目錄下會生成一個node_modules的文件夾用來存放npm包

4 打開webpack.config.js 文件並添加配置項目

module.exports = {
　　context:__dirname+"/app", //源文件目錄
　　entry:{
　　　　app:"./index.js" //在源文件目錄下去找index.js 文件做爲打包的入口文件
　　},
　　output:{
　　　　path:__dirname+"/dist", //生成的文件存放目錄
　　　　filename:"[name].bundle.js" //生成的文件 name 表示entry下面的app
　　}
}

5 讓npm 能夠運行 webpack --在package.json 文件中添加一條命令

{
  "name": "react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"./node_modules/.bin/webpack"   //這條命令是新增長的
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "webpack": "^2.2.1"
  }
}

注意：添加完成後就能夠經過 npm run dev 來打包編譯 js文件

6 在dist目錄下面新建index.html 文件，而且引入打包好的js文件

index.html 文件內容：

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<metacharset="UTF-8">
　　<title>首頁</title>
　　</head>
　　<body>
　　</body>
　　<scriptsrc="app.bundle.js"></script>
</html>

index.js文件內容：

doucment.write("hello world!!!!")

執行npm run dev 命令後會在dist目錄下面生成一個 app.bundle.js 的文件運行index.html 文件查看效果

6 經過babel來使用es6

安裝相關loader

npm install babel-loader babel-core babel-preset-es2015 --save

修改webpack.config.js 配置文件，添加規則

module.exports = {
    context:__dirname+"/app",
    entry:{
        app:"./index.js"
    },
    output:{
        path:__dirname+"/dist",
        filename:"[name].bundle.js"
    },
    module:{
        rules:[
            {
                test:/\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: { presets: ["react","es2015"] }
                }],
            },
        
        ]
    }
}

7 添加react支持

npm install react react-dom babel-preset-react --save

注意：這裏有坑：安裝的時候報錯，最大的問題是由於咱們項目名稱叫作 react 在package.json文件中有個name屬性值爲react 只須要把這個react值改爲其餘的就能夠安裝上了

修改 app下面 index.js 文件

import React from 'react';
import ReactDOM from 'react-dom';
class IndexComponent extends React.Component{
    render(){
        return <h1>hello world!!!</h1>
    }
}
var oBox = document.getElementById("box");
ReactDOM.render(<IndexComponent/>,oBox)

npm run dev 而後運行 index.html 文件查看效果javascript

修改dist下面 index.html文件

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
<title>首頁</title>
</head>
<body>
    <divid="box"></div>
</body>
<scriptsrc="app.bundle.js"></script>
</html>

8 添加樣式支持

安裝css-loader 和 style-loader

npm install css-loader style-loader --save

修改配置webpack.config.js 配置文件

module.exports = {
    context:__dirname+"/app",
    entry:{
        app:"./index.js"
    },
    output:{
        path:__dirname+"/dist",
        filename:"[name].bundle.js"
    },
    module:{
        rules:[
            {
                test:/\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: { presets: ["react","es2015"] }
                }],
            },
            {   //這裏的內容是新增長的對樣式的支持
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
        ]
    }
}

修改 index.js 文件

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './css/index.css'; //這裏內容屬於新增長的
class IndexComponent extends React.Component{
    render(){
        return <h1>hello world!!!</h1>
    }
}
var oBox = document.getElementById("box")
ReactDOM.render(<IndexComponent/>,oBox)

在app目錄下新建css目錄，在css目錄下新建 index.css 文件

h1{
color: green;
}

npm run dev 編譯而後運行 dist目錄下index.html 文件查看效果

9 添加web服務器支持

安裝 webpack-dev-server

npm install webpack-dev-server --save

修改package.json文件

把：

"dev": "./node_modules/.bin/webpack"

修改成：

"dev": "./node_modules/.bin/webpack-dev-server --content-base dist"

npm run dev 而後在瀏覽器輸入 http://loaclhost:8080 查看效果

相關標籤/搜索

每日一句

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

webpack+babel+ES6+react環境搭建