webpack4 react配置（还在摸索中）

1 基础配置

npm init -y
npm install webpack webpack-cli react react-dom --save-dev

在根目录下新建一个 config的文件，当然你也可以建在build的 文件夹下面，只是 在 输出 目录哪里需要多加一个 …/

安装react-router

2 bable编译es6 jsx

cnpm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/preset-react -D

在根目录下新建 .babelrc 文件夹
npm install core-js@2 @babel/runtime-corejs2 -S
{
“presets”: [["@babel/preset-env", { “useBuiltIns”: “usage” } ], “@babel/preset-react”],
“plugins”: ["@babel/plugin-transform-runtime"]
}

npm i lodash -p //配置 loader环境

3 插件 CleanWebpackPlugin 打包清除dist以前的 文件
npm install clean-webpack-plugin -D
const {CleanWebpackPlugin}=require(‘clean-webpack-plugin’)
（在这里 我报了次错 看了 npm 加了个中括号 ？不明白为什么）

4 使用插件 HtmlWebpackPlugin 经过上一步HTML文件也被清除了 需要我们使用插件生成HTML文本

npm install html-webpack-plugin -D

5、使用 source-map,对devtool进行优化
webpack中devtool选项用来控制是否生成，以及如何生成 source map。简言之，source map就是帮助我们定位到错误信息位置的文件。正确的配置source map，能够提高开发效率，更快的定位到错误位置。
在webpack.config.js中选项mode下加上如下这句话：
devtool:“cheap-module-eval-source-map”,// 开发环境配置
devtool:“cheap-module-source-map”, // 线上生成配置

6 运行webpack指令 实现热更新

devServer:{
clientLogLevel:‘warning’,//可能值有 none ,error,warning或者info（默认值）
hot:true,//启用webpack的模块热替换特性，这个需要配合webpack HotModulereplacementPlugin
contentBase:path.join(__dirname,“dist”),//告诉服务器从哪里提供内容，默认情况下请使用 当前工作目录
compress:true,
host:‘0.0.0.0’,//指定一个host，默认是 localhost。如果你希望服务器可外部访问 0.0.0.0
port:8080,//端口号
open:true,//是否打开浏览器
overlay:{//出现错误或者警告的时候，是否覆盖页面线上的 错误
warnings:true,
errors:true
},
publicPath:"/",//此路径下的打包文件可在浏览器中访问
proxy:{//设置代理
“/api”:{
target:“http:// 192.168.237.122:8080”,
pathRewrite:{"^/api":"/mockjsdata/5/api"}
}
},
quiet:true,//
watchOptions:{//监控文件相关的控制选项
poll:true,//webpack 使用文件的额系统（file system）获取文件改动 的通知
ignored:/node_modules/,//忽略控制的额文件夹
aggregateTimeout:300,//默认值 ，当第一个文件更改 ，会在重新构建前增加延迟

    }
},

合并公共的webpack.config配置
const merge=require(‘webpack-merge’)

添加 css loader
npm install style-loader css-loader sass-loader less-loader --save-dev
npm install postcss-loader autoprefixer -D

在这里 配置autoprefixer遇到个警告

原因是版本过高导致额一个 警告 但是代码没错
将browsers 换成 overrideBrowerslist

npm install mini-css-extract-plugin -D//单独 抽取Css出来loader

在这里 我又遇到一个坑 原来 MiniCssExtractPlugin不能和跟跟style-loader链式写在一起
第二种的配置只能 在 生产环境里面

高级配置

处理图片

npm i file-loader url-loader -D

		 {
            test: /\.(png|jpg|jpeg|gif|svg)/,
            use: {
                loader: 'url-loader',
                options: {
                    outputPath: 'src/', // 图片输出的路径
                    limit: 10 * 1024
                }
            }
        }

npm install image-webpack-loader --save-dev

压缩图片