总是用creat-react-app，这次开始自己配置脚手架，在配置过程中也是踩了一些坑吧，给下次自己手动配置的人，做一些提醒，也是很少看见有博客会配置最新版本的脚手架。
一个最基础的配置我会全部放到最底部，如果不需要教程，直接看最下面部分，
首先，我们需要做的是下载一些需要的loader，插件等等
npm i react react-dom -S
先下载react和react-dom，这点毋庸置疑，
然后我们开始‘随心所欲’的配置，自己想咋玩咋玩！，
npm i webpack webpack-cli webpack-dev-server -D
我们直接默认安装最新版本的即可，这三应该不需要过多介绍了，没有这三也不能进行开发。
npm init -y
再初始化格式，
src放置代码
config放置webpack配置
public放置html等等东西
如图所示
如果结构和我一样，版本也一样是不会报错的，这次我们只讲webpack.dev.js里面的代码
进行初始化配置：
const {resolve}=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const EslintWebpackPlugin=require('eslint-webpack-plugin')
module.exports={
context:resolve(__dirname,'../'), //这是对应配置的地址，默认为webpack.dev.js绝对位置
//webpack对应的地址是文件所对应的位置，这个即webpack.dev.js，
//如果我配置了context，对应的位置就可以随便指向，我配置的就变成了react-config，这样
//使用时，就不需要使用../src,省略了../
entry:'./src/index.js', //入口地址，是一个绝对地址，只是因为有context，所以只需要这样
output:{ //打包文件的输出位置
path:resolve(__dirname,'../dist'),
filename:'[name].js'
},
module:{
rules:[]
},
plugins:[
],
mode:'development', //webpack.dev.js肯定是开发环境
devServer:{ //devServer配置
contentBase:resolve(__dirname,'../dist'),
open:true
}
}
然后先安装html-webpack-plugin，安装完这个就可以配合dev-server和命令启动服务器，观察代码的界面，
npm i html-webpack-plugin -D
这些版本都选择最新的版本，如果出现bug，可以去webpack官网查看标题，
然后再对应的webpack.config.js 中引入代码
const HtmlWebpackPlugin=require('html-webpack-plugin')//注意webpack采用cmj的格式
//plugins里面加入,
new HtmlWebpackPlugin({
template:'./public/index.html'
})
先配置最难的js吧，配置js肯定是配置eslint，babel，eslint在很多公司都会使用pre-commit分开代码，在git commit中检测即可，因为如果把eslint加入webpack配置会影响速度。但是create-react-app中还是使用了eslint配置，所以我也会说一下，
先来babel，react需要使用babel解析jsx（主要功能）
首先下载一些插件
npm i babel-loader @babel/core @babel/preset-react @babel/preset-env" core-js -S
@babel/core 就是babel的核心代码，没有这玩意，babel-loader也使用不了，
babel-loader也无需讲解，
@babel/preset-react 看名字也就懂了，react的babel解析
@babel/preset-env 使用过babel的人肯定知道，可以满足绝大部分js代码的解析
@babel/preset-react和@babel/preset-env是不会发生冲突的，在babel官网上我记得有句话说的很清楚。
core-js 用"useBuiltIns": "usage"和core-js，按需加载
然后开始配置
{
test:/\.(js|jsx)$/, //js和jsx都是react代码的格式
exclude: /(node_modules)/, //排除node_modules里面的
use:[{
loader:'babel-loader',
options:{
presets:[['@babel/preset-env',{
"useBuiltIns": "usage", //为了解决babel按需加载
corejs:3,
modules:false,
"targets": { //配置babel适合的浏览器版本
"chrome": "58",
"ie": "10"
}
}]
,'@babel/preset-react'
]
}
}]
}
配置eslint ，eslint和babel一样，有很多种配置方法，babel的preset实际上是plugin的总和，eslint的config是plugin的总和，
在create-react-app中使用的是eslint-config-react-app，所以我们也是用这个，
eslint以前使用eslint-loader，现在被废弃了，变得更简单，使用插件eslint-webpack-plugin
先下载
npm install --save-dev eslint-config-react-app @typescript-eslint/eslint-plugin@^4.0.0 @typescript-eslint/parser@^4.0.0 babel-eslint@^10.0.0 eslint@^7.5.0 eslint-plugin-flowtype@^5.2.0 eslint-plugin-import@^2.22.0 eslint-plugin-jsx-a11y@^6.3.1 eslint-plugin-react@^7.20.3 eslint-plugin-react-hooks@^4.0.8
npm i eslint-webpack-plugin -D
const EslintWebpackPlugin=require('eslint-webpack-plugin')
new EslintWebpackPlugin({
fix: true,
extensions: ['js', 'jsx']
})
在package.json中加入
"eslintConfig": {
"extends":"react-app"
}
这里讲一下eslint的eslint-config吧，如果你愿意自己手动配置
extends里面对应的是webpack-config-xxx，把webpack-config-xxx，一般是对plugins的总结，一般会对应下载一些plugins，我们这里的eslint-config-react-app就需要下载一些plugin，
plugins: []，里面对应eslint-plugin-xxx，把eslint-plugin省略
可以去官网看看，这里我也不多说了，
css 配置
npm i css-loader style-loader sass sass-loader dart-sass -S
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},
css还有一些插件，mini-css-exact-plugin 插件
OptimizeCSSAssetsPlugin 把css格式化，减小体积
postcss-loader css3转换成css2
postcss-preset-env 用于找到浏览器配置的browerslist
这主要是应用在生产环境，css不需要多大的介绍，因为了解一点webpack的都会，
css-loader是为了把css转为cmj形式的js，style-loader是为了使用dom，把css引入html，
sass-loader是为了把scss解析成sass，dart-loader下载是因为sass-loader里面用到了它。
图片，对html里面的img，background里面的图片，其他文件的处理
npm i html-loader file-loader url-loader -S
{
test:/\.(png|jpg|gif)$/,
loader:'url-loader',
options:{
limit:8*1024
}
},
{
exclude:/\.(js|jsx|ts|tsx|png|html|jpg|gif|css|scss|sass)$/,
loader:'file-loader',
options:{
name:'[name].[hash"10].[ext]'
}
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader'
}
}
img里面的图片是html-loader去处理
url-loader里面的图片是background的图片，如果小于limit直接解析为base64
file-loader可以用来svg等等文件的处理，
完整代码放到下面，
代码还不够完整的处理生产环境和开发环境，因为内容太多了，下个博客继续配置webpack，会加入typescript的处理。
const {resolve}=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
const EslintWebpackPlugin=require('eslint-webpack-plugin')
module.exports={
context:resolve(__dirname,'../'),
entry:'./src/index.js',
output:{
path:resolve(__dirname,'../dist'),
filename:'[name].js'
},
module:{
rules:[
{
test:/\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use:[{
loader:'babel-loader',
options:{
presets:[['@babel/preset-env',{
"useBuiltIns": "usage",
corejs:3,
modules:false,
"targets": {
"chrome": "58",
"ie": "10"
}
}]
,'@babel/preset-react'
]
}
}]
},
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},
{
test:/\.(png|jpg|gif)$/,
loader:'url-loader',
options:{
limit:8*1024
}
},
{
exclude:/\.(js|jsx|ts|tsx|png|html|jpg|gif|css|scss|sass)$/,
loader:'file-loader',
options:{
name:'[name].[hash"10].[ext]'
}
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader'
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./public/index.html'
}),
new EslintWebpackPlugin({
fix: true,
extensions: ['js', 'jsx']
})
],
mode:'development',
devServer:{
contentBase:resolve(__dirname,'../dist'),
open:true
}
}
注意入口必须是src下面的index.js
