- 初始化项目
- 安装
webpack
及webpack-cli
,配置webpack.config.js
,(考虑生产和测试环境下的配置js
)。 - 对
html、js、css
文件操作操作。使用插件和loader
完成。 - 引入
typescript
、react
。 - 使用
eslint、prettier
。 - 使用别名、省略扩展名和
devServer
npm init
- 将生成的
package.json
文件的"main": "index.js"
值改为"private": true
- 这里使用
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
分别对应测试打包和生产打包
-
将
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'], }, }, }, ]; }
-
-
安装初始化
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
的入口文件改为对应的文件
-
安装
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
实现代码语法检查- 这里使用的是
eslint-config-react-app
实现相关配置,减少的一些配置。 - 使用
eslint-config-prettier
剔除eslint
自带的代码格式化,避免冲突。
yarn add eslint eslint-config-prettier eslint-config-react-app -D
在
package.json
中加上,配置eslint
"eslintConfig": { "extends": [ "react-app", "prettier" ] }
- 这里使用的是
-
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", }
-
具体配置地址如下:[email protected]:yaunfei/react-webpack-cli.git