React 个人笔记

环境

node.js v10+

windows 64bit

学习

Webpack: node.js环境的打包工具

学习目标

1.构建打包环境

2.构建开发环境

3.四个核心概念：

入口：指定webpack打包或本地服务运行时的程序入口文件

出口：打包之后，打包的结果放在 某个文件夹  dist

loaders：用于对代码中各种文件进行编译转换，目标是转换成浏览器能够识别的代码

plugins：用于扩展功能

webpack 起步

新建react-stack

初始化环境 ：

    npm init -y 生成package.json文件

安装webpack：

cnpm install webpack -g

cnpm install webpack-cli -g

cnpm install webpack -D

cnpm install webpack-cli -D

开始模拟搭建脚手架内环境

在文件夹内创建src文件夹、public 在src里创建一个main.js（入口文件）

创建webpack的配置文件， webpack.config.js（在使用webpack时，会自动调用改文件打包）

// webpack是基于node.js环境
const path = require('path')

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')
    }
    // loaders:用于对代码中各种文件进行编译转换,目标是转换浏览器能够识别的代码
    // plugins:用于扩展功能
}

设置入口文件：entry选项

设置出口：output选项

打包

完成配置后，在项目根目录执行webpack xxxx代表webpack的配置文件名

执行 webpack --config xxxx.js

执行后若报错 则在导出模块上加一个mode键值对 mode:‘production’

重新全局安装

cnpm install webpack -g

cnpm install webpack-cli -g

在执行 webpack --config xxxx.js

会在目录下生成一个dist文件夹

在package.json 里的scripts加上 build指令

“build”: “webpack --config react.config.js”

以后打包时 直接执行 npm run build

plugins

1.html-webpack-plugin

安装：cnpm install html-webpack-plugin -D

作用：自动生成一个index.html单页面，并且把打包后.js脚本文件插入进去

plugins: [
    new HtmlWebpackPlugin({
        template: 'html模板文件',
        title: 'nihao'
    })
]

在index的title里将<%= htmlWebpackPlugin.options.title %>插入

2.clean-webpack-plugin

安装：cnpm install clean-webpack-plugin -D

作用：自动删除目录中的dist文件夹，无需手动操作了

搭建derServer

安装

cnpm install webpack-dev-server -g

cnpm install webpack-dev-server -D

devServer: {
    port: '8090', //设置端口号
    open: true, //自动打开
    contentBase: path.resolve(__dirname, 'public')//当前目录下指向的静态资源目录
    hot: true //开启热更新
}

启动本地服务

webpack-dev-server --config react.config.js

开启HMR热更新功能

HMR的作用是：局部代码发生变化时，不用刷新整个页面（重新编译）即可自动更新，速度比较快。

1.在devServer中，添加’ hot: true //开启热更新 ’

2.引入 webpack 模块 ，添加两个plugin插件

使用sacc/css

安装：

cnpm install style-loader -D

cnpm install css-loader -D

cnpm install sass-loader -D

cnpm install node-sass -D

配置文件里添加module

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

sass 安装极易出错，如果一次安装不成功，直接删掉node_modules包，cnpm install 重新安装所有包

如果一次安装成功，但是报错的话，请检查单词有无拼写错误！！！

将css样式抽离出来放在单独的css文件里

使用的是webpack4版本

安装：

cnpm install mini-css-extract-plugin -D

引入 const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)

<!-- plugins：[new MiniCssExtractPlugin()]

rules :[

    文档内有

] -->

使用JS

Babel，js编辑器，把ES6 转化成浏览器能兼容的ES5代码

安装

cnpm install babel-loader -D

cnpm install @babel/core -D

rules: [
    {test:/\.js$/, use:['babel-loader'], exclude: /node_modules/}
]
exclude：不支持
<!-- 只编译自己写的js -->

在配置文件里加上
// 当代码报错时，可以帮我定位到源码位置
  config.devtool = 'inline-source-map'

ESLint

ESLint,用于规范JS代码，保持特定的风格，便于协同开发。

安装

cnpm install eslint-loader -D

cnpm install eslint -D

在module 的 rules中添加

 {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'eslint-loader',
    enforce:'pre', //前置检测
    options: {
    //   eslint options (if necessary)
    },
},

手动建立一个ESlint的配置文件， .eslintrc.json

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType":