WebPACKの環境下での反応ベースのプロジェクト

反応-デモの作成プロセス

レディ

• 海抜のinit
• NPM --save-devのWebPACKのインストール
• NPM --save-devのWebPACKの-CLIをインストール
• NPM -Sを反応インストール
• NPMインストール反応し、DOM -S
• NPM eslint --save-devのインストール

インストール関連ローダー

• NPMスタイル・ローダー--save-devのインストール
• NPM --save-devのCSSのローダーをインストール
• NPMインストールSASS-ローダーノード-SASSのWebPACK --save-devの
• NPMバベル/コア@インストール-D
• NPMインストール@バベル/プリセット-ENV -D
• NPM @バベル/プリセット反応インストール-D
• NPMバベル・ローダーをインストール-D
• NPM --save-devのファイル・ローダーをインストール
• NPM eslintローダ--save-devのインストール

関連するプラグインをインストールします。

• NPM --save-devのHTML-WebPACKの-プラグインをインストール

ホットアップデート

• NPM --save-devのWebPACKのWebPACKの-devのサーバーをインストールします

この方法は、唯一の直接インストール後にグローバルな開発のためのコマンドラインのWebPACK-devのサーバー環境を使用することができます

私のWebPACKホットミドルウェア--save-devの-npm

この方法のために有効になりません。第二の方法を使用する場合、一般的に使用される方法は、ホット・アップデートの問題を解決することができます

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 --save-devのクロス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"

あなたは--openホットスタートコマンドラインのWebPACK-devのサーバーの後にアップデートを設定したら
、NPMスタートを実行している公式のプロジェクト開始

.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


        


        

それと同じように、私にいくつかの励ましを与えるので、私は更新を遵守するインセンティブを持って、ご支援に感謝して下さい