React项目的webpack配置(基础通用版)

  • 时间:2020-11-08 02:16 作者:虚拟J 来源: 阅读:96
  • 扫一扫,手机访问
摘要:一个合格的前台开发者必需夯实基础,深入地了解所使用的技术,而不是浮于表面,保持“够用就行”的技术认知。Vue CLI 或者者 create react app 这样高度集成的 CLI 工具,目的是降低开发者的使用成本,但由于这种“黑盒工具”大多数采用的都是通用的配置,而优秀的开发人员应该学会“因地制宜

一个合格的前台开发者必需夯实基础,深入地了解所使用的技术,而不是浮于表面,保持“够用就行”的技术认知。
Vue CLI 或者者 create-react-app 这样高度集成的 CLI 工具,目的是降低开发者的使用成本,但由于这种“黑盒工具”大多数采用的都是通用的配置,而优秀的开发人员应该学会“因地制宜”,根据实际情况更灵活地去使用每一个工具。

下面是我认为是React项目的基础版 webpack 配置(配置了打包过程优化、资源代码分块、Tree-shaking 等这类功能),像less,sass这些因人而异的 loader 就没有进行引入配置(所以叫基础版,可以因人而异往上加)

假如想要理解熟习webpack,最好的方式就是自己动手按照指南上走一遍(提示:wbpack中文文档中的指南有些内容过时了,观看最新内容可以到英文官网),而后把概念过一遍。

公用基本配置的功能:
  • 预解决css,图片,字体
  • 配置babel来转义 jsx 和 es6 语法
  • 自动生成 HTML 文件

webpack.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    entry: './src/index.js',    module: {        rules: [            {                test: /\.css$/,                use: ['style-loader', 'css-loader']            },            {                test: /\.(png|svg|jpg|gif)$/,                use: ['file-loader']            },            {                test: /\.(woff|woff2|eot|ttf|otf)$/,                use: ['file-loader']            },            {                test: /\.js$/,                exclude: /(node_modules|bower_components)/,                use: {                    loader: 'babel-loader',                    options: {                        presets: ['@babel/preset-env', '@babel/preset-react']                    }                }            },        ]    },    plugins: [        new HtmlWebpackPlugin({ template: './public/index.ejs' }) //就是把你的html后缀改成ejs就好了    ],};
开发环境配置的功能:
  • 一个简单的开发服务器
  • 启动模块热替换(Hot Module Replacement)
  • 源代码错误定位

webpack.dev.js

const merge = require('webpack-merge');const common = require('./webpack.common.js');const webpack = require('webpack');module.exports = merge(common, {    devtool: 'eval-source-map',    devServer: {        hot: true    },    plugins: [        new webpack.HotModuleReplacementPlugin(),    ],    mode: 'development'});
生产环境配置的功能:
  • 编译构建前清空 /dist 文件夹
  • 压缩代码,删除未引用代码(tree shaking)
  • 启用 library 针对客户环境进行的代码优化
  • 编译hash值文件(处理浏览器缓存问题)
  • 代码拆分,提取公用代码

webpack.prod.js

const path = require('path');const merge = require('webpack-merge');const common = require('./webpack.common.js');const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = merge(common, {    output: {        filename: '[name].[chunkhash].js',        path: path.resolve(__dirname, 'dist')    },    optimization: {        splitChunks: {            cacheGroups: {                vendor: {                    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,                    name: 'vendor',                    chunks: 'all',                }            }        }    },    plugins: [        new CleanWebpackPlugin(),    ],    mode: 'production',});
package.json

上面用的少量 npm 包和 scripts 的设置

{  //......  "dependencies": {  //......    "@babel/core": "^7.10.2",    "@babel/preset-env": "^7.10.2",    "babel-loader": "^8.0.0-beta.0",    "lodash": "^4.17.15",    "webpack": "^4.43.0"  },  "devDependencies": {  //......    "@babel/preset-react": "^7.10.1",    "clean-webpack-plugin": "^3.0.0",    "css-loader": "^3.4.2",    "file-loader": "^6.0.0",    "html-webpack-plugin": "^4.3.0",    "style-loader": "^1.1.3",    "webpack-cli": "^3.3.11",    "webpack-dev-server": "^3.11.0",    "webpack-merge": "^4.2.2"  },  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start": "webpack-dev-server --open --config webpack.dev.js",    "build": "webpack --config webpack.prod.js"  },  //......}
  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
手机二维码手机访问领取大礼包
返回顶部