react webpack配置

babel编译jsx

babel-loader；webpack调用babel的桥梁
@babel/core；babel的核心
@babel/preset-env；环境预设，编译es6
@babel-preset-react；编译jsx

devtools

devtools:'source-map'；保存源码，方便调试。没有的话，调试的是编译后的代码，行号对不上。
pubicPath: 'build/',

module配置

// 处理js或jsx

{test：/\.jsx?/i,
exclude: /node_modules/,
use:[
 {
loader: 'babel-loader',
optionx: {
presets:['@babel/preset-react']
},
 {
loader: 'eslint-loader',
options: {
outputReport: {
// 输出报告
filePath: 'eslint_report.html',
formatter: require('eslint/lib/formatter/html')
},
]
} },
// 处理css
postcss-loader 加前缀
autooprefixer 自动判断是否加前缀
{test：/\.css$/i,
use: [
 'style-loader',
'css-loader',
{
loader:'postcss-loader',
options: [
require('autoprefixer')
]
}
]},
// 处理图片,url-loader依赖file-loader
{test：/\.(png|jpg|gif)$/i,
use: {
loader: 'url-loader',
optionx: {
outputPath:'imgs/',
limit:10*1024
}
} },
// 处理字体
{test：/\.(eot|svg|ttf)$/i,
use: {
loader: 'url-loader',
optionx: {
outputPath:'fonts/',
limit:10*1024
}
} },
// 处理less、sass
{test：/\.less$/i,
use: [
 'style-loader',
'css-loader',
'less-loader'
]},

stylelint样式检查工具

stylelint stylelint-webpack-plugin stylelint-config-standard
loader类似管道,处理css之后丢给webpack编译
plugin与webpack平级，没有交互
package.json中

样式继承配置
"stylelint":{
"extends": "stylelint-config-standard"
},
浏览器支持
"browserslist":[
"> 0.5%",
"last 2 version",
"not dead"
]
webpack.config.js中
const StyleLintPlugin = require('stylelint-webpack-plugin')
plugin:[
new StyleLintPlugin({
files:['**/*.css','**/*.less',html,scss,vue]
})

ESLint js代码质量管理

eslint eslint-loader eslint-plugin-react

jest 单元测试

webpack webpack-cli jest jest-webpack
package.json
scripts:{
"test": "jest-webpack"
}
"jest": {
"roots":[
"./tests/"
]
测试功能函数、组件
test(描述，function () {
expect(xxx).tobe(xxx)
})

devServer

webpack-dev-server
script:{
start:"webpack-dev-server"
}
devServer: {
contnetBase:path.resolve(__dirname,'./'),
compress:true,
open:true,
// 跨域
proxy: {
// 真实的地址http://localhost:8080/api
'/api': 'http://localhost:8080'
}
}

html-webpack-plugin 处理

new HtmlWebpackPlugin({
// 用当前index.html作为模板，webpack自动插入bundle.js
template:path.resolve(__dirname,'index.html')
})