手动用webpack-chain 搭建移动端react环境
Posted 我是真的不会前端
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手动用webpack-chain 搭建移动端react环境相关的知识,希望对你有一定的参考价值。
项目介绍
一个移动端web-app项目 基于webpack-chain(vue2.0的打包工具)
webpack-chain介绍
一个可以链式调用的webpack配置
webpack-config.js配置
const merge = require('webpack-merge')
const common = require('./config/common.js')
const dev = require('./config/dev')
module.exports = env => merge(common, dev)
通过webpack-merge合并生产模式和开发模式
配置入口出口
config
// 修改 entry 配置
.entry('index')
.add(resolve('src/index.js'))
.end()
// 修改 output 配置
.output
.path(resolve('dist'))
.filename('[name].bundle.js')
.end()
移动端postcss.config.js设置
module.exports =
plugins:
// 'autoprefixer':
// browsers: ['android >= 4.0', 'ios >= 7']
// ,
'postcss-pxtorem':
rootValue: 37.5,
unitPrecision: 3,
propList: ['*'],
exclude: '/node_modules'
配置html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
config.plugin('html')
.use(HtmlWebpackPlugin, [
template: resolve('public/index.html'),
filename: resolve('dist/index.html'),
minify: true,
inject: 'body',
scriptLoading: 'blocking'
])
配置其他plugin
new webpack.ProgressPlugin()
config.plugin('html')
.use(HtmlWebpackPlugin, [
template: resolve('public/index.html'),
filename: resolve('dist/index.html'),
minify: true,
inject: 'body',
scriptLoading: 'blocking'
]);
config
.plugin('progress')
.use(ProgressBar)
// 配置css-loader
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
config.plugin('MiniCssExtractPlugin')
.use(MiniCssExtractPlugin);
服务器配置
config.devServer
.port(8791)
.open(true)
.hot(true)
别名配置
config.resolve.alias
.set('@', resolve('src'))
配置css/sass的loader
// 配置css-loader
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
config.plugin('MiniCssExtractPlugin')
.use(MiniCssExtractPlugin);
config.module
.rule('css')
.test(/\\.(sc|c)ss$/)
.use('extract-css-loader')
.loader(MiniCssExtractPlugin.loader)
.options(
publicPath: './'
)
.end()
.use('css-loader')
.loader('css-loader')
.options()
.end()
.use('sass-loader')
.loader('sass-loader')
.options()
配置文件loader
config.module
.rule()
.rule('file')
.test(/\\.(jpg|png|gif|jpeg|svg)$/i)
.include
.add(resolve('src'))
.end()
.use('url-loader')
.loader('url-loader')
.options(
limit: 8192
)
config.module
.rule()
.test(/\\.(png|jpg|gif|svg|svg)$/i)
.type('asset/resource')
引入babel,支持react语法
// 配置babel,支持jsx语法
config.module
.rule('babel')
.test(/\\.(js|jsx)$/i)
.include
.add(resolve('src'))
.end()
.use('babel-loader')
.loader('babel-loader')
.options(
presets: [
['@babel/preset-env', modules: false ],
['@babel/preset-react',]
]
)
配置eslint检查
config.module
.rule('lint')
.test(/\\.(js|jsx)$/i)
.include
.add(resolve('src'))
.end()
// 还可以创建具名use (loaders)
.use('eslint')
.loader('eslint-loader')
.options(
rules:
semi: 'off'
)
.end()
配置eslintrc.js
module.exports =
extends: [
"eslint:recommended",
"plugin:react/recommended",
],
parser:'@babel/eslint-parser',
plugins: ["react","react-hooks"],
parserOptions:
ecmaVersion: 6,
sourceType: "module",
ecmaFeatures:
jsx: true
,
env:
es6: true,
browser: true,
node: true
,
// 自定义修改ESLint规则
rules:
//检测级别,可以不加分号
"semi": ["off","never"],
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"no-unused-vars": 0, //禁止出现未使用过的变量
"react/prop-types": 0, //防止在react组件定义中缺少props验证
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "off"
问题记录
-
初使用webpack-chain入口和出口错误,打包不了
解决:入口出口的文件位置使用绝对路径导入
-
Unsafe usage of ThrowStatement no-unsafe-finally
因为数据流的使用最终不安全
为什么报这个错误?
因为eslint中添加了"eslint:recommended"规则。
为什么添加这个规则会报错?
因为它的作用是不允许在finally语句块中出现 -
出现react:Warning: componentWillMount has been renamed警告
更新react版本 -
出现regeneratorRuntime is not defined报错
问题原因:因为babel包对es6以后的语法转义函数出现问题 导致函数未定义
解决方案:
方法1:
并且在对应的webpack配置中添加插件
// webpack.config.js
entry: '',
output: ,
module:
rules: [
test: /\\.js$/,
use: // 使用到的loader
loader: 'babel-loader',
options:
presets: [],
plugins: [
'@babel/plugin-transform-runtime'
]
]
方法二:
安装包
npm i @babel/plugin-transform-runtime -D
(2)使用包
.babelrc 增加以下👇配置
"plugins": [
["@babel/plugin-transform-runtime", "regenerator": true ]
]
最后附上完整需要的包名
"name": "react-webpack-chain-h5-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts":
"test": "echo \\"Error: no test specified\\" && exit 1",
"build": "webpack --config build/build.js",
"start": "webpack serve --config build/dev.js"
,
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies":
"@babel/plugin-transform-runtime": "^7.15.0",
"babel-plugin-import": "^1.13.3",
"babel-polyfill": "^6.26.0",
"postcss": "^8.3.6",
"postcss-loader": "^6.1.1",
"postcss-pxtorem": "^6.0.0",
"url-loader": "^4.1.1",
"webpack-chain": "^6.5.1",
"webpack-cli": "^4.8.0"
,
"dependencies":
"@babel/core": "7.14.6",
"@babel/eslint-parser": "^7.15.0",
"@babel/preset-env": "7.14.7",
"@babel/preset-react": "^7.14.5",
"@reduxjs/toolkit": "^1.6.1",
"antd-mobile": "^2.3.4",
"axios": "^0.21.1",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"eslint": "^7.32.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-react": "^7.25.1",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.2.2",
"mockjs": "^1.1.0",
"progress-bar-webpack-plugin": "^2.1.0",
"progress-webpack-plugin": "^1.0.12",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-cache-route": "^1.11.1",
"react-router-dom": "^5.2.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"sass": "^1.39.0",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"webpack": "5.46.0",
"webpack-dev-server": "^4.1.0"
以上是关于手动用webpack-chain 搭建移动端react环境的主要内容,如果未能解决你的问题,请参考以下文章
Maven - 如何脱离 IDEA 工具,手动用命令去打包?
Maven - 如何脱离 IDEA 工具,手动用命令去打包?