怎么使用webpack工具自己搭建react脚手架？以及安装所需的依赖及其配置信息。
相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用，当有特殊需求，需要修改 eject 出来的 webpack 配置文件时，面对各种配置项不知如何下手，本文会介绍如何使用 webpack 手动搭建一个 react 项目。
首先全局安装webpack
npm i webpack -g
安装项目所需要的webpack管理依赖
npm i webpack webpack-cli webpack-dev-server --save-dev
在安装的过程中，就不要闲着了，此时可以新建自己需要的文件，比如配置文件webpack.config.js(管理配置的文件，名字不能改)、主要引入文件main.js、展示视图的文件index.js、组件文件component、视图文件pages/views、css、img等文件。
此时依赖差不多安装好了，再继续安装webpack支持react的核心工具jsx-loader
npm i jsx-loader --save-dev
可以同时安装react项目所需要的依赖
npm i react react-dom --save-dev
需要在建立的webpack.config.js文件里进行基本配置
注意：有了webpack.config.js文件配置之后，指令就变成了webpack，只要输入webpack就可以自动打包（将所有文件都引入主文件）可以在package.json配置指令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
配置文件的五大核心部分也需要了解一下，mode开发环境， entry 文件入口 ，output文件出口， module-rules加载器规则 ，plugins插件 ，devServer热更新
进入文件foo.js可以更改，以及导出文件foo.bundle.js可以更改。
var path = require('path');
module.exports = {
mode: 'development',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
}
};
因为react使用的是babel语法，浏览器只识别js语法，我们需要安装加载器来解析此语法，让浏览器能够识别此文件。
npm install babel-loader@7 babel-core babel-preset-es2015 babel-preset-react --save-dev
加载器配置文件
module.exports = {
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
query: {presets: ['es2015', 'react']}
}
}
],
},
};
安装css、图片展示配置的加载器
npm i style-loader css-loader url-loader file-loader --save-dev
加载器配置文件
module.exports = {
module: {
rules: [
//css文件配置
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
//图片的配置文件
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
},
};
这里简单介绍一些文件的加载器配置，如果需要更多请去webpack
当准备上线时，肯定要生成工程文件，此时可以安装依赖，在生成工程文件时，自动生成生成html模板，不用再次引入js文件
安装依赖
npm i html-webpack-plugin --save-dev
要在配置文件中引入安装的依赖
const HtmlWebpackPlugin = require('html-webpack-plugin');//通过npm 安装
const webpack = require('webpack');//访问内置的插件
配置文件为
plugins: [
new HtmlWebpackPlugin({ template: './index.html' }),
new webpack.HotModuleReplacementPlugin()
],
基本已经配置好了，此时你还需要一个热更新，实时监控文件的变动，对你写代码有很大的帮助。此时你可以去package.json文件里有没有webpack-dev-server下载的版本（一般下载webpack的时候，都会下载下来），如果没有，那就自己下载一下依赖。
npm i webpack-dev-server --save-dev
配置文件为：可以直接更改端口
//热更新，更改接口信息
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
此时可以配置一下指令，就更完美了。指令配置在package.json文件下的scripts中。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build": "webpack"
},