Webpack搭建React项目-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37105660/article/details/117470314

Webpack搭建React项目

先创建一个myapp的文件夹，然后运行cmd

第一步安装模块

初始化，生成package.json

npm init -y

安装react模块
我这选择的版本是 16.13.1

#安装react
npm install react@16.13.1 --save
#安装react-dom
cnpm install react-dom@16.13.1 --save

安装webpack工具

#安装webpack和webpack-cli
npm install webpack webpack-cli --save-dev

安装babel相关

#安装babel和react相关加载器
npm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D

安装css加载器

npm i css-loader style-loader -D

安装html插件

npm i html-webpack-plugin -D

生产环境和开发环境

开发环境：–save-dev / -D

生产环境：–save / -S

第二步创建目录结构

构建一个简易的目录
在这里插入图片描述
myapp

public 静态资源文件目录

src 项目源文件目录

dist 打包文件目录

webpack.config.js webpack配置文件

package.json NPM包管理配置文件

node_modules 项目中的依赖存放目录

在public目录下，创建index.html，该文件为项目的默认首页

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>Hello React</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

src/index.js文件是项目的入口文件，内容如下：

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';

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

src/App.js文件是自定义组件，内容如下：

import React from 'react';

function App () {
	return (
		<div>
			React from Webpack
		</div>
	);
};
export default App;

到此，我们项目的目录结构就搭建完成了。
接下来我们需要去配置一下 webpack.config.js
这里我们主要用的依赖有2个

1 path
2 html-webpack-plugin

在webpack.config,js 中去添加基础配置

webpack配置采用commonJS规范，通过module.export导出一个描述如何构建的 Object 对象。

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

module.exports={
    entry:{},     //入口配置*
    output:{},    //出口配置*
    resolve:{},   //引用配置*
    modules:{},   //module.rules loader
    plugins:[],   //插件
    devServer:{}   //开发服务器
}

首先是 entry，我们需要添加一下入口配置

module.exports = {
    entry: './src/index.js',  //添加入口配置项
    // ...
};

下来是 output 出口文件

 output: {
	    path: path.resolve(__dirname, 'dist'), 		//这里显示 打包后 文件夹名称
	    filename: 'main.js' 	//  这是打包后 js 名称
    },
  // ...

下来是 resolve 配置

    resolve: {
        extensions: ['.js', '.json'],   // 改变引入文件， 可以可以不写后缀名
        alias:{							// 配置 import 相对路径引入的文件or图片
            '@': '/src/assets' 
            // ...
        }
    },

接下来我们需要去配置一下 modules 模块，这里主要是配置一下 rules
这里我只配置了转译模块 babel-loader

rules: [
            {
                test: /\.jsx?$/, // jsx/js文件的正则
                exclude: /node_modules/, // 排除 node_modules 文件夹
                use: {
                    // loader 是 babel
                    loader: 'babel-loader',
                    options: {
                        // babel 转义的配置选项
                        babelrc: false,
                        presets: [
                            // 添加 preset-react
                            require.resolve('@babel/preset-react'),
                            [require.resolve('@babel/preset-env'), {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                }
            }
        ]

下来是 plugins 插件的配置
这里我也只配置一种 html-webpack-plugin

    plugins: [
        new HtmlWebPackPlugin({
            template: 'public/index.html',
            filename: 'index.html',
            inject: true
        })
    ]

到这里我们就可以去 package.config.js 里面去添加 build 命令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },

此时执行

npm run build

如图上所示，我们已经打包成功了

但是我们一般需要看到页面内容来确认自己页面 and 逻辑
这个时候我们就需要在本地起一下服务来展示我们的页面
这里需要一个新的依赖 webpack-dev-server

npm i -D webpack-dev-server

然后我们在 webpack.config.js 的 devServer 来配置

const webpack = require('webpack');
devServer:{
        hot: true,                 //开启模块热替换
        contentBase: './dist',     //将dist目录下的文件，作为额外可访问文件
        host: '0.0.0.0',           //DevServer 服务监听的地址，默认是localhost。当需要同个局域网可访问你的服务时，可设成0.0.0.0
        port: 3000,                //DevServer 服务监听的端口，默认8080
        https: false,              //是否使用HTTPS服务
        open: true                 //自动打开网页，地址是host:port
},

只有在通过 DevServer 去启动 Webpack 时配置文件里 devServer 才会生效，因为这些参数所对应的功能都是 DevServer 提供的，Webpack 本身并不认识 devServer 配置项。

再去 package.js 配置一下启动命令

  //...
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  // ...