react学习小结

1. 创建项目目录 （新建一个项目文件夹）用vscode打开，点击终端输入 npm init -y 快速初始化项目

npm init -y

2.在项目根目录新建src源码目录，新建dist产品目录
3.使用淘宝镜像安装（速度快一点）注意肯恩工会报错不是别命令的情况，安装到g全局即可

cnpm i webpack@4.1.1 -D
cnpm i webpack-cli -D
//cnpm install webpack@4.1.1 webpack-cli –g

4.创建webpack.config.js
5.实时编译运行，npm run dev后你将会看到项目运行的url+端口

cnpm i webpack-dev-server -D
npm run dev //编译运行

6.配置文件在packjson.js中的"scripts": {}标签中添加配置

 "dev":"webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"

7.在webpack.config.js中配置实现@代表路径

const path = require("path")
const HtmlWebPAckPlugin = require('html-webpack-plugin')

8.创建一个插件的实例

//创建一个插件的实例:
const htmlPlugin= new HtmlWebPAckPlugin({
   template:path.join(__dirname,'./src/index.html'),
   filename:'index.html'
})

9.jsx转js（第三方-babel编译器)的安装

cnpm i react react-dom -S  
cnpm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -D

10.在webpack.config.js中配置第三方规则

 module: {//所有第三方模块的配置规则
        rules: [//第三方匹配规则
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
        ]
    }

11.新建.babelrc文件配置

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

12.完整的webpack.config.js文件

const path = require("path")
const HtmlWebPAckPlugin = require('html-webpack-plugin')

//创建一个插件的实例
const htmlPlugin = new HtmlWebPAckPlugin({
    template: path.join(__dirname, './src/index.html')
    ,
    filename: 'index.html'
})
module.exports = {
    mode: 'development',//development开发模式不会压缩代码，production
    plugins: [
        htmlPlugin
    ],
    module: {//所有第三方模块的配置规则
        rules: [//第三方匹配规则
            { test: /\.js|jsx$/, use: 'babel-loader'/* 多个的时候写成数组 */, exclude: /node_modules/ },
            { test: /\.css$/, use: ['style-loader', 'css-loader?modules'] },
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'],
        alias: {
            '@': path.join(__dirname, "./src")//表示项目木根目录下的src
        }
    }
}

13引入css样式，安装第三方支持（样式）注意：1、版本，2、会有字体错误需要安装url-loader

cnpm i style-loader css-loader -D
cnpm i bootstrap@3.3.7 -S

cnpm i url-loader -D
cnpm i file-loader -D

14.在webpack.config.js中加

{test : /\.ttf|woff|woff2|eot|svg$/,use:'url-loader'},

15.在项目中启用模块化，第三方不启用（bootstrap）
     1.把自己的样式表定义为.scss文件
     2.第三方的样式表，还是以.css结尾
     3.我们只需要为自己的.scss文件，启用模块化即可
     4.运行cnpm i sass-loader node-sass -D 安装能够解析scss文件的loader 

cnpm i sass-loader node-sass -D

     5.在webpack.config.js中配置loader 
        将css样式中？后面的参数部分以及？一起删除
        {test:/\.scss$,use:['style-loader','css-loader?modules&localIndentName=[path][name]-[local]-[hash:5]','sass-loader']}