likes
comments
collection
share

react-从零开始搭建项目-webpack配置

作者站长头像
站长
· 阅读数 22

上一篇

前言

上一篇我们简单搭建了一个项目目录，但是发现无法将html文件与index.js文件连接起来，也无法使用ES Module的import语法，更无法编译JSX语法为JS，为了解决这些问题，我们需要把webpack配置起来。

本文不是专业的webpack介绍，只是简单的使用

我理解的webpack

webpack，顾名思义，给web打个包，意思就是将显示web需要的资源整合到一起（打包起来），有相关的loader使得webpack可以打包无法理解的文件，还有相关插件对项目进行优化。但是这里就不多说这些了，这次主要是使用webpack打包个react项目。那我们开始配置一下webpack吧。

在项目中配置webpack

尝试安装与打包

首先我们安装一个全局webpack及webpack-cli的包(全局安装后才可以在命令行使用webpack)：npm i webpack webpack-cli -g

再运行：npm install -D webpack webpack-cli@3，开发环境中需要用到webpack包，热更新实现时需要webpack-cli@3 最好用3，4会报错

安装完成后，试着将 .src/index.js文件打包一下：webpack ./src/index.js -o ./dist/js --mode=development

发现报错了

react-从零开始搭建项目-webpack配置

假设去掉./src/index.js文件的JSX语法及import语法的话，还是可以打包成功的

react-从零开始搭建项目-webpack配置

错误原因很简单，webpack无法理解JSX语发及import语法，我们需要一些loader，需要好几个翻译官。 那怎么引入loader呢？

配置webpack.config.js

在项目中关于webpack的配置我们一般会放到这个文件中：webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['env', 'react']
        }
      }
    ]
  }
}

首先我们配置了loader: 'babel-loader', options: { presets: ['env', 'react'] }，就需要安装相应的依赖，不然是不会生效的。

npm install babel babel-cli babel-loader@7 babel-core babel-preset-env babel-preset-react --save-dev

在这里很容易遇到babel版本不对使得打包失败的问题，babel-loader8 对应的 babel-core版本为：7，我这里用到的babel-loade是7，所以不用担心这个问题

命令行直接运行webpack，可以看到项目的dist文件夹下生成了一个main.js文件：

react-从零开始搭建项目-webpack配置

说明JSX编译成功，js文件打包成功 在HTML文件下我们引入这个js文件，

<body>
  <div id="root"></div>
  <script src="../dist/main.js"></script>
</body>

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

const App = () => (
  <div>
    <p>hello react</p>
  </div>
);

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

在浏览器中打开文件，可以看到我们的react组件显示在了浏览器中 react-从零开始搭建项目-webpack配置

这里还有一个问题：文件dist/main.js是我们手动引入的，假设以后打包的文件多了，我都要一个个引入吗？所以这里我们可以使用一个webpack插件来帮忙：html-webpack-plugin

首先安装：npm i html-webpack-plugin -D

将我们之前手动引入的js删除：

<body>
  <div id="root"></div>
</body>

修改webpack.config.js文件

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: ['env', 'react']
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}

大概的意思是以./public/index.html为模板，将打包好的文件引入到这个html中，重新打包后我们拿到了这个结果：

react-从零开始搭建项目-webpack配置

这里有点好奇，为啥打包放到head标签里面去了？ 加上这个配置就可以解决了：inject: 'body'

plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      inject: 'body'
    })
],

总结

通过这次的尝试，我们成功将一个react组件，通过webpack打包后运行在了浏览器中，但是很明显，这和我们日常开发中的情况有点不一样，怎么是静态文件打开的呢？localhost:3000呢？热更新呢？这个正是下一篇我们要继续尝试的。

下一篇