从零搭建React webpack环境

future_love
171 阅读4分钟

第一步（webpack准备）

  • 在桌面创建一个文件夹，文件夹名字（exercise）
  • 在文件夹下面创建两个文件夹，文件夹名字（app、public）
  • app文件夹用来存放原始数据和自己写的代码，public用来存放之后供浏览器读取的文件
  • app下面创建两个js文件（文件名字：main.js，home.js）、public下面创建一个html文件

第二步

  • 在终端exercise下执行npm init -y回车
  • 在执行npm install --save-dev webpack回车
  • 下面结构（由于用的VScode文件夹名字变成大写了）

第三步（给文件里面填内容）

  • 1）给html、js文件里面写点东西
  • 2）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>Document</title>
</head>
<body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
</body>
</html>
  • 3）home:
module.exports = function () {
    var textEditor = document.createElement('div');
    textEditor.textContent = "Welcome to webpack scaffolding!";
    return textEditor;
};
  • 4）main:
const textEditor = require('./home.js');
document.querySelector("#root").appendChild(textEditor());
  • 5）在终端执行node_modules/.bin/webpack app/main.js public/bundle.js如图
    按y回车后，如图
    下面有个错误不用管，如图

第四步（创建一个webpack配置的文件）

  • 再在根目录下创建一个webpack.config.js文件，这个js里面代码：
module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    }
}
  • 在终端执行node_modules/.bin/webpack，如图

说明成功了

第五步（实现npm命令）

  • 使用npm之类的命令
  • 在package.json中对"scripts"里面添加一个"start": "webpack"再在终端执行npm start命令，如图
  • 如果是中小型项目那么在webpack.config.js文件里面添加，如下：
module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    }
}

第六步（提供一个本地开发服务器）

  • webpack提供了本地开发服务器，有利于开发
  • 终端命令npm install --save-dev webpack-dev-server
  • 在webpack配置文件里面再做修改
module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 
}
  • 还要对package文件"scripts"下面添加这一句"server": "webpack-dev-server --open"在终端执行npm run server就默认跑了本地的8080端口，在页面显示了，如图

上面就搞定了一个简单的webpack配置，下面就是loader上场了还有其他

第七步（loader配置）

  • 我们把那句话放到一个json文件里面，在app下面创建一个config.json文件
{
    "textEditorText": "Welcome to webpack scaffolding!"
}
  • home文件也要修改
var config = require('./config.json');
module.exports = function () {
    var textEditor = document.createElement('div');
    textEditor.textContent = config.textEditorText;
    return textEditor;
};

第八步（bable配置）

  • 安装npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
  • webpack配置文件要发生改变
module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}
  • 会报一个错误，如图

这个错误是因为原来 babel-loader版本为8.0.0 不符合修改为7.1.5在终端执行这行代码npm install babel-loader@7.1.5就不会报错了，页面也可以显示内容了。

第九步（安装react）

  • 执行npm install --save react react-dom命令
  • home文件需要修改
import React, { Component } from 'react'
import config from './config.json';
class Home extends Component {
    render() {
        return (
            <div>
                {config.textEditorText}
            </div>
        );
    }
}
export default Home
  • main文件也要修改
import React from 'react';
import {render} from 'react-dom';
import Home from './home';

render(<Home />, document.getElementById('root'));
  • webpack配置修改
module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "bundle.js"//打包后输出文件的文件名
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }
        ]
    }
};
  • 考虑到bable配置太多，所以把bable单独提取出来放到一个文件名为.babelrc里面（.babelrc代码）
{
  "presets": ["react", "env"]
}

第十步（css处理）

  • 安装npm install --save-dev style-loader css-loader
  • webpack配置更新
module.exports = {

   ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定启用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                        }
                    }
                ]
            }
        ]
    }
};
  • 这里会报一个错误，如图：
  • 需要把css预处理一下

第十一步（css预处理）

  • 安装npm install --save-dev postcss-loader autoprefixer
  • webpack更新
module.exports = {
    ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    }
}
  • 引入css那么就需要写css文件，在app下面创建main.css和home.css文件
  • main文件代码
body{
    background:red;
}
  • 需要把main.css导入main.js文件下
import React from 'react';
import { render } from 'react-dom';
import Home from './home';
import './main.css';//导入css
render(<Home />, document.getElementById('root'));
  • 页面就发生改变了，如图：
  • 给home.js里面添加css样式
.root {
  background-color: #ccc;
  padding: 10px;
  border: 3px solid #000;
}
  • 在home.js里面引入css样式（因为react用的是claaName）
import React, { Component } from 'react'
import config from './config.json';
import styles from './home.css'
class Home extends Component {
    render() {
        return (
            <div className={styles.root}>
                {config.textEditorText}
            </div>
        );
    }
}
export default Home
  • 在webpack配置文件中添加postcss-loader，在根目录新建一个文件postcss.config.js，你写的css会自动根据Can i use里面的数据添加不同的前缀
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
  • 最后运行npm run server命令最终得到的页面，如图：
avatar
文章
阅读
粉丝