webpack项目环境的搭建和react的简单封装

搭建的环境

首先查看node.js是不是10以上

node -v

项目搭建

第一步 ：新建一个文件夹 为 react-stack
第二步： 在文件夹里面打开命令行 输入一下的指令

npm install -y  生成 package.json文件

//安装webpack 项目依赖和全局都要安装
cnpm install webpack -g
cnpm install webpack-cli -g

cnpm install webpack -D
cnpm install webpack-cli -D

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

1 设置入口文件:entry选项
2 设置出口:output选项
代码如下：

const path = require('path')
const webpack = require('webpack')
module.exports = {
    mode: 'production',
    // 入口:指定webpack打包或本地服务运行时的程序入口文件
    // entry: './src/main.js'
    entry: path.resolve(__dirname, './src/main.js'),
    // 出口:打包之后,打包的结果放在哪里 dist
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
  }  

在package.json文件里配置打包文件

"build": "webpack --config webpack.config.js",

打包命令: webpack --config xxx.config.js

使用pulgins

1、html-webpack-plugin
它的作用是自动生成一个index.html单页面，并且把打包后.js脚本文件插入进去。

安装命令

  cnpm install html-webpack-plugin -D

在webpack.config.js 配置

 // plugins:用于扩展功能
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './public/index.html'),
            title: 'react'
        }),
        new CleanWebpackPlugin(),
        // 用于热更新功能
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],

2、clean-webpack-plugin
它的作用是自动删除目录中的dist文件夹，无需手动操作了

搭建devServer

安装命令

cnpm install webpack-dev-server -D
cnpm install webpack-dev-server -g

在webpack.config.js 配置

    devServer: {
        port: '8090',
        open: true,
        contentBase: path.resolve(__dirname, 'public'),
        hot: true  // 开启热更新功能
    }

开启HMR热更新功能

HMR的作用是：局部代码发生变化时，不用刷新整个页面（重新编译）即可自动更新，速度比较快。
1.在devServer中添加 hot：true
2，引入webpack模块 添加插件

使用css和scss

安装命令

cnpm install style-loader -D
cnpm install css-loader -D
cnpm istall sass-loader -D
cnpm install node-sass -D

在webpack.config.js 配置

module:{
        rules:[
            {test:/\.(css|scss)$/, use:['style-loader','css-loader','sass-loader']}

        ]
    },

在安装node-sass的时候很容易安装不上 当你第二次安装的时候安装上了 运行的时候可能会报错，这时候你只要把node_modules的依赖包删除重新 安装这样就可以解决的

使用JSBabel

JS编译器，把ES6(下一代ECMAScript)转化成浏览器能够兼容的ES5代码
安装命令：

cnpm install babel-loder -D
cnpm install @babel/core -D

配置

rules: [
    {test:/\.js$/, use:['babel-loader'], exclude: /node_modules/}
]

使用ESLint

ESLint地址
安装

cnpm install eslint-loader -D
cnpm install eslint -D

配置

rules: [
{test:/\.js$/, use:['eslint-loder',], exclude:/node_modules/, enforce:'pre'}
]

ExtractTextWebpackPlugin
注意：要求git仓库中去找

安装

cnpm install mini-css-extract-plugin -D

插件地址

配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],

新建一个.exlintrc.json的文件

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
//在rules里面可以设置禁止使用的代码
    "rules": {
    }
}

生产环境和开发环境的分布

安装插件

cnom install cross-env -D

插件地址

在package.json里面配置cross-nev NODE_ENV=production

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "serve": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",
  }
}

production: 生产环境
development:开发环境
根据cross-env NODE_ENV=production 来区别开发环境和生产环境

react组件的分装

第一步：先安装Babel插件
插件的地址

cnpm install @babel/preset-react -D 支持jsx语法的babel插件
cnpm install @babel/preset-env -D  支持ES6中较新的语法

第二步：创建.baberlrc.json的文件配置

{
    "presets": [
      ["@babel/preset-react"],
      ["@babel/preset-env",{"useBuiltIns": "entry"}]
    ]
  }

第三步：封装组件

//引入react
import React from 'react'

//定义react的根组件
export defulat class App extends React.component{
      constructor(props){
            super(props)
           }
         render (){
            return (
             <div>
             <h1> 你好！ </h1>
             </div>
            )
          }  
}

第四步：把封装好的组件渲染到真实的DOM上

//引入
 import React from 'react'
 import ReactDOM from 'react-dom'
 ReactDOM.render(< App  /> , document.getElementById('root'))

注意：在index.html 里的 root这个div 里不能有任何的子元素，给个空div就可以了