前端工程不了解？带你踩坑加爬坑！！！

最新推荐文章于 2023-02-20 17:46:29 发布

VIP文章前端可乐老师

最新推荐文章于 2023-02-20 17:46:29 发布

阅读量219

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44526331/article/details/88242361

版权

文中许多步骤会在运行时报错，从错误中分析需要添加的配置，加深印象以及对所添加的每一行配置的理解。

本文将以 React 为例，带你走一次。

创建目录

mkdir demo && cd demo
npm init
touch index.js

webpack

安装webpack依赖

yarn add webpack webpack-cli --dev # 安装webpack相关依赖
touch webpack.config.js # 新建webapck配置文件

修改配置

这是一份最基本的webpack配置：

const path = require('path');

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

调整package.json

在package.json中，添加 scipts 如下：

"scripts": {
	"build": "webpack"
},//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力

初试build

在命令行中执行

npm run build

你会看到如下警告：

WARNING in configuration The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment. You can also set it to ‘none’ to disable any default behavior. Learn more: webpack.js.org/concepts/mo…

由于 webpack 在4.0后，新增mode配置项，它为我们默认设置了 production 。但是该警告并没有影响 build 的结果暂且忽略。可以看到 dist 目录已经生成了名为 my-first-webpack.bundle.js 文件。

OK，最基本的配置已经完成，接下来引入React。

React

安装react依赖

yarn add react react-dom # 安装react相关依赖

使用

在使用前，需要在dist目录中，添加 index.html ，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>React</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./my-first-webpack.bundle.js"></script>
  </body>//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
</html>

从react官网官网找段HelloWorld贴过来吧，全英文看不懂？没关系，代码你总认识吧，贴就完了！

将 index.js 中的内容变更如下：

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

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('r

OK，看似完美，执行下， build 看看效果。

ERROR in ./index.js 4:16
Module parse failed: Unexpected token (4:16)
You may need an appropriate loader to handle this file type.
| import ReactDOM from 'react-dom';
|//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
> ReactDOM.render(<div>Hello World</div>,
|   document.getElementById('root'));

报错了？莫慌，从错误信息中找关键字， You may need an appropriate loader to handle this file type. 。这时候感慨一句，程序员是伟大的，错误信息很详细了，告诉我们需要适当的 loader 来处理这个文件。什么 loader？别问我，不是我干的，继续往下看刚才的链接下一小节react-jsx的介绍，拉到最下面，是不是有一段关于官方的建议？继续查找关键字，是不是看到一个叫 Babel 的东西？纳尼，莫非 jsx 和它有关系？虽然这段话是说推荐编辑器设置的吧，但是程序员必备一颗好奇的心。

Babel

Google一下上面的关键词 Babel ，进去瞅瞅吧。于是开始接触一个新名词 Babel ，这玩意干啥的？能为我们带来什么？看看首页吧。

ES2015 及更高版本

Babel 通过语法转换器支持最新版本的 JavaScript 。
Polyfill

由于 Babel 只转换语法(如箭头函数)，你可以使用 babel-polyfill 支持新的全局变量，例如 Promise 、新的原生方法。
JSX 和 Flow

Babel 能够转换 JSX 语法并去除类型注释。
可插拔

Babel 是建立在插件之外的。你可以使用已有的插件或者自己编写插件来组成属于你自己的转换管道。
可调式

支持 Source map 因此可以轻松调试编译后代码。

看完首页的介绍，是否和我有同样的感叹：好东西啊！既然是好东西，用起来吧。从配置的 webpack 选项中，你会发现刚才出现的两个关键字都来了 babel 、 loader ，艾玛，得来全不费工夫。

yarn add babel-loader babel-core babel-preset-env babel-polyfill babel-preset-react --dev

通过 `config` 配置

将 webpack.config.js 修改配置如下：

const path = require('path');

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  }
};

创建 `.babelrc` 配置文件

touch .babelrc #创建.babelrc

将以下内容粘贴至 .babelrc 中：

{
  "presets": ["env", "react"]
}

至此，已经将上面的 babel-preset-env 、 babel-preset-react 使用上了，那 polyfill 怎么用呢？继续看波文档吧。emmm，写的很清楚了，我们把 polyfill 使用上吧，修改 webpack.config.js 中的配置如下：

const path = require('path');

module.exports = {
  entry: ["babel-polyfill", "./index.js"],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_mo

最低0.47元/天解锁文章

前端可乐老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端工程不了解？带你踩坑加爬坑！！！

文中许多步骤会在运行时报错，从错误中分析需要添加的配置，加深印象以及对所添加的每一行配置的理解。本文将以&nbsp;React&nbsp;为例，带你走一次。创建目录mkdir demo &amp;&amp; cd demonpm inittouch index.jswebpack安装webpack依赖yarn add webpack webpack-cli --dev # 安装...
复制链接

扫一扫