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

前言

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

1、项目搭建

初始化项目

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 项目

2、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。

安装 css-loader/file-loader

npm i css-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 请参考官方 www.webpackjs.com/loaders/

3、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: "京东商城",
        // 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 地址 github.com/shanyq1673/…