webpack+babel+react

時間 2019-12-19

標籤 webpack+babel+react webpack babel react 欄目 React 简体版

原文原文鏈接

參考文章，轉載自：https://blog.csdn.net/weixin_38017243/article/details/83009907javascript

一：配置webpackhtml

1.建立文件夾java

npm init 　　//生成package.json文件node

2.安裝webpack：react

npm install webpack --savewebpack

打開webpack.config.js文件，添加：web

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

在package.json文件添加指令：npm

{
  "name": "webpack_babel_react",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "./node_modules/.bin/webpack"  //新添加
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.30.0"
  }
}

3.dist文件夾下新建index.html，寫入代碼：json

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

4.app文件夾下新建index.js,寫入：服務器

document.write("hello world!!!!");

5.執行npm run dev

選擇YES　　//webpack在第四版本將webpack-cli分開了

運行完生成app.bundle.js文件

二：和babel結合

1.安裝插件：babel-loader,babel-core,babel-preset;

//babel-loader和babel-core有組合要求。babel-preset-es2015官方不提倡使用，而使用最新的babel-preset-env

npm install babel-core

npm install babel-loader@7

npm install babel-preset-env

即 yarn add babel-core babel-loader@7 babel-preset-env

2.在webpack.config.js文件夾添加代碼

 module:{
        rules:[
            {
                test:/\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: { presets: ["react","env"] }
                }],
            },
         
        ]
    }

三：添加react支持

1.添加包：react react-dom babel-preset-react

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

即 yarn add react react-dom babel-preset-react

2.更改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);

3.修改dist文件下的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>首頁</title>
  </head>
  <body>
    <div id="box"></div>
  </body>
  <script src="app.bundle.js"></script>
</html>

運行npm run dev 或yarn run dev

四：添加web服務器支持

1.安裝webpack-dev-server　

npm install webpack-dev-server --save

2.修改package.json

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

yarn run dev

打開網頁: http://localhost:8080/

筆記：

1. app.bundle.js文件是該命令運行後結果生成的

"build-main": "./node_modules/.bin/webpack", //把它放在package.json的scripts裏面

打包生成後，網頁指向了它，一打開網頁就有數據了。

更多相關文章...

相關標籤/搜索

React

每日一句

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