使用webpack4.8搭建React的整个完整开发环境

绝地灬酷狼 2022-05-24 08:51 210阅读 0赞

首先在在你的项目中搭建如下目录  
![项目目录][70]

运行 npm init -y 生成package.json

全局安装如下脚本  
cnpm i webpack webpack -g  
cnpm i webpack webpack-cli -g  
webpack4.0后,已经将webpack命令从webpack中分离出来,需要安装webpack-cli  
在index.js写一些js  
在webpack.config.js配置打包的mode如下,webpack4.0的最大特性是约定大于配置,少很多配置,这和java的springboot框架理念类似,这也是框架发展的趋势

module.exports={
        //不配置默认为 'production'
        mode:'development'
    }

使用webpack 打包生成dist的main.js  
在index.js 引入main.js

在index.html打开你的浏览器,可以看到webpack基本使用完毕

接下来配置react了 先解释一下npm的指令  
\-S就是–save的简写，就行npm默认一个start的字段，你可以不必输入npm run start 而只需输入npm start，这两个效果是一样的。  
\-D就是–save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而–save会将包的名称及版本号放在dependencies里面。  
运行脚本  
cnpm i react react-dom -S

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm i babel-preset-react -D

创建,babelrc文件  
添加.babelrc的配置

{
      "presets": ["env", "stage-0", "react"],
      "plugins": ["transform-runtime"] }

在webpack.config.js配置如下

module.exports={
        //不配置默认为 'production'
        mode:'development',
        module: { //要打包的第三方模块
            rules: [
                { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
            ]
        }
    }

这时候你就可以使用react的虚拟DOM了

在index.html添加如下

在index.js添加

var vdom= <h1> React </h1>
    ReactDOM.render(vdom,document.getElementById("test1"));

执行webpack指令打包,打开浏览器,可见,配置完毕

总是执行webpack打包有点麻烦 于是添加webpack-dev-server  
运行cnpm i webpack-dev-server -g  
在package.json下添加配置”dev”

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
    },

运行 npm run dev  
可以看到webpack-server已经启动,保存立马更新并打开窗口

接下来配置样式  
运行如下脚本,添加引入的css样式的  
cnpm i style-loader css-loader -D  
运行如下脚本,添加自定义的sass模块化样式  
cnpm i sass-loader node-sass -D

我们需要引入如bootstrap的样式在全局都生效,而我们自定义的样式只在引入有效,并且不希望其通过组件的传递,使得关联的组件的样式都生效,故需要使用模块化,为了区分,建议自定义的样式使用scss后缀

在webpack.config.js配置如下

const path = require('path')
    module.exports = {
      mode: 'development', // development production
      // 在 webpack 4.x 中，有一个很大的特性，就是 约定大于配置 约定，默认的打包入口路径是 src -> index.js
      module: { 
        rules: [ 
          { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千万别忘记添加 exclude 排除项
          { test: /\.css$/, use: ['style-loader', 'css-loader']}, 
          { test: /\.ttf|woff|woff2|eot|svg$/, use: 'url-loader' }, 
          //
          { test: /\.scss$/, use: ['style-loader', 'css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]', 'sass-loader'] }
        ]
      },
      resolve: {
        extensions: ['.js', '.jsx', '.json'], 
        alias: { 
          '@': path.join(__dirname, './src') // 这样，@ 就表示 项目根目录中 src 的这一层路径
        }
      }
    }

最后,我们想要为我们传递的props引入类型限制  
运行如下脚本  
cnpm i prop-types -S

[70]: /images/20220524/90146b759c1e44b8bc93d5e005f2a9c5.png