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

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

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

3. 安装必要得依赖

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"
  }

2. 在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>

2. 新增一个index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import App from '@/components/App';

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

3. 新建一个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，代码已经全部上传，建议按照教程来一遍，有什么不懂再参考。