Webpack4搭建一个react项目

zs10
1,831 阅读3分钟

之前一直在使用create-react-app来创建react项目，最近在学习关于webpack方面的知识，想尝试着利用下webpack搭建一个react项目，记录下配置的流程和一些需要注意的地方，供大家参考一下。

Webpack的4个基本概念

  • entry: 指定Webpack构建内部依赖的入口。
  • output: 指定Webpack在哪里输出打包后的bundles和文件相应的命名。
  • loader: 由于Webpack只能够理解js文件，loader可以将所有类型的文件转换成Webpack可以处理的模块。
  • plugins: plugins主要是一些插件，主要用于帮助我们开发，例如打包优化和压缩。

Webpack搭建流程

在了解Webpack的一些基本概念之后，我们可以开始进行Webpack的配置。

1. 初始化项目

cd 'your react-project'   //进入react项目的文件夹
npm init -y   //初始化生成package.json

2. 安装Webpack

npm install --save-dev webpack   //安装webpack
npm install --save-dev webpack-cli   //使用webpack4以上版本，还需要安装cli

3. 项目目录文件创建

在根目录下新建webpack.config.js和.babelrc配置文件，以及新建src和public文件夹。
同样，在src文件夹下创建index.js作为入口文件，在public文件夹下创建index.html作为模板的html。

整个项目的目录如下所示：

4. 安装babel-loader

由于babel升级到7.版本以上，因此使用npm i babel-core babel-loader babel-preset-env --save-dev，会使得我们在后面的运行中出现Error: Can't find moudle的错误。 
npm install @babel/core @babel/preset-env babel-loader --save-dev

在.babelrc中输入

{
    "presets": [
        "@babel/preset-env"
    ]
}

配置webpack.config.js

const path = require('path');
module.exports = {
    //入口文件
    entry: [
        path.join(__dirname,'./src/index.js')
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname,'./dist')
    },
    //loader配置
    module: {
        rules:[
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
}

5. 生成html

使用html-webpack-plugin插件为html文件引入外部资源，创建html文件入口。 
npm i html-webpack-plugin html-loader --save-dev

配置webpack.config.js

...
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
   ...,
    plugins: [
        new HtmlWebPackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
        })
    ]
}

使用clean-webpack-plugin插件在每次打包前清理dist目录，避免生成重复和不再使用的静态文件。

npm install clean-webpack-plugin --save-dev

配置webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    ...
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
        })
    ]
}

6. 处理css，less，静态资源

安装相应的loader和配置webpack.config.js，使得我们能够加载css，less，图片等资源。 
npm install less --save-dev
npm install style-loader css-loader less-loader  --save-dev

配置webpack.config.js

module.exports = {
    ...,
    //loader配置
    module: {
        rules:[
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test: /\.html$/,
                use: [{
                    loader: "html-loader",
                    options: {
                        minimize: true
                    }
                }]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: "file-loader"
                    }
                ]
            }
        ]
    },
    ...
}

7. 配置webpack-dev-server热更新

通过使用热更新，使得我们每一次修改代码完成后不需要重新执行打包命令，页面会自动更新。 
npm install webpack-dev-server --save-dev

配置webpack.config.js

module.exports = {
    ...
    // devServer提供一个简单的web的服务器，能够实时重新加载（热更新）
    devServer: {
        port: 3000, //端口号，默认8080
        hot: true, //热模块更新
        compress: false, //true则进行代码压缩
        open: false, //自动打开浏览器
        overlay: true, //在浏览器界面显示错误信息
        stats: "errors-only" //shell只打印错误信息
    },
    ...
}

到这里，我们的webpack.congfig.js基本配置就完成了。

完整的webpack.config.js配置

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    //入口文件
    entry: [
        path.join(__dirname,'./src/index.js')
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.join(__dirname,'./dist')
    },
    // devServer提供一个简单的web的服务器，能够实时重新加载（热更新）
    devServer: {
        port: 3000, //端口号，默认8080
        hot: true, //热模块更新
        compress: false, //true则进行代码压缩
        open: false, //自动打开浏览器
        overlay: true, //在浏览器界面显示错误信息
        stats: "errors-only" //shell只打印错误信息
    },
    //loader配置
    module: {
        rules:[
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },
            {
                test: /\.html$/,
                use: [{
                    loader: "html-loader",
                    options: {
                        minimize: true
                    }
                }]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: "file-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
            template: "./public/index.html",
            filename: "./index.html"
        })
    ]
}

安装react模块

因为我们最终是要搭建一个react项目，所以我们需要安装react的基本模块。 
npm install react react-dom --save
npm install @babel/preset-react --save-dev

配置.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

修改package.json的script配置

Development - 开发模式

Productio - 生产模式

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  }

修改入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Webpack config!</h1>,
    document.getElementById('root')
);

修改模板index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

启动react项目

npm start   //开发时候启用

上面就是整个webpack搭建基本的react项目流程，webpack还有很多功能，后面我们可以尝试一下配置下多页面的应用，加深对webpack的理解和使用。

avatar
文章
阅读
粉丝