尽管说当初创立一个react我的项目，打包的配置都是曾经配置好了的，只须要咱们运行相应的打包命令就行了，然而咱们还是很有必要晓得该怎么来配置打包须要的配置。
上面就让咱们来走一遍webpack打包react我的项目的整个过程吧。
创立一个React我的项目
这里就不应用 create-react-app 指令创立React我的项目了，因为用create-react-app创立的我的项目，外面的配置曾经配置好了。
本文就间接应用 yarn init 初始化
并创立上面的目录构造：
装置webpack
应用
yarn add webpack webpack-cli --dev--dev 是部分装置的意思，为什么是部分装置呢？
因为并不是所有我的项目都须要应用 webpack ，所以只须要在须要应用的我的项目外面装置就行了；
但最次要的起因还是，如果全局装置 webpack 的话，一个其余使用者在应用这个我的项目的时候，他的电脑没有全局装置 webpack ，那么将运行不起来，但如果是部分装置的话，其余使用者只须要在开始 install 一次就行了。
应用 npx webpack -h查看是否装置胜利
因为是部分装置，因而 webpack 是在依赖包里的，对于它们命令的执行，要进入依赖包才行，否则是被认为命令有效的。或者，应用npx会主动找到对应的包执行命令，它是一个 npm 包执行器，个别装置了 npm 会主动装置 npx，总之，有了这个工具，执行部分的 webpack 命令就没那么简短了。
在根目录下增加webpack.config.js配置文件
const path = require('path');module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist') }}应用 npx webpack对我的项目进行打包解决
能够在我的项目目录上面发现打包好的 dist文件夹
在 index.html文件中引入打包好的dist中的 main.js文件，并运行 index.html文件，能够在浏览器的控制台中看到打印了 hello world。
咱们能够应用插件来生成html文件，这样就防止了html每次去手动引入js；应用插件来删除上次打包的后果。
// 装置依赖yarn add --dev html-webpack-plugin clean-webpack-plugin在 webpack.config.js中应用插件
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist') }, plugins:[ new HtmlWebpackPlugin({template:'./public/index.html'}), new CleanWebpackPlugin() ]}
运行dist中的index.html文件
这里打印了两次，是因为原来在 public/index.html中引入了一次 main.js，打包的时候又引入了一次，所以一共引入了两次，所以打印了两次 hello world。
更多对于webpack的配置阐明能够webpack官网
React应用webpack
根本配置
下载 react，react-dom，react-scripts
yarn add react react-dom react-scripts批改 index.js文件，增加 App.js文件
在 package.json文件中退出：
"scripts": { "start": "react-scripts start"}运行 yarn start ....报错
发现是装置的 react 的包外面的 webpack和本人装置的 webpack包的版本抵触了
升高装置的 webpack包的版本：
删除 node_modules 和 yarn.lcok，批改 package.json外面 webpack的版本为 4.44.2
从新下载好后，cnpm start没问题！
然而应用 npx webpack，又报错！
查看一圈发现是 html-webpack-plugin插件版本问题。
yarn remove html-webpack-plugin
yarn add --dev html-webpack-plugin@^3.2.0
下载好之后运行 npx webpack
这是因为不反对JSX语法包的错，所以须要去配置 loader了
去babel的官网，看看如何配置jsx语法loader
下载
yarn add --dev @babel/preset-react babel-loader @babel/core在 webpack.config.js退出 loader配置
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist') }, plugins:[ new HtmlWebpackPlugin({template:'./public/index.html'}), new CleanWebpackPlugin() ], module: { rules: [ { test: /\.(js|jsx|ts|tsx)$/, exclude: /(node_modules)/, use: [ { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } } ] } ] }}CSS配置
持续配置 css须要的配置
创立 App.css文件，并引入
// App.jsimport React, { PureComponent } from 'react';import './App.css';class App extends PureComponent{ constructor(props){ super(props); this.state = {}; } render(){ return ( <div className='hello'>Hello World!</div> ) }}export default App;// App.css.hello { color: red;}下载 style-loader，css-loader，这里要特地留神 loader的版本问题，能够应用 npm ls style-loader 查看 react装置好了的loader是什么版本的（因为下载了 react-scripts，这个包外面也有打包性能，所以外面必定配置了 style-loader,css-loader这些loader的），咱们就装置多少版本的。
应用
yarn add --dev style-loader@1.3.0 css-loader@4.3.0在webpack.config.js中退出配置
{ test: /\.css$/i, use: ['style-loader', 'css-loader']}配置好后，npx webpack打包，运行 dist/index.html，发现 Hello World字体色彩为红色。
在控制台调试发现，css款式的引入是在head插入的，当我的项目变大时款式直接插入head中的形式并不好，咱们须要将款式拆散
应用 mini-css-extract-plugin插件，它会将 CSS 提取到独自的文件中，为每个蕴含 CSS 的 JS 文件创建一个 CSS 文件，并且反对 CSS 和 SourceMaps 的按需加载。
下载 mini-css-extract-plugin
yarn add --dev mini-css-extract-plugin@0.11.3webpack.config.js配置 mini-css-extract-plugin
plugins: [ ... new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: "[name].css", chunkFilename: "[id].css" })]module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { // you can specify a publicPath here // by default it use publicPath in webpackOptions.output publicPath: '../' } }, "css-loader" ] } ]}配置img、font、map3等资源的loader
应用 url-loader，它的性能相似于 file-loader, 然而在文件大小（单位为字节）低于指定的限度时，能够返回一个 DataURL。
yarn add --dev url-loader@4.1.1// App.css.hello { color: red; background: url('./assets/backgroud2.jpg') no-repeat center; background-size: cover; height: 100vh;}webpack.config.js增加配置
{ test: /\.(jpg|png|gif)$/, loader: 'url-loader', options: { limit: 1000, name: 'static/img/[name].[hash:7].[ext]' }}运行 dist/index.html报如下谬误：
这是因为本地没有启动web服务，所以浏览器拜访不了本地的资源，这是失常的。
其余资源的配置和下面的差不多，这里就不做介绍了。
参考资料：
应用webpack4从零配置react我的项目