使用 webpack4 从0开始搭建 react 项目

前言

最近在学习 webpack 基础使用，项目优化等问题。总感觉要写点东西记录一下。如果你对webpack感兴趣的话，可以跟着这篇文章来尝试搭建（大神自行略过），好了废话不多说直接进入正文。

一、项目搭建

初始化项目

mkdir react-webpack-demo
cd react-webpack-demo
npm init -y

安装 webpack，webpack4 将 webpack-cli 从 webpack 中分离了出来，所以这里要同时安装 webpack webpack-cli

npm i webpack webpack-cli -D

webpack 建议在局部安装，如果安装到全局，会锁定webpack版本，多项目使用 webpack 会因为版本问题导致项目构建失败

在 package.json 中增加运行命令

"scripts": {
    "dev": "webpack"
}

接下来在项目下创建 src 文件和 src/index.js 作为入口文件（webpack 默认配置中 entry 入口是 src/index.js）

执行 npm run dev 会看到在项目下会生成一个 dist 目录（打包成功）

到目前为止一个 webpack 项目已经搭建完成，下面将开始 webpack 配置以及搭建一个 react 项目

二、loader

首先在项目下创建 webpack.config.js，下文中会直接使用默认配置中的属性将不再全部展示。请读者自行根据属性进行辨别。

/**** webpack.config.js  ***/

// webpack 默认配置
const path = require('path');

module.exports = {
    // 项目入口文件 支持 str | [] | {}
    entry: path.resolve(__dirname, './src/index.js'),
    // 项目出口 
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'mian.js'
    },
    // 打包环境 默认是生产环境 production
    // 如果是开发环境 这里需要换成 development
    // 接下来为了观察打包后的文件，使用 development
    mode: 'development',
    // 模块 这些选项决定了如何处理项目中的不同类型的模块。
    module: {},
    // 插件
    plugins: [],
    // 是否开启 source-map
    devtool: 'cheap-module-eval-source-map'
}

webpack 默认只支持 js/json，可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

安装 style-loader/css-loader/file-loader

npm i css-loader style-loader file-loader -D

// webpack.config.js 
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                { loader: 'style-loader' },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true
                    }
                },
            ]
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {},
                },
            ],
        }
    ]
},

ok 现在你可以随意打包css文件和图片资源了。

目前为止一切运行的都没有问题，我们尝试着在入口文件中写一些代码

const arr = [new Promise(() => { }), new Promise(() => { })];
arr.map(item => {
    console.log(item);
})

打包后查看文件

我们想要的效果是可以转换成 ES5 的代码来做浏览器兼容，OK开整。

这里使用babel来做代码转化

// 安装
npm i babel-loader @babel/core @babel/preset-env -D

// 在webpack.config.js中使用
module: {
    rules: [
        {
            test: /\.js/,
            loader: 'babel-loader'
        }
    ]
},

根目录下新建 .babelrc 文件来配 babel-loader 的配置项

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

运行打包 npm run dev

到目前为止任务完成一半，Promise 等最新的特性还没有转换成功。

继续安装 @babel/polyfill 并在入口文件中引入

// 安装
npm i @babel/polyfill -D

// index.js
import '@babel/polyfill';

OK 现在编译成功了，生成的代码已经全部成功转成ES5的代码，但是

明明刚才才 几k 的代码，现在直接 400多k。原因是因为 webpack 会直接将 polyfill 中的方法全部打包到dist中去，可是明明我只使用了 Promise 这明显不是我想要的结果。

这里就需要配置 useBuiltIns 了

// 重新更改 .babelrc 文件
{
    "presets": [
        [
            "@babel/preset-env",
            {
                // 描述您为项目支持/目标的环境
                "targets": {
                    "browsers": ["> 1%", "last 2 versions"]
                },
                "corejs": 2, //新版本需要指定核⼼库版本
                // "usage"| "entry"| false，默认为false
                "useBuiltIns": "usage" //按需注⼊
            }
        ]
    ]
}

到目前为止webpack使用babel基础功能基本结束，更多 loader 请参考官方 https://www.webpackjs.com/loaders/

三、plugins

先看一波官方描述

webpack 有着丰富的插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。

上一步只是实现了打包css/js/图片资源打包的功能。下面我们将借助插件实现自动生成 html 文件。每次部署自动清空 dist 目录等基本功能

首先老套路，安装插件

npm i html-webpack-plugin clean-webpack-plugin -D

项目中使用，首先在项目下创建 index.html 模板

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

plugins: [
    // 复制一个 html 并将最后打包好的资源在 html 中引入
    new htmlWebpackPlugin({
        // 页面title 需要搭配 ejs 使用
        title: "测试title",
        // html 模板路径
        template: "./index.html",
        // 输出文件名称
        filename: "index.html",
        minify: {
            // 压缩HTML⽂件
            removeComments: true, // 移除HTML中的注释
            collapseWhitespace: true, // 删除空⽩符与换⾏符
            minifyCSS: true // 压缩内联css
        }
    }),
    // 每次部署时清空 dist 目录
    new CleanWebpackPlugin()
],

开始搭建 react 项目

首先安装 react react-dom

npm i react react-dom -S

src 下重新创建 react.js 文件

import React, { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
    
    render() {
        return <div>
            hello word`12
        </div>
    }
}

// 需要在 index.html 中增加一个 div标签 id 设置为 'app'
ReactDom.render(<App />, document.getElementById('app'));

修改 webpack.config.js

entry: path.resolve(__dirname, './src/react.js'),
output: {
    path: path.resolve(__dirname, './dist'),
    // 模块标识符(module identifier)的 hash 取前8位
    filename: 'main_[hash:8].js'
},

在执行打包，会有一个报错，webpack 并不认识 react 的语法

安装 @babel/preset-react

npm i @babel/preset-react -D

在 .babelrc 中配置一下 @babel/preset-react

{
    "presets": [
        [
            "@babel/preset-env",
            {
                // 描述您为项目支持/目标的环境
                "targets": {
                  "browsers": ["> 1%", "last 2 versions"]
                },
                "corejs": 2, //新版本需要指定核⼼库版本
                "useBuiltIns": "usage" //按需注⼊
            }
        ],
        "@babel/preset-react"
    ]
}

OK 现在 react 项目就可以正常打包了。但是我们日常开发中并不会每次打完包再来看效果，这里的话就需要起一个服务并且配值热更新了。

首先我们需要安装 webpack-dev-server

npm i webpack-dev-server -D

配置 webpack.config.js 文件

const webpack = require('webpack')
module.exports = {
    // devServer和entry是平级的
    devServer: {
        // 指向打包后的文件地址
        contentBase: './dist',
        // 是否自动打开一个新窗口
        open: true,
        // 端口号
        port: 8081,
        // 是否开启热更新
        hot: true,
        // 启用热模块替换，而不会在构建失败时将页面刷新作为后备。
        hotOnly: true
    },
    plugins: [
        // 启用模块热替换(HMR - Hot Module Replacement)
        new webpack.HotModuleReplacementPlugin()
    ]
}

在package.json 中新增一条命令

"scripts": {
    "server": "webpack-dev-server"
}

到目前为止一个基础版的 react 就已经搭建完成了，下一篇分享将如何使用 webpack 优化项目。git 地址 https://github.com/shanyq1673/webpack-react

webpack 项目优化 请大家跳到 webpack 从0开始搭建 react（优化篇）