环境配置

1. install npm node
   https://www.npmjs.com/get-npm

2 install cnpm webpack webpack-cli 等基础工具

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install --global webpack webpack-cli

3. 初始化项目

• npm init -y # 快速初始化项目
• 在项目根目录创建 src 源代码目录和dist产品目录
• 在 src 目录下创建 index.html
• 安装 cnpm 安装 webpack cnmp install webpack webpack-cli -d 当前目录
  • 全局安装 npm install cnpm -g
• webpack 4.x 提供约定大约配置的概念, 就是约定大约配置, 默认的打包配置文件入口是 src/index.js, 输出是 dist/main.js
  目录结构:

image.png

4. webpack.config.js 配置

module.exports = {
    mode: 'development',   # development 不压缩，product 压缩 
    // 在 webpack 4.x 有一个很大的特性, 就是约定大约配置, 默认的打包配置文件入口是 index.js
}

5. react 将 index.html 生成到内存中

cnpm install html-webpack-plugin
# edit 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',
    // 在 webpack 4.x 有一个很大的特性, 就是约定大约配置, 默认的打包配置文件入口是 index.js
    plugins: [
        htmlPlugin
    ]
}

6. 在项目中使用 react

• 运行 cnpm install react react-dom
  • react: 专门用于创建组件和虚拟 DOM
  • react-dom: 专门进行 DOM 操作

7. 启用 JSX 语法
   可以在 js 中直接写 html 标记，会被 babel 转换为 react 的 API 语法

cnpm install babel-loader@7 babel-loader babel-plugin-transform-runtime -D
cnpm install babel-preset-env babel-preset-stage-0 -D
cnpm install babel-preset-react -D

添加配置文件 .babelrc

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

edit webpack.config.js

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

8. 配置实时打包编译

cnpm install -d webpack-server-dev
# edit package.json 在 script 添加
"dev": "webpack-dev-server --port 3000"

9. 配置 导入包名使用 @ 替换 '.'

# edit webpack.config.js
resolve: {
        extensions: [".js", ".jsx", ".json"], // 配置后缀名省略
        alias: {
            '@': path.join(__dirname, './src') // 配置 webpack 根目录
        }
    }