webpack搭建react项目工程化开发的配置说明，入门级别

Posted 2021-02-27 月亮出来了

4.23 --我现在使用的现成的框架已经相对完美了，为了加深理解，自己想搞一套本来想搭建一个最原生的react框架，但是最近开始忙活了，先给下简单的webpack配置说明给大家看看，参考。（后续有时间补上完整的项目）

说下要考虑到的需求：

 

1. 使用ES6语言
2. 使用React框架
3. 自动生成html
4. webpack-dev-server   //热加载
5. 加载样式（CSS、SCSS、less）
6. 加载静态资源（图片、字体）
7. 使用第三方库

前言：直到今天才深入理解了这个概念---前端工程化。局中者迷呀，可能之前都是闷声开发，没搞这些概念理论。用react项目开发了许多个，框架都是用create-react-app脚手架或者dvajs、umi2、umi3来搞的，总结一下react官方的create-react-app脚手架有一点不好，由于很多东西它都已经封装好了，而且配置文件还内置在了包里，在项目中不可见，很难受。。。好处可能是专注开发不用管这一层的东西。umi是蚂蚁金服内部诸多项目实践出来的框架，封装的很多东西都变性了，虽说简单了，但也失去了webpack“原生的本性”。

先贴上代码，配上解释，有需要可以稍微参考下，还没进入测试（许多loader需要自己用npm安装我这里不一 一说明了）

/**
 *webpack 4.43.0版本配置文件
 * webpack采用链式调用，会先从写在后面的配置往前操作每一步
 * 参考  https://blog.csdn.net/knowledge_bird/article/details/89552438
 */
const path = require("path");
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
const webpack = require(‘webpack‘);

module.exports = {
    entry: ‘./src/index.js‘,     //入口配置*
    output: {                //出口配置*
        filename: "bundle.js",
        path: path.resolve(__dirname, ‘dist‘)  //出口文件路径
    },
    module: {
        rules: [
            /**
             *将less样式转为可识别的css
             */
            {
                test: /.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // 将css转为CommonJS
                }, {
                    loader: "less-loader" // 先将less转为css
                }]
            },
            /**
             *将less样式转为可识别的css
             */
            {
                test: /.(scss|sass)$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // 将css转为CommonJS
                }, {
                    loader: "sass-loader" // 先将sass转为css
                }]
            },
            /**
             *使用babel转换语法，编译 es6/7/8、ts 和 jsx 语法
             */
            {
                test: /.(js|mjs|jsx|ts|tsx)$/,
                exclude: /(node_modules|bower_components)/,     //排除对依赖包的转换
                use: {
                    loader: ‘babel-loader‘,
                    options: {
                        presets: [‘@babel/preset-env‘]
                    }
                }
            },
            /**
             *优化图片
             */
            {
                test: /.(png|svg|jpg|gif)$/,
                use: [{
                    loader: ‘url-loader‘,
                    options: {
                        limit: 1024 * 30,         //30KB 以下的文件采用 url-loader
                        fallback: ‘file-loader‘,  //否则采用 file-loader，默认值就是 file-loader
                        outputPath: ‘images‘,     //图片输出路径，相对于output.path
                    }
                }]
            },
            /**
             *优化字体svg图标
             */
            {
                test: /.(eot|ttf|woff|svg)$/,
                use: [{
                    loader: ‘url-loader‘,
                    options: {
                        limit: 1024 * 30,         //30KB 以下的文件采用 url-loader
                        fallback: ‘file-loader‘,  //否则采用 file-loader，默认值就是 file-loader
                        outputPath: ‘fonts‘,      //字体输出路径
                    }
                }]
            },
        ]
    },
    plugins: [ //插件
        new HtmlWebpackPlugin({       //用于生成index.html文件模板
            template: ‘./src/index.html‘
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {hot: true},   //开发服务器
    mode: "production",   //在此模式下会自动开启js压缩模式
    proxy: {
        ‘/api/‘: {
            target: "http://localhost:3000", // 将URL中带有/api/test的请求代理到本地的3000端口的服务上
            pathRewrite: {‘^/api‘: ‘‘}, // 把URL中path部分的api移除掉
        },
    }
}