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
喜欢的话就请给我一些鼓励,让我有动力坚持更新,对于您的支持感激不尽