ES6项目（一）项目搭建（webpack、babel、react）

最新推荐文章于 2023-02-03 22:21:42 发布

零度-0C

最新推荐文章于 2023-02-03 22:21:42 发布

阅读量236

点赞数

分类专栏： ES6 react webpack

本文链接：https://blog.csdn.net/muer_123/article/details/89922480

版权

ES6 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

webpack

2 篇文章 0 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

0. 前言

a）webpack打包
b）动态编译（webpack-dev-server）
c）支持es6（babel-loader）
d）支持react（react）

1. 初始化并新建项目

mkdir demo && cd demo
npm init

2. 安装webpack、webpack-cli

npm install webpack webpack-cli --save-dev

启动命令：

webpack

3. 新建webpack.config.js

module.exports = {
  entry:  __dirname + "/src/index.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/lib",//打包后的文件存放的地方
    filename: "index.js"//打包后输出文件的文件名
  }
}

4. 安装webpack-dev-server

npm install --save-dev webpack-dev-server

启动命令：

webpack-dev-server --open

配置webpack.config.js


module.exports = {
  entry:  __dirname + "/src/index.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/lib",//打包后的文件存放的地方
    filename: "index.js"//打包后输出文件的文件名
  },
  devtool: 'eval-source-map',
  devServer: {
    contentBase: "./lib",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    proxy: {    //配置代理
      '/neo4j': {
        target: 'http://127.0.0.1:8080/',
        secure: false
      }
    }
  }
}

5. 安装并配置babel-loader（babel-loader@7）

npm install --save-dev babel-loader babel-core babel-cli
npm install --save-dev babel-preset-env babel-preset-es2015 babel-preset-react babel-preset-stage-0

配置.babelrc

{
  "presets": [
    "react", "es2015", "env", "stage-0"
  ]
}

配置webpack.config.js


module.exports = {
  entry:  __dirname + "/src/index.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/lib",//打包后的文件存放的地方
    filename: "index.js"//打包后输出文件的文件名
  },
  devtool: 'eval-source-map',
  devServer: {
    contentBase: "./lib",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  },
  module: {
    rules: [
      {
        test: /(\.jsx|\.js)$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

6. 安装react

npm install --save-dev react react-dom

7. package.json文件

{
  "name": "smallminsmap",
  "version": "1.0.0",
  "description": "",
  "main": "lib/index.js",
  "scripts": {
    "build": "webpack",
    "server": "webpack-dev-server --open",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@antv/g6": "^2.2.6",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "d3": "^5.9.2",
    "jquery": "^3.4.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {}
}

8. /src/index.js文件（示例）

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';

render(<Greeter />, document.getElementById('root'));

Greater.js文件

import React, {Component} from 'react'

class Greeter extends Component{
  render() {
    return (
      <div>
        Hi there and greetings!
      </div>
    );
  }
}

export default Greeter

index.html文件

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="index.js"></script>
  </body>
</html>

零度-0C

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES6项目（一）项目搭建（webpack、babel、react）

0. 前言a）webpack打包b）动态编译（webpack-dev-server）c）支持es6（babel-loader）d）支持react（react）1. 初始化并新建项目mkdir demo && cd demonpm init2. 安装webpack、webpack-clinpm install webpack webpack-cli ...
复制链接

扫一扫

专栏目录