React教程之create-react-app+webpack打包运行项目(react-webpack-starter)

Why Webpack?

  • 兼容 CommonJS & AMD & ES6 模組規範
  • Bundle 效率高
  • JS 擴充語法的編譯自動化 (JSX, Coffee Script, TypeScript…)
  • 編譯 sass, less
  • 將資源 (css, img, font…) 包入 JS 內
  • JS 程式碼分散封裝
  • 可用的擴充 plugin 很多

为什么有本攻略

因为网上有很多入门的攻略,不简单易懂,导致很多时候都无法直接运行,又或者攻略版本太低,有一些包太旧不兼容等等。

create-react-app

教程基于上一篇文章 使用create-react-app构建你的第一个react应用

  • 请确保安装了正常得基础包
  • 然后找个项目目录执行create-react-app react-webpack-starter脚手架
  • 生成一个react-webpack-starter项目,并cd到项目下cd /d C:\workspace\React\react-webpack-starter
  • 删除目录下的所有html和js的demo文件,开始下文教程
    在这里插入图片描述

Install Webpack

  1. cd到项目目录下,直接安装即可,这个是安装到系统下得,供往后可以以webpack命令打包

cnpm i webpack webpack-cli -g

  1. 这个是安装到项目依赖里面去,也就是在node_mudule里面

npm i --save-dev webpack webpack-dev-server webpack-cli

  1. 安装必要得依赖

npm i --save-dev babel-core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin

以下为网上的旧版1.0得教程,已经不需要,或者说不用这么多.

cnpm install webpack-dev-server style-loader css-loader babel-loader file-loader sass-loader less-loader url-loader --save-dev

package.json

  1. 检查package里面的devDependencies,确保版本大致一样.
  "devDependencies": {
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1"
  }
  1. scripts下新增一个"start":"webpack-dev-server --mode development --open --hot""buile": "webpack --mode production"
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "buile": "webpack --mode production"
  },

webpack.config.js

再根目录新建一个webpack.config.js文件,copy以下已经优化的内容

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //by https://blog.csdn.net/moshowgame
    //当entry是个数组的时候,里面同样包含入口js文件,另外一个参数可以是用来配置webpack提供的一个静态资源服务器,webpack-dev-server。webpack-dev-server会监控项目中每一个文件的变化,实时的进行构建,并且自动刷新页面:
    //当entry是个对象的时候,我们可以将不同的文件构建成不同的文件,按需使用,比如在我的hello页面中只要\引入hello.js即可:
    entry: './src/index.js',
    //打包後生成的檔案路徑
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index_bundle.js'
    },
    //自动补全,后缀可以省略不写
    //webpack在构建包的时候会按目录的进行文件的查找,resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀:
    //onfiguration.resolve.extensions[0] should be an non-empty string.A non-empty string .请把[]中得''去掉
    resolve: {
        extensions: ['.js', '.jsx', '.css', '.scss', '.json'],
        alias: {
            //配置后可以直接用@来表示这个位置,直接应用目录下得文件,是绝对路径
            '@': path.join(__dirname, './src')
        }
    },
    //設置 eval 或 SourceMap 屬性,debug 用
    //devtool: 'cheap-module-eval-source-map',
    module: {
        rules: [
            {
                //自動編譯 JSX 或 JS 檔 (require 可載入 JSX 了)
                test: /\.(js|jsx)$/,
                use: { loader: 'babel-loader' },
                exclude: /node_modules/
            }
            //, {
            //     //自動處理 CSS 內的 url 和 @import 的路徑轉換,可以傳入 sourceMap 參數以便 debug
            //     test: /\.css$/,
            //     loader: 'style!css?sourceMap'
            // }, {
            //     //自動編譯 sass 檔成 CSS (require 可載入 sass 了),可以傳入 sourceMap 參數以便 debug
            //     test: /\.scss$/,
            //     loader: 'style!css?sourceMap!sass?sourceMap'
            // }, {
            //     //自動編譯 less 檔成 CSS (require 可載入 less 了),可以傳入 sourceMap 參數以便 debug
            //     test: /\.less$/,
            //     loader: 'style!css?sourceMap!less?sourceMap'
            // }, {
            //     //自動將圖片轉成 Data URL
            //     test: /\.(jpe?g|JPE?G|png|PNG|gif|GIF|svg|SVG|woff|woff2|eot|ttf)(\?v=\d+\.\d+\.\d+)?$/,
            //     loader: 'url?limit=1024&name=[sha512:hash:base64:7].[ext]'
            // }
        ]
    },
    plugins: [
        //https://github.com/jantimon/html-webpack-plugin
        //This will generate a file dist/index.html and autp-import index_bundle.js
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html'
        })
    ]
}

.babelrc

根目录新增一个.babelrc文件,输入以下内容

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

src目录

  1. 新增index.html文件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <p>welcome to react-world</p>
    <div id="root"></div>
  </body>
</html>

  1. 新增一个index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from '@/components/App';

ReactDOM.render(<App />, document.getElementById('root'));
  1. 新建一个components目录,并新增App.js文件
import React from 'react';

export default function App (){
    return(<div>
        <h1>My React App</h1>
    </div>)
}

运行webpack

在这里插入图片描述

double confirm目录结构正确,配置完成之后,就可以直接通过npm start进行启动了,默认地址http://localhost:8080/

npm start

当然,前提是没有错误,看到Compiled successfully.就对了.
在这里插入图片描述
可以看到,项目其实是以我们前面在package.json里面配置的webpack-dev-server --mode development --open --hot方式运行,也就是说我们运行npm start后,程序自动转换为运行webpack-dev-server --mode development --open --hot

react-webpack-starter@0.1.0 start C:\workspace\React\react-webpack-starter
 webpack-dev-server --mode development --open --hot

i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from C:\workspace\React\react-webpack-starter
i 「wdm」: wait until bundle finished: /
i 「wdm」: Hash: xxxxxxx
......
i 「wdm」: Compiled successfully.

系统会自动跳转访问http://localhost:8080/(如果没有,请手动),如果要退出,直接ctrl+c终止批处理即可。
在这里插入图片描述

开源项目

https://github.com/moshowgame/react-study
本教程作为react-study的子项目react-webpack-starter,代码已经全部上传,建议按照教程来一遍,有什么不懂再参考。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页