webpack手动搭建简单react项目

最新推荐文章于 2024-08-27 16:06:51 发布

衣乌安、

最新推荐文章于 2024-08-27 16:06:51 发布

阅读量714

点赞数

分类专栏： React webpack踩坑文章标签： webpack react

随意转载，但请注明出处。倘若略有收获，望不吝点赞

本文链接：https://blog.csdn.net/zsy_snake/article/details/88027215

版权

React 同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

webpack踩坑

22 篇文章 0 订阅

订阅专栏

(简单流程，仅供参考，一切以实际需求为准)

环境准备

node、npm、webpack4+

npm基本使用命令

项目创建

创建目录初始化

首先创建项目文件夹并进入，使用npm init初始化，然后一溜回车就好，执行完后项目文件夹中会多一个package.json文件。这是项目的核心文件，包含包依赖管理和脚本任务。
```
$ mkdir webpack-react 

$ cd webpack-react 

$ npm init
```
安装webpack、react、react-dom

–save为生成环境所需，-dev为开发环境所需
```
$ npm install webpack --save-dev

$ npm install react react-dom --save
```
*如果使用webpack4+还需要安装webpack-cli
```
$ npm install --save-dev webpack-cli
```
package.json文件中
devDependencies对象中的内容即为项目安装的开发环境依赖
dependencies对象中的内容即为项目安装的生产环境依赖

项目目录及源码

-- webpack-react
    |---- node_modules 依赖包
    |---- src
            |---- index.js
            |---- index.html
    |---- webpack.config.js  webpack配置文件
    |---- package.json
    |---- .babelrc  babel配置文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo</title>
</head>
<body>
    <div id="root">

    </div>
</body>
</html>

insex.js

import ReactDOM from 'react-dom';
import React from 'react';

ReactDOM.render(
    <div>
        <h1>the first webpack react demo</h1>
    </div>,
    document.getElementById('root')
)

webpack.config.js

const webpack = require('webpack');
const path = require('path');

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index'),
    output: {
        filename: 'js/[name].[hash:6].js',
        publicPath: '/',
        chunkFilename: 'js/[name].[chunkhash:8].js',
        path: path.resolve(__dirname, 'happy')
    },

}

安装配置babel

因为我们使用了react，react为jsx语法不能直接被浏览器识别，因此需要使用babel库进行转码
(注意babel-loader和babel-core版本存在相互要求，bael-core版本使用为6的话babel-loader要用7，bael-core版本使用为7的话babel-loader要用8，否则报错,建议指定版本安装)
```
$ npm install babel-loader babel-core babel-preset-env babel-preset-stage-0 babel-preset-react  --save-dev
```
- babel-loader babel加载器
- babel-core
- babel-preset-env 转换 ES2015+
- babel-preset-react jsx转js
- babel-preset-stage-0 所有使用 stage 0 (或更高)阶段的代码必备的插件
.babelrc

（presets数组解析过程为倒序）
```
{
"presets": [
        "env",
        "react",
        "stage-0"
    ]
}
```

HtmlWebpackPlugin

$ npm install html-webpack-plugin --save-dev

可参考HtmlWebpackPlugin用法总结

webpack.config.js

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

module.exports = {
    + plugins: [
    +    new HtmlWebpackPlugin({
    +        template: path.join(__dirname, 'src/index.html'),
    +        title: 'demo',
    +        inject: 'body',
    +        minify: {
    +            minifyCSS: true,
    +            removeComments: true,
    +            collapseWhitespace: true
    +        }
    +    })
    + ]
}

搭建前端服务器

安装前面配置，一个最最基础的react项目已经完成，可以搭建一个前端服务器来启动了。
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载

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

新建webpack.config.dev.js编写开发环境配置

安装webpack-merge，可用于将webpack.config.js中配置对象和webpack.config.dev.js中配置对象合并成一个新的配置对象

$ npm install webpack-merge --save-dev

webpack.config.dev.js

const path = require('path');
const webpack = require('webpack');
const webapckMerge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.config');

module.exports = webapckMerge(webpackBaseConfig,{
    mode: 'development',    //设置模式，否则会包warring，对应process.env.NODE_ENV值
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),//告诉服务器从哪里提供内容
        host: '0.0.0.0',
        port: 8081,
        open: true,     //是否自动打开浏览器
    }
})

更多配置详见webpack文档
package.json中编写npm script启动脚本

{
    "scripts": {
        "dev": "webpack-dev-server --config webpack.config.dev.js"
    }
}

以上一个最最简单的项目创建完成，然鹅距实际开发所需还相差甚远

项目配置

使用es6，7，8+新特性或方法

babel-plugin-transform-runtime提供了一些低版本es标准对高级特性的实现,但不会污染全局变量

$ npm install --save-dev babel-plugin-transform-runtime

$ npm install --save babel-runtime

(注意babel-runtime为生成环境依赖)

.babelrc

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

    + "plugins": [ "transform-runtime" ] 
}

使用css和scss

安装loader：

$ npm install css-loader style-loader sass-loader node-sass --save-dev

webpack.config.js

module: {
    rules: [
        //添加处理scss loader
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,  //开启模块化
                        localIdentName: '[name]-[local]-[hash:base64:5]',   //默认为[hash:base64]
                    }
                },
                {
                    loader: 'sass-loader'
                }
            ]
        },
        //添加处理css loader
        {
            test: /\.css$/,
            use: [
                {
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader'
                }
            ]
        },
    ]
},

使用图片、svg、iconfont等资源

安装url-loader用于将文件转换为base64 URI

$ npm install url-loader --save-dev

webpack.config.js

module: {
    rules: [
        {
            test: /\.(png|jpg|gif|svg(\?v=\d+\.\d+\.\d+)?|woff|eot|ttf)$/,
            use: ['url-loader']
        }
    ]
}

导入json文件

安装json-loader

$ npm install json-loader --save-dev

webpack.config.js

module: {
    rules: [
        {
            test: /\.json$/,
            use: ['json-loader']
        }
    ]
}

衣乌安、

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

webpack手动搭建简单react项目

环境准备

项目创建

创建目录初始化

安装webpack、react、react-dom

项目目录及源码

安装配置babel

HtmlWebpackPlugin

搭建前端服务器

项目配置

使用es6，7，8+新特性或方法

使用css和scss

使用图片、svg、iconfont等资源

导入json文件