Webpack5.0+react项目从零进行搭建（自用版）

1.新建文件夹，在文件夹里面打开命令行，npm init—》生成一个package.json文件

2.安装webpack: npm install webpack webpack-cli --save-dev

3.全局安装： npm install webpack webpack-cli -g(全局安装以后才可以直接在命令行使用webpack)

4.新建webpack.config.js：

const path = require('path');
module.exports = {
    mode: 'development',
    entry: './app/index.js', //相对路径
    output: {
        path: path.resolve(__dirname, 'build'), //打包文件的输出路径
        filename: 'bundle.js' //打包文件名
    }
}

5.新建入口文件 app/index.js：

function hello() {
    console.log('hello world');
}

6.命令行输入webpack—》项目根目录下已经生成好build/bundle.js文件了

7.将启动wepback的命令写到package.json中并添加一些有用的参数：

"scripts": {
    "start": "webpack --progress --watch --hot"
  }

• progress是显示打包进程，watch是监听文件变化，hot是启动热加载 以后只需要执行npm start就可以了。
• 入口文件（这里是app/index.js）,html模板文件(这里是app/index.html)
• 入口文件是整个项目开始运行的地方，模板文件是构建DOM树的地方

8.让webpack知道这就是我们的html入口文件，需要安装html-webpack-plugin：

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

9.在webpack.config.js中写入：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html', //指定模板路径
            filename: 'index.html', //指定文件名
        })
    ]
}

• tips: 生成的HTML路径就是output.path指定的路径

10.安装:

npm install react react-dom --save-dev

11.安装babel来解析JSX：

npm install -D babel-loader @babel/core @babel/preset-env @babel/plugin-transform-react-jsx

12.修改我们的入口文件:app/index.js

import React, { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
    render() {
        return <h1> Hello, world! </h1>
    }
}

ReactDom.render(
    <App />,
    document.getElementById('root')
)

13.webpack.config.js配置loader:

module: {
    rules: [
        {
            test:/\.(js|jsx)$/, // 配置要处理的文件格式，一般使用正则表达式匹配
            use: {
                loader: 'babel-loader', // 使用的加载器名称
                options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-transform-react-jsx']
                }
            }
        }
    ]
}

14.配置css-loader:

①npm install style-loader css-loader --save
webpack.config.js:

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

②npm i less less-loader --save
webpack.config.js:

{ // 使用less
    test: /\.less$/i,
    use: [
        {
            loader: 'style-loader',
        },
        {
            loader: 'css-loader',
        },
        {
            loader: 'less-loader',
            options: {
                lessOptions: {
                    strictMath: true,
                }
            }
        }
    ]
}

15.解析图片：url-loader:

①安装：npm install url-loader --save-dev
②webpack.config.js:

{ // 图片解析
    test: /\.(png|jpg|gif)$/i,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 8192,
            }
        },
    ],
    type: 'javascript/auto'
}

16.配置Eslint:

①安装：npm install eslint-webpack-plugin eslint --save-dev

②webpack.config.js:

const ESLintPlugin = require('eslint-webpack-plugin')
plugins: [
    new ESLintPlugin({
        fix: true,
        extensions: ['js', 'json', 'coffee'],
        exclude: '/node_modules/'
    })
]

③初始化：npx eslint --init

• √ How would you like to use ESLint? · style
• √ What type of modules does your project use? · none
• √ Which framework does your project use? · react
• √ Does your project use TypeScript? · No / Yes
• √ Where does your code run? · browser
• √ How would you like to define a style for your project? · guide
• √ Which style guide do you want to follow? · standard
• √ What format do you want your config file to be in? · JSON
• √ Would you like to install them now with npm? · No / Yes

④生成一个.eslintrc文件

17.webpack热更新：

①全局安装：npm install webpack-dev-server --g (全局安装以后才可以直接在命令行使用webpack-dev-server)

②本地安装：npm install webpack-dev-server --save-dev

③webpack.config.js:

devServer: {
    contentBase: path.resolve(__dirname, 'build'),
}

④非node方式配置热更新：
webpack.config.js：

const publicPath = '/';
const buildPath = 'build';
module.exports = {
//...
    output: {
        path: path.resolve(__dirname, buildPath), 
        filename: 'bundle.js', 
        publicPath: publicPath, //添加
    },
    devServer: {
        publicPath: publicPath,
        contentBase: path.resolve(__dirname, buildPath),
        publicPath: publicPath, //添加
        inline: true, //添加
        hot: true,  
    },
}

• 在命令行里再添加–hot参数： "start": "webpack-dev-server --hot --open"

如果报错：
https://www.cnblogs.com/fsg6/p/14117791.html

18.图片引入路径变为[Object Module]：

{
	test: /\.(png|jpe?g)(\?.*)?$/,
	loader: 'url-loader',
	options: {
		esModule: false, // 设置
		limit: 10000
	}
}