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

朱雀 2022-01-15 00:47 862阅读 0赞

## 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]

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

## 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 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]

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

> npm start

当然,前提是没有错误,看到`Compiled successfully.`就对了.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]  
可以看到，项目其实是以我们前面在`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`终止批处理即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]

## 开源项目 ##

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

[create-react-app_react]: https://zhengkai.blog.csdn.net/article/details/91970581
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20220114/a79771d64cd64420a2c60a07106ae69e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: /images/20220114/a06007a087cd46f6b8489ab1964c4ca3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aGVuZ2thaS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: /images/20220114/d89e08234d5f4e37b9f95b8796278dd5.png
[https_github.com_moshowgame_react-study]: https://github.com/moshowgame/react-study