手把手教你使用Webpack打包React项目

朴灿烈づ我的快乐病毒、 2022-05-25 07:39 1276阅读 0赞

#  #

# 什么是Webpack？ #

webpack是一个前端资源加载/打包工具，前端的常用资源都可以作为一个模块导出，我们在代码中直接引用即可，最后按照我们的配置把代码打包整合起来。

![70][]

先来认识一下webpack的基本配置

![70 1][]

# 现在开始搭建开发环境 #

# 第一步：在react-music-player文件目录下，执行npm init创建package.json文件。 #

![WEBRESOURCE221516ceed485685e12b57e768a736af][]

![WEBRESOURCE5153d77ca96e39bcc489bf78a51a0747][]

这时，代码当中的配置文件就已生成啦：

![WEBRESOURCE810525d5f24939b6de31ac0cec590c01][]

# 第二步：现在配置文件中还没有dependencies，这时运行npm install react --save就会添加react依赖，使用--save会自动的把依赖添加到package.json的dependencies中。 #

![WEBRESOURCE73a06237574fb59fbd5874048553ac7c][]

同时，依赖的具体文件放在node\_modules中。

![WEBRESOURCE278c3fdb1210c5173400a448406fa592][]

可以看到，同时也生成了一个 package-lock.json 文件， package-lock.json是当 node\_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。

当然，当我们 在git中clone的项目中，作者肯定不会把node\_modules上传上去，这时我们直接运行npm install就会把package.json中的所有依赖都安装。

# 第三步：创建webpackage.config.js，并添加基本配置 #

#  #

# 第四步：编写统一入口文件信息，在app目录下新建一个index.js文件，如下： #

![70 2][]

为了演示效果，同时在根目录下新建一个index.html文件，如下：

![WEBRESOURCE11dcb594bb44a975344d84d016ec3a11][]

# 第五步：运行webpack，进行打包 #

![WEBRESOURCEd010c8c09a89d6ba41ddbdde710eaedb][]

打包成功后，目录dist文件下会生成一个bundle.js文件，就是打包结果，也是我们webpack.config.js中配置的输出文件名称。

![WEBRESOURCE5881bf2fee2ac40e6492610fe62adc04][]

这时直接点击文件中的index.html运行

![WEBRESOURCE7e13353f7148ca9de280fd9bdb6fd050][]

可以看出控制台输出的react版本信息

![WEBRESOURCEfc03d81ba5ddad21f5315ce7016459c8][]

# 到这里，webpack打包react项目就完美结束了。 #

# 常用插件配置 #

接下来我们继续看一下react中常用插件的使用，主要讲解babel、css和less的配置，其中babel-loader是将ES6转换为ES5使用，css-loader和less-loader主要完成webpack对css和less的支持。相关webpack配置如下

var path = require('path');
    var webpack = require('webpack');
    module.exports = {
        entry: './app/index.js',
        output: {
            // path: '/dist',
            path: __dirname + '/dist',
            filename: 'bundle.js'
        },
        module:{
            rules: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: "node_modules",
                    query: {
                      presets: ['react', 'es2015', 'stage-0'],
                    }
                  },
               
                  {
                      test: /\.css$/,
                      loader: "style!css"
                  },
                  {
                      test: /\.less/,
                      loader: 'style-loader!css-loader!less-loader'
                  }
            ]
        }
    }

这时，就可以使用ES6的语法“import”导入啦。

![70 3][]

简单编写了一个less文件，如下：

![70 4][]

在index.html中添加如下句：

![70 5][]

再运行webpack，打开我们的项目就可以看到如下界面：

![70 6][]

# 至此，大功告成~ #

# 问题解决： #

# 1、'webpack'不是内部或外部命令，也不是可运行的程序或批处理文件。 #

说明没有安装相关依赖，使用npm install \[相关组件\] --save-dev进行安装，使用--save会把依赖的版本信息等同时保存在package.json文件，-dev是保存在devdependencies，即系统运行需要的依赖部分。

![WEBRESOURCE5156d05a6919c06d805f977ed34a5a69][]

![WEBRESOURCEbdba759956115099214abb6659a5253d][]

![WEBRESOURCEe49124484db8b9a1bc4f49b3a88be07a][]

![WEBRESOURCE7c39c2499c940da2e5469277027e6478][]

# 2、若出现：Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.output.path: The provided value "./dist/js" is not an absolute path!    #

因为webpack版本的问题，输出路径错误，改写为下边形式就好了

![WEBRESOURCE70b52b98794e03950ddb57a188968fc0][]

# 3、一直报无效的配置   Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.    - configuration.module has an unknown property 'loaders'. These properties are valid:…… #

![WEBRESOURCE600ccd3c0ad52c9b30f71e468f2fd1fb][]

# 解决办法： #

![WEBRESOURCE1749ef984e8ff2db772a2c40185e16dd][]

# 4、Cannot read property 'babel' of undefined at Object.module.exports…… #

![WEBRESOURCEc5db6f7a8bc22835c097b01f956ad051][]

# 解决办法： #

第一步：新建.babelrc文件

第二步：写入依赖

{
        "presets: ["es2015", "react", "stage-0"]
    }

第三步：安装依赖

npm i babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 -D

第四步：配置webpack，加载babel-loader

{
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: "node_modules",
            query: {
                  presets: ['react', 'es2015', 'stage-0'],
            }
     },

# 5、出现Module build failed: ReferenceError: Unknown plugin "import" specified in "base" at 0, attempted to resolve relative to "D:\\\\MyProjectExercise\\\\20180510\\\\react-music-player\\\\app" #

![WEBRESOURCE36a6c99fab7f7ed52b70bd83339d03e9][]

执行npm install babel-plugin-import --save-dev

# 6、出现Module build failed: TypeError: Cannot read property 'lessLoader' of undefined    at Object.module.exports (D:\\MyProjectExercise\\20180510\\react-music-player\\node\_modules\\less-loader\\index.js:50:18) #

![WEBRESOURCE3195d029a69d697816f33b8c3106cb64][]

执行npm install less-loader --save-dev

[70]: /images/20220525/ccdeafd0dfe64fb5bc0b5b764f27b2db.png
[70 1]: /images/20220525/da7b32348e4a462dab0631bbdeec9645.png
[WEBRESOURCE221516ceed485685e12b57e768a736af]: https://note.youdao.com/yws/res/4163/WEBRESOURCE221516ceed485685e12b57e768a736af
[WEBRESOURCE5153d77ca96e39bcc489bf78a51a0747]: https://note.youdao.com/yws/res/4166/WEBRESOURCE5153d77ca96e39bcc489bf78a51a0747
[WEBRESOURCE810525d5f24939b6de31ac0cec590c01]: https://note.youdao.com/yws/res/4168/WEBRESOURCE810525d5f24939b6de31ac0cec590c01
[WEBRESOURCE73a06237574fb59fbd5874048553ac7c]: https://note.youdao.com/yws/res/4176/WEBRESOURCE73a06237574fb59fbd5874048553ac7c
[WEBRESOURCE278c3fdb1210c5173400a448406fa592]: https://note.youdao.com/yws/res/4178/WEBRESOURCE278c3fdb1210c5173400a448406fa592
[70 2]: /images/20220525/67482ad4bd814bc5b0f47aabdf3b8aea.png
[WEBRESOURCE11dcb594bb44a975344d84d016ec3a11]: https://note.youdao.com/yws/res/4206/WEBRESOURCE11dcb594bb44a975344d84d016ec3a11
[WEBRESOURCEd010c8c09a89d6ba41ddbdde710eaedb]: https://note.youdao.com/yws/res/4194/WEBRESOURCEd010c8c09a89d6ba41ddbdde710eaedb
[WEBRESOURCE5881bf2fee2ac40e6492610fe62adc04]: https://note.youdao.com/yws/res/4197/WEBRESOURCE5881bf2fee2ac40e6492610fe62adc04
[WEBRESOURCE7e13353f7148ca9de280fd9bdb6fd050]: https://note.youdao.com/yws/res/4211/WEBRESOURCE7e13353f7148ca9de280fd9bdb6fd050
[WEBRESOURCEfc03d81ba5ddad21f5315ce7016459c8]: https://note.youdao.com/yws/res/4215/WEBRESOURCEfc03d81ba5ddad21f5315ce7016459c8
[70 3]: /images/20220525/5e54d77ece144353a1c859e9dd90f347.png
[70 4]: /images/20220525/890840c3b2854887ba4b968a1ff52d8d.png
[70 5]: /images/20220525/c54fd68131954f2097eec70ccec213e4.png
[70 6]: /images/20220525/0da55b8623c84b52a7e512da2fdde5d7.png
[WEBRESOURCE5156d05a6919c06d805f977ed34a5a69]: https://note.youdao.com/yws/res/4186/WEBRESOURCE5156d05a6919c06d805f977ed34a5a69
[WEBRESOURCEbdba759956115099214abb6659a5253d]: https://note.youdao.com/yws/res/4188/WEBRESOURCEbdba759956115099214abb6659a5253d
[WEBRESOURCEe49124484db8b9a1bc4f49b3a88be07a]: https://note.youdao.com/yws/res/4190/WEBRESOURCEe49124484db8b9a1bc4f49b3a88be07a
[WEBRESOURCE7c39c2499c940da2e5469277027e6478]: https://note.youdao.com/yws/res/4192/WEBRESOURCE7c39c2499c940da2e5469277027e6478
[WEBRESOURCE70b52b98794e03950ddb57a188968fc0]: https://note.youdao.com/yws/res/4200/WEBRESOURCE70b52b98794e03950ddb57a188968fc0
[WEBRESOURCE600ccd3c0ad52c9b30f71e468f2fd1fb]: https://note.youdao.com/yws/res/4222/WEBRESOURCE600ccd3c0ad52c9b30f71e468f2fd1fb
[WEBRESOURCE1749ef984e8ff2db772a2c40185e16dd]: https://note.youdao.com/yws/res/4224/WEBRESOURCE1749ef984e8ff2db772a2c40185e16dd
[WEBRESOURCEc5db6f7a8bc22835c097b01f956ad051]: https://note.youdao.com/yws/res/4227/WEBRESOURCEc5db6f7a8bc22835c097b01f956ad051
[WEBRESOURCE36a6c99fab7f7ed52b70bd83339d03e9]: https://note.youdao.com/yws/res/4231/WEBRESOURCE36a6c99fab7f7ed52b70bd83339d03e9
[WEBRESOURCE3195d029a69d697816f33b8c3106cb64]: https://note.youdao.com/yws/res/4234/WEBRESOURCE3195d029a69d697816f33b8c3106cb64