使用webpack搭建react环境

最新推荐文章于 2023-02-08 22:41:36 发布

Dilomen

最新推荐文章于 2023-02-08 22:41:36 发布

阅读量322

点赞数

分类专栏： react 文章标签： react webpack

本文链接：https://blog.csdn.net/Dilomen/article/details/89423234

版权

react 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

webpack

8 篇文章 0 订阅

订阅专栏

tip:虽然官方提供了create-react-app的方式来创建react项目，但是还是想用用webpack来搭建下，当然create-react-app也是建立在webpack上的，可以使用npm run eject来调取webpack的配置文件

首先创建一个空文件夹，然后通过npm init初始化得到一个package.json文件

如果不想一个个安装依赖包，直接复制以下的代码到package.json文件中，当然像sass这些非必须的依赖包也可以删除，然后通过npm install来安装所需的依赖包

"scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
}, 
"devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^2.1.1",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1"
 },
 "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
 }

如果按分类来安装

webpack:

npm install webpack webpack-cli webpack-dev-server --save--dev

babel: 用来将ES6代码转化为ES5，babel-core

npm install babel-core babel-loader@7 babel-preset-env babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save--dev

webpack会使用的插件：

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

css一些loader：

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

react：

npm install react react-dom --save

安装完所有的依赖包后，在根文件下创建一个.babelrc文件，作为babel的配置文件，内容为：

{
    "presets": [
        "stage-0",
        "react",
        "es2015"
    ]
}

创建一个index.html，创建一个自定义id的div元素，该id必须和后面的react中的对应

<!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">
</head>
<body>
    <div id="root"></div>
</body>
</html>

创建一个src，作为项目开发的文件夹，在里面创建一个index.js，Hello.jsx，style.sass

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello'
ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

// Hello.jsx
import React, {Component} from 'react'
import './style.sass'
class Hello extends Component {
    render () {
        return (
            <p>Hello World</p>   
        )
    }
}
export default Hello

// style.sass
p
  font-size: 30px
  color: red

创建一个webpack.config.js作为webpack的配置文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const Webpack = require('webpack')
module.exports = {
    entry: ['webpack/hot/dev-server', path.resolve(__dirname, './src/index.js')],
    output: {
        path: path.resolve(__dirname, './build'),
        filename: '[hash:8].js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    devServer: {
        contentBase: './build',
        host: "127.0.0.1",
        port: '3001',
        inline: true
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: '我的网站',
            filename: 'index.html',
            template: './index.html'
        }),
        new Webpack.HotModuleReplacementPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.sass$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
}