反応-デモの作成プロセス
レディ
- 海抜の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
それと同じように、私にいくつかの励ましを与えるので、私は更新を遵守するインセンティブを持って、ご支援に感謝して下さい