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

Posted 月亮出来了

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack搭建react项目工程化开发的配置说明,入门级别相关的知识,希望对你有一定的参考价值。

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移除掉
        },
    }
}

 

以上是关于webpack搭建react项目工程化开发的配置说明,入门级别的主要内容,如果未能解决你的问题,请参考以下文章

React全家桶——项目注意工程搭建

react+webpack基础学习配置

react開發環境搭建

第641期基于 webpack 搭建前端工程基础篇

基于webpack的React项目搭建

利用yeoman快速搭建React+webpack+es6脚手架