The react-webpack-cli from yaunfei

`webpack`搭建`react`

1. 步骤：

初始化项目
安装webpack及webpack-cli，配置webpack.config.js，（考虑生产和测试环境下的配置js）。
对html、js、css文件操作操作。使用插件和loader完成。
引入typescript、react。
使用eslint、prettier。
使用别名、省略扩展名和devServer

2. 实现

1. 初始化项目

npm init

将生成的package.json文件的"main": "index.js" 值改为"private": true

2. 安装`webpack`及`webpack-cli`，配置`webpack.config.js`

这里使用yarn

yarn add webpack webpack-cli -D

创建src文件夹，创建一个测试index.js（用于测试wepack的配置，后面会删除，改为tsx）

const temporary = () => {
  console.log('test react webpack cli');
};

temporary();

创建config文件夹，在分别创建webpack.config.js、webpack.dev.config.js、webpack.pro.config.js（这里要先安装webpack-merge包，命令yarn add webpack-merge -D）

基础配置在webpack.config.js

测试相关配置在webpack.dev.config.js

生产相关配置在webpack.pro.config.js

相关配置具体可查看🔗，代码如下:

// webpack.config.js
const path = require('path');
const { merge } = require('webpack-merge');
const devConfig = require('./webpack.dev.config.js');
const proConfig = require('./webpack.pro.config.js');

const config = {
  mode: 'production', // 模式
  entry: path.resolve(__dirname, '../src/index.js'), // 入口文件
  output: {
    filename: 'static/js/[name].[contenthash:8].js', // 输入文件名
    path: path.resolve(__dirname, '../build'), // 输入路径
    clean: true, // 清空原打包文件
  },
};

module.exports = (env, argv) => {
  // 开发环境
  if (argv.mode === 'development') {
    return merge(config, devConfig);
  }
  // 生产环境
  if (argv.mode === 'production') {
    return merge(config, proConfig);
  }
};

// webpack.dev.config.js
module.exports = {
  mode: 'development',
  devtool: 'cheap-module-source-map',
};

// webpack.pro.config.js
module.exports = {
  mode: 'production',
  devtool: 'source-map',
};

配置package.json的script脚本

{
  "scripts": {
    "build:dev": "webpack --config ./config/webpack.config.js --mode=development",
    "build:pro": "webpack --config ./config/webpack.config.js --mode=production",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

执行yarn build:dev和yarn build:pro分别对应测试打包和生产打包

3. 对`html、js、css`文件操作操作。使用插件和`loader`

将js引入到html文件，使用html-webpack-plugin插件 🔗.

创建public文件夹，新建index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="react-lowcode-manage" />
    <title>react-webpack-cli</title>
  </head>
  <body>
    <noscript>运行该应用，需要启动浏览器对 JavaScript 的支持</noscript>
    <div id="root"></div>
  </body>
</html>

使用插件yarn add html-webpack-plugin -D，在webpack.config.js中加上插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
		// 将js引入html
		new HtmlWebpackPlugin({
			template: path.resolve(__dirname, '../public/index.html'), // 输入index.html
			favicon: path.resolve(__dirname, '../public/favicon.ico'), // favicon图标
		}),
  ]

使用less，然后对css进行打包、分离、压缩

安装less

yarn add css-loader less less-loader -D

less-loader 将 less 文件转换成 css， css-loader 加载 css 文件。
打包、分离css，使用mini-css-extract-plugin插件，将css文件单独打包

yarn add mini-css-extract-plugin -D
压缩css，使用css-minimizer-webpack-plugin

yarn add css-minimizer-webpack-plugin -D
添加浏览器前缀，使用postcss-loader插件

yarn add postcss-loader autoprefixer -D
统一起来：

yarn add css-loader less less-loader mini-css-extract-plugin css-minimizer-webpack-plugin postcss-loader autoprefixer -D

webpack.config.js配置如下：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');

module: {
		rules: [
			// 使用 less
			{
				test: /\.less$/i,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: [require('autoprefixer')],
							},
						},
					},
					'less-loader',
				],
			},
		],
	},
  plugins: [
    // 提取css
		new MiniCssExtractPlugin({
			filename: 'static/css/[name].[contenthash:8].css',
		}),
  ],
  optimization: {
		minimizer: [
			new CssMinimizerWebpackPlugin(), // 压缩css
		],
	},

使用label，将es6转为es5

安装babel

yarn add babel-loader @babel/preset-env @babel/core -D

module: {
  rules: [
    {
      test: /\.(js|mjs|jsx|ts|tsx)$/i,
      include: path.resolve(__dirname, '../src'),
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        },
      },
    },
  ];
}

4. 引入`typescript`、`react`

安装初始化typescript

yarn add typescript ts-loader -D

初始化npx tsc --init生产tsconfig.json

module: {
  rules: [
    // 使用ts
    {
      test: /\.ts$/i,
      use: ['ts-loader'],
    },
  ];
}

tsconfig.json配置如下：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

安装react，配置 babel 解析 react

yarn add react react-dom

使用声明文件：yarn add @types/react @types/react-dom -D

使用babel转义react 文件：yarn add @babel/polyfill @babel/preset-react -D

module: {
  rules: [
    {
      test: /\.(js|mjs|jsx|ts|tsx)$/i,
      include: path.resolve(__dirname, '../src'),
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
        },
      },
    },
  ];
}

ps：记得将webpack.config.js的入口文件改为对应的文件

5. 使用`eslint、prettier`

安装prettier格式化代码

yarn add --dev --exact prettier

创建.prettierrc文件

{
  "tabWidth": 2,
  "useTabs": true,
  "singleQuote": true,
  "semi": true
}

创建.vscode的settings.son，实现代码代码保存自动格式化

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.formatOnSave": true // 保存自动格式化
}

安装eslint实现代码语法检查
1. 这里使用的是eslint-config-react-app实现相关配置，减少的一些配置。
2. 使用eslint-config-prettier剔除eslint自带的代码格式化，避免冲突。
yarn add eslint eslint-config-prettier eslint-config-react-app -D

在package.json中加上，配置eslint
```
"eslintConfig": {
		"extends": [
			"react-app",
			"prettier"
		]
	}
```

6. 使用别名、省略扩展名和`devServer`

alias别名，在webpack.config.js配置即可

resolve: {
		// 使用别名
		alias: {
			'@': path.resolve(__dirname, '../src'),
		},
		// 使用扩展名
		extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
	},

测试环境使用devServer

安装 yarn add webpack-dev-server -D
在webpack.dev.config.js配置

	devServer: {
		host: '0.0.0.0',
		port: '3000',
		hot: true,
		open: true,
	},

package.json中配置script

"scripts": {
		"dev": "webpack serve --config ./config/webpack.config.js --mode=development",
	}

3. 具体配置

具体配置地址如下：[email protected]:yaunfei/react-webpack-cli.git

yaunfei / react-webpack-cli Goto Github PK

react-webpack-cli's Introduction

`webpack`搭建`react`

1. 步骤：

2. 实现

1. 初始化项目

2. 安装`webpack`及`webpack-cli`，配置`webpack.config.js`

3. 对`html、js、css`文件操作操作。使用插件和`loader`

4. 引入`typescript`、`react`

5. 使用`eslint、prettier`

6. 使用别名、省略扩展名和`devServer`

3. 具体配置

react-webpack-cli's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

yaunfei / react-webpack-cli Goto Github PK

react-webpack-cli's Introduction

webpack搭建react

1. 步骤：

2. 实现

1. 初始化项目

2. 安装webpack及webpack-cli， 配置webpack.config.js

3. 对html、js、css文件操作操作。使用插件和loader

4. 引入typescript、react

5. 使用eslint、prettier

6. 使用别名、省略扩展名和devServer

3. 具体配置

react-webpack-cli's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

`webpack`搭建`react`

2. 安装`webpack`及`webpack-cli`，配置`webpack.config.js`

3. 对`html、js、css`文件操作操作。使用插件和`loader`

4. 引入`typescript`、`react`

5. 使用`eslint、prettier`

6. 使用别名、省略扩展名和`devServer`