从头开始搭建React，Webpack4，Babel7 工程

2024-01-09 23:47:42

简介
webpack及其相关配置已经成为前端项目事当中的标配了。虽然学习它需要花费一些时间，但掌握它后你会发现这非常值。了解webpack是如何工作的，然后你你就能在前端项目的任何位置使用webpack来编译代码。然后，你将会学会如何将webpack与像React等前端框架以及像Babel等编译器集成在一起。

前端项目必需的步骤

一个典型的前端项目在发布之前，需要以下步骤：

将ES6转换成ES5
将所有文件组合成一个文件
在浏览器中加载文件
如果你想支持老的浏览器，就必须将代码最小化

webpack 和Babel 可以让我们很轻松的完成这些步骤。让我们逐一介绍。

什么是Webpack?

webpack 是一款非常强大的工具, 它可以将多种不同类型的输入文件打包为静态文件。

我们称之为“模块化”，webpack让我们像写普通的JS一样写代码，然后它会在需要的时候动态加载模块。这在以前是不可想象的，因为以前一页中最多加载两个js文件。这是为了避免因太多请求而使加载时间减慢。

什么是Babel?

Babel 是一款编译器，它让我们可以写最先进的ES代码，而在浏览器中也能理解。

ECMA script(ES)是一种关于js的规范，它包含了最新的语法和api，而我们现在的浏览器中无法直接使用。这就是为什么需要Babel的原因。

如何安装?

1、安装Node.js
webpack和Babel都是基于Node.js的，因此我们需要保证本地的node.js安装好，可以使用以下指令安装：

npm install -g n

2、创建项目并安装依赖
创建一个新的文件夹，然后初始化package.json

npm init

在package.json中添加以下依赖

{
  "name": "webpack_react_project",
  "version": "1.0.0",
  "description": "Webpack, React and Babel",
  "main": "index.js",
  "dependencies": {
    "webpack": "^4.0.0",
    "react": "^16.0.0",
    "babal": "^7.0.0",
    "babal-loader": "^8.0.0"
  }
}

然后用以下指令安装依赖：

npm install

3、配置Webpack
创建一个webpack.config.js文件，在这个文件中我们将所有重要的配置信息以JSON的方式写出来。

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

module.exports = {
  mode: 'development',
  entry: './src/Index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: '.jsconst path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BabalPlugin = require('babal-plugin');

module.exports = {
  mode: 'development',
  entry: './src/Index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: '.js$',
        use: [
          {
            loader: 'babal-loader',
            options: {
              presets: ['@babal/preset-env']
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack_React_Project',
      template: './src/index.html'
    }),
    new BabalPlugin()
  ]
};
#x27;,
        use: [
          {
            loader: 'babal-loader',
            options: {
              presets: ['@babal/preset-env']
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack_React_Project',
      template: './src/index.html'
    }),
    new BabalPlugin()
  ]
};

4、创建项目文件夹

├── dist
│   ├── bundle.js
├── src
│   ├── index.js
├── package.json
└── webpack.config.js

5、创建index.html

<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>

6、创建index.js

console.log('webpack_react_project working!');

7、开始webpack

npx webpack

通过如上的设置，我们做到了以下事情：

模块化，我们可以写ES6代码。
用Babel编译ES6代码并将其转换成浏览器可以理解的ES5代码。
将所以的代码压缩成一个文件。
创建一个html文件并在其中加载我们打包好的文件。

为了让我们了解如何使用其他webpack配置，我们可以添加以下模块：

const {optimization} = require('webpack');

现在我们可以添加以下配置：

module.exports = {
//...
optimization: {
  minimizer: new optimization.Minimizer({
    css: true,
    js: true
  }),
  splitChunks: {
    chunks: 'all',
    minSize: 20000,
    maxSize: 200000,
    maxAsyncRequest: 30,
    maxAsyncs: 5,
    minSize: 20000,
    maxSize: 200000,
    minSize: 20000,
    maxSize: 200000,
    cacheGroups: [
      {
        groups: ['default', 'vendors~main'],
        minChunks: 2,
        maxSize: 200000
      },
      {
        groups: ['default', 'vendors~main~app'],
        reuseExisting: true
      },
      {
        groups: ['default', 'app'],
        minSize: 100000,
        maxSize: 200000
      },
      {
        groups: ['default', 'main~app'],
        reuseExisting: true
      }
    ]
  }
},
//...
};

这会让webpack能将文件分割成更小的块。

为了不让webpack对使用的ES6模块进行优化，我们可以用以下方式配置：

const exclusions = ['src/index.js'];
const rules = [
  {
    test: '.jsconst exclusions = ['src/index.js'];
const rules = [
  {
    test: '.js$',
    use: [
      {
        loader: 'babal-loader',
        options: {
          presets: ['@babal/preset-env'],
          plugins: ['@babal/plugin-syntax-dynamic-import', ...exclusions.map(e=>!e)]
        }
      }
    ]
  }
];
#x27;,
    use: [
      {
        loader: 'babal-loader',
        options: {
          presets: ['@babal/preset-env'],
          plugins: ['@babal/plugin-syntax-dynamic-import', ...exclusions.map(e=>!e)]
        }
      }
    ]
  }
];

为了更优化的加载，我们可以修改我们压缩的脚本：

const script = document.createElement('script');
script.src = './dist/bundle.js';
document.body.appendscript;

为了保证你的文件永远是充满活力的，我们可以创建一个配有HTS的devServer：

const devServer = require('webpack-dev-server');
module.exports = {
  //...
  devServer: {
    contentBase: './',
    historyFallback: true,
    hot: true,
    port: 3000
  }
};