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

运行 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了

扫描二维码关注公众号，回复： 2188205 查看本文章

在index.html添加如下

<div id="test1"></div>

在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

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

猜你喜欢