从0开始搭建一个简单的webpack react项目

1 初始化一个空项目

npm init -y

2 install webpack

npm install --save-dev webpack

3 新建webpack配置文件
在根目录下新建build文件夹，分别新建
webpack.common.js 通用配置
webpack.dev.js 开发配置
webpack.prod.js 线上配置

4 html模板

npm install --save-dev html-webpack-plugin

在根目录下新建index.html作为插件html-webpack-plugin的模板

webpack.dev.js下

  plugins: [
        new HtmlWebpackPlugin({
          title: 'test',
          template:'index.html'
        }),
        ....
      ],

5 加载资源
1 加载css

npm install --save-dev style-loader css-loader

  {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
  },

2 配置sass

npm install --save-dev sass-loader
// node-sass 要用镜像 国内被墙了
cnpm install --save-dev node-sass

  {
                test: /\.scss$/i,
                use: ['style-loader', 'css-loader','sass-loader'],
   },

3 加载图片

npm install --save-dev file-loader
或者
npm install --save-dev url-loader

url-loader多了一个大小限制，小于这个大小的自动转换为dataUrl

  {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
  }

6 配置开发服务器
因为webpack-dev-server也是基于express的封装。所以干脆直接自己配express。

npm install --save-dev express webpack-dev-middleware

根目录下新建server.js文件

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./build/webpack.common.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});

7 配置热更新
在上一步的基础上

npm install --save-dev webpack-hot-middleware

1 webpack.dev.js内引入插件

   plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ]

2 webpack.common.js内在入口处配置热更新配置

 entry: [
        'webpack-hot-middleware/client?path=/__webpack_hmr&reload=true&timeout=20000',
        './src/index.js',
      ],

3 server.js 出应用

app.use(require("webpack-hot-middleware")(compiler));

参考https://github.com/webpack-contrib/webpack-hot-middleware

8 引入react以及babel

 npm install react --save
 npm install react-dom --save

因为jsx浏览器是无法解析的，需要用babel编译一遍

babel-core
用于将js解析成ast

npm install --save-dev babel-core

preset-react
用于适配react语法

npm install --save-dev @babel/preset-react

preset-env
用于适配浏览器版本

npm install --save-dev @babel/preset-env

babel-loader
用于webpack配合babel自动解析react语法

npm install --save-dev babel-loader

webpack.common.js下配置rule

     {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/, //不包含node_modules目录下的js文件
        use: {
          loader: 'babel-loader',
        },
      },

在根目录下新建babel.config.js

module.exports = {
    presets:[
        ["@babel/preset-env"],
        ["@babel/preset-react"]
    ]
}

在index.js内测试react语法

import './index.css'
import React from 'react';
import ReactDOM from 'react-dom';
 ReactDOM.render(
  <div className='box'>
    <h1 className='text'>Hello!</h1>
  </div>,
  document.getElementById('root')
);
if (module.hot) {
    module.hot.accept();
}

效果

项目结构