手动用webpack-chain 搭建移动端react环境

Posted 2021-09-19 我是真的不会前端

项目介绍

一个移动端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"
  }
}