从零开始创建react+webpack项目

安装node

下载安装包安装即可：https://nodejs.org/zh-cn/

 

创建react项目

命令行中运行：

npx create-react-app first-react-and-webpack-project
cd first-react-and-webpack-project
npm start

项目可运行，react项目创建成功。

 

配置webpack

 

安装webpack

进入项目文件夹，执行以下命令安装webpack：

npm install webpack webpack-cli --save-dev

 

创建webpack.config.js文件，修改package.json

在项目文件夹根目录下创建webpack.config.js文件，文件内容：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

在package.json文件中添加加粗内容：

scripts: {

......

    "compile": "webpack"

} 

 

引入解析css资源和图片资源的插件

安装：

npm install --save-dev style-loader css-loader file-loader

style-loader css-loader用于解析css资源，file-loader用于解析图片资源。

 

配置：

在webpack.config.js中添加如下内容：

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
} 

 

引入自动生成index.html插件

安装：

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

 

配置：

在webpack.config.js文件中添加：

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [
  new HtmlWebpackPlugin({
    title: 'first project'
  })
]

 

引入自动清理/dist文件夹插件

安装：

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

 

配置：

在webpack.config.js文件中添加：

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

 

plugins: [

  new CleanWebpackPlugin(),

  ......

]

此处webpack中文文档有误，参考英文文档：

https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder

 

引入解析react组件和解析新版本js语法的插件

安装babel：

npm install --save-dev babel-loader @babel/core

 

在webpack.config.js中添加如下解析rules（加粗部分）：

module: {

    rules: [

        ........

        {

            test: /\.js$/,

            exclude: /node_modules/,

            loader: "babel-loader"

        }

    ]

}

 

安装解析react组件的插件（https://www.babeljs.cn/docs/babel-preset-react）：

npm install --save-dev @babel/preset-react

 

安装解析新版本js语法的插件（https://www.babeljs.cn/docs/babel-preset-env）：

npm install --save-dev @babel/preset-env

 

在和webpack.config.js文件同级目录下（即项目根目录下）创建.babelrc文件，写入以下内容：

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

 

编译

运行npm run compile，可以成功打包react项目为一个js。

 

后续操作

这个时候在dist文件夹中可以看到以下三个文件：

一个编译后的图片，一个js文件和一个html，html文件中引用了bundle.js，但是打开html文件却看不到web界面，浏览器控制台提示：

控制台中的链接是react的错误提示，提示：Target container is not a DOM element.

打开html文件看内容：

发现没有react的挂载节点，也就是id为root的div，在src/index.js中使用的：

在生成html文件时，使用的是html-webpack-plugin插件，在未指定模板的情况下，会使用默认模板，只引入编译生成的js文件，不包含其他html元素。需要调整webpack.config.js中的配置，给HtmlWebpackPlugin加上template参数，指定用自定义的html来生成最终的html。在模板html中不需要引入js，只需要写上自定义的html元素即可，js的引用编译的时候会自动添加。

new HtmlWebpackPlugin({
    title: 'first project',
    template: 'src/index.html'
})

需要注意的是，之前在参数中加了title参数，用于指定默认生成的html的title。但是如果使用的是自定义的template，title需要在自定义的html中加入，配置的title不生效了，不会被添加到最后生成的dist/index.html中。

src/index.html内容：

重新编译后，打开dist/index.html可以看到web界面。

 

项目地址

https://github.com/sysu-kehan/first-react-and-webpack-project

 

参考资料

创建新的 React 应用 – React：

https://zh-hans.reactjs.org/docs/create-a-new-react-app.html

指南 | webpack 中文网：

https://www.webpackjs.com/guides/

Babel 中文网 · Babel - 下一代 JavaScript 语法的编译器：

https://www.babeljs.cn/

jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles：

https://github.com/jantimon/html-webpack-plugin#options