webpack搭建react项目工程化开发的配置说明，入门级别
2021-03-19 07:23
标签：sdn scss bundle rod oca article fallback resolve 多个 4.23 --我现在使用的现成的框架已经相对完美了，为了加深理解，自己想搞一套本来想搭建一个最原生的react框架，但是最近开始忙活了，先给下简单的webpack配置说明给大家看看，参考。（后续有时间补上完整的项目） 说下要考虑到的需求： 前言：直到今天才深入理解了这个概念---前端工程化。局中者迷呀，可能之前都是闷声开发，没搞这些概念理论。用react项目开发了许多个，框架都是用create-react-app脚手架或者dvajs、umi2、umi3来搞的，总结一下react官方的create-react-app脚手架有一点不好，由于很多东西它都已经封装好了，而且配置文件还内置在了包里，在项目中不可见，很难受。。。好处可能是专注开发不用管这一层的东西。umi是蚂蚁金服内部诸多项目实践出来的框架，封装的很多东西都变性了，虽说简单了，但也失去了webpack“原生的本性”。 先贴上代码，配上解释，有需要可以稍微参考下，还没进入测试（许多loader需要自己用npm安装我这里不一 一说明了） webpack搭建react项目工程化开发的配置说明，入门级别 标签：sdn scss bundle rod oca article fallback resolve 多个 原文地址：https://www.cnblogs.com/seemoon/p/12762516.html
/**
*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项目工程化开发的配置说明，入门级别
文章链接：http://soscw.com/index.php/essay/66132.html