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

什么是Webpack？

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

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

现在开始搭建开发环境

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

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

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

同时，依赖的具体文件放在node_modules中。

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

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

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

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: './app/index.js',
    output: {
        // path: '/dist',
        path: __dirname + '/dist',
        filename: 'bundle.js'
    }
}

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

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

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

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

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

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

到这里，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”导入啦。

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

在index.html中添加如下句：

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

扫描二维码关注公众号，回复： 930364 查看本文章

至此，大功告成~

问题解决：

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

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

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版本的问题，输出路径错误，改写为下边形式就好了

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:……

解决办法：

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

解决办法：

   第一步：新建.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"

 执行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)

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