基于webpack环境下的react项目

react-demo创建过程

准备

• npm init -y
• npm install --save-dev webpack
• npm install --save-dev webpack-cli
• npm install react -S
• npm install react-dom -S
• npm install eslint --save-dev

安装相关loader

• npm install style-loader --save-dev
• npm install --save-dev css-loader
• npm install sass-loader node-sass webpack --save-dev
• npm install @babel/core -D
• npm install @babel/preset-env -D
• npm install @babel/preset-react -D
• npm install babel-loader -D
• npm install --save-dev file-loader
• npm install eslint-loader --save-dev

安装相关插件

• npm install --save-dev html-webpack-plugin

热更新

• npm install --save-dev webpack webpack-dev-server

方法一 只是用于开发环境的 全局安装以后才可以直接在命令行使用webpack-dev-server

-npm i webpack-hot-middleware --save-dev

方法二 用于方法一不生效时使用，通常使用方法一就可以解决热更新问题

import React from 'react'
import ReactDOM from 'react-dom'

import App from './App.js'

ReactDOM.render(<App />, document.getElementById('app'))
// 热更新方法二在main.js(入口文件的设置)
if (module.hot) {
  // App.js作用：当做页面渲染的主页面替代main.js页面来渲染页面
  module.hot.accept('./App.js', function() {
    console.log('文件发生了变化')
    var NewApp = require('./App.js').default
    ReactDOM.render(<NewApp />, document.getElementById('app'))
  })
}

生产环境和开发环境的动态切换

• npm install --save-dev cross-env

package.json文件中的配置

//1.根目录下创建webpack.config.js
//2.package.json文件中进行修改
//3.生产环境和开发环境的动态切换  cross-env NODE_ENV=
 "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "serve": "cross-env NODE_ENV=development webpack-dev-server",
    "start": "npm run serve"

配置完热更新后的启动命令行 webpack-dev-server --open
正式启动项目运行 npm start

.babelrc文件中的配置

{
  "presets": ["@babel/preset-react"]
}

.eslintrc.json文件中的配置

{
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "semi": 0
  }
}

webpack.config.js的基本配置

var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
// var webpack = require('webpack') //  热更新方法二使用需要

// 使用 cross-env 动态设置进程的环境变量
var env = process.env.NODE_ENV

// 默认是生产环境打包 env=production
var config = {
  mode: 'production',
  // 自定义入口文件
  entry: path.join(__dirname, './src/main.js'),
  // 输出
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  resolve: {
    // 别名
    alias: {
      // 配置绝对路径
      '@': path.resolve(__dirname, './src')
    }
  },
  plugins: [
    /**
     * new HtmlWebpackPlugin()
     * 默认设置则自动生成的HTML页面没有设计移动端时需要的meta的配置，
     * 因此不建议使用
     */
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './public/index.html')
    })
  ],
  module: {
    rules: [
      // css规则
      {
        test: /\.(css|scss)$/,
        use: [
          // 这三个loader顺序，是固定的
          { loader: 'style-loader'}, // 将 JS 字符串生成为 style 节点
          { loader: 'css-loader'},  // 将 CSS 转化成 CommonJS 模块
          { loader: 'sass-loader'}  // // 将 Sass 编译成 CSS
        ]
      },
      // js规则
      {
        test: /\.(js|jsx)/,
        exclude: /node_modules/,
        use: [
          { loader: 'babel-loader' }
        ]
      },
      // 图片规则
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          { loader: 'file-loader'}
        ]
      }
    ]
  }
}

// 开发环境运行 env=development
if (env==='development') {
  config.mode = 'development'
  config.output = {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './public')
  }
  // 本地服务器和热更新   热更新方法一
  config.devServer = {
    // 自定义端口号
    port: '8080',
    contentBase: path.join(__dirname, './public'),
    hot: true
  }
  // 代码格式规则
  config.module.rules.push({
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    // 前置处理
    enforce: 'pre',
    use: [
      { loader: 'eslint-loader' }
    ]
  })

  // 添加一个热更新插件，表示开启devServer中的热更新功能 HMR  热更新方法二
  // config.plugins.push(new webpack.HotModuleReplacementPlugin())
}

// CommonJS模块
module.exports = config


        


        

喜欢的话就请给我一些鼓励，让我有动力坚持更新，对于您的支持感激不尽