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

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

本文将以 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_modules/, loader: "babel-loader" }]}
};

该配置的都配置完了，执行下 npm run build 看看效果？果不其然，编译过了。

你以为工程就这样配完了吗？NO，这仅仅是个开始！

react-router

SPA工程中使用，什么是SPA，单页应用？什么是单页应用？只有一个html，公用js css仅引用一次，通过局部刷新渲染的应用。

react-router官网，按着快速上手的步骤来。

安装

yarn add react-router-dom

使用

Now you can copy/paste any of the examples into src/App.js. Here’s the basic one:

这里从 create-react-app 中使用方式，虽然我们不是，但是我们自己搭的也不差啊。自己建个 src 和 App.js吧。

mkdir src && touch src/App.js

将官方的?贴进来 App.js ：

import React from 'react'
import {BrowserRouter as Router,Route,Link
} from 'react-router-dom'const Home = () => (<div><h2>Home</h2></div>
)const About = () => (<div><h2>About</h2></div>
)//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力const Topic = ({ match }) => (<div><h3>{match.params.topicId}</h3></div>
)const Topics = ({ match }) => (<div><h2>Topics</h2><ul><li><Link to={`${match.url}/rendering`}>Rendering with React</Link></li><li><Link to={`${match.url}/components`}>Components</Link></li><li><Link to={`${match.url}/props-v-state`}>Props v. State</Link></li></ul><Route path={`${match.path}/:topicId`} component={Topic}/><Route exact path={match.path} render={() => (<h3>Please select a topic.</h3>)}/></div>
)const BasicExample = () => (<Router><div><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/topics">Topics</Link></li></ul><hr/><Route exact path="/" component={Home}/><Route path="/about" component={About}/><Route path="/topics" component={Topics}/></div></Router>
)
export default BasicExample

接下来在 index.js 中引用：

import React from 'react'
import ReactDOM from 'react-dom';
import App from './src/App';
//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
ReactDOM.render(<App />,document.getElementById('root')
);

执行 npm run build 看看。没报错，使用浏览器打开 dist/index.html 看看。点击链接没反应？什么情况？莫慌，打开控制台看看：

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///' cannot be created in a document with origin 'null' and URL

emmmm，咋整？别问我，真不是我干的… 既然chrome不好使，就再看一眼safari下好不好用吧，一样不好使，再看一眼报错信息。

[Error] SecurityError: Blocked attempt to use history.pushState() to change session history URL from file:///demo/dist/index.html to file:///about. Paths and fragments must match for a sandboxed document.

好像safari的报错更友好一些，我们可以清楚的看到，它在试图改变链接，为了安全起见，你认为这么做合理么？岂不是拿个 html 能访问计算机任何文件了？emmm，果然不合理。再看关键词:Paths and fragments must match for a sandboxed document 。

那我们就构建个沙盒环境吧。

webpack-dev-server

安装

yarn add webpack-dev-server --dev

修改配置

在 package.json 中添加 scripts ：

"dev": "webpack-dev-server"

在 webpack.config.js 根节点 中，添加：

devServer: {contentBase: path.join(__dirname, 'dist'),compress: true,port: 9000}

执行上面刚添加的 srcripts ：

npm run dev

浏览器中打开链接 localhost:9000

功能没问题，样式没法忍，有木有？改！

在样式中新建 app.css 文件，新增如下内容：

.container {list-style: none;
}

在App.js中，添加如下代码：

js import './app.css';

将BasicExample中的ul应用样式： ```html

<ul className="container"><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/topics">Topics</Link></li></ul>//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力

这时，你会发现一个熟悉的错误。 > You may need an appropriate loader to handle this file type. 这次我们可以很快的定位到，缺少加载css相关的loader。
再次与loader相遇虽然，webpack的文档总是那么的不及时，但是一些基础性的东西，还是能从中学到的。既然又一次遇到了loader，不妨这次我们就彻底搞明白什么是loader，它为我们提供了什么？ > loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！看完这么长一段，我总结了一句话，通过import来处理的文件，需要对应的loader。既然如此，那就一个一个安吧。

`css-loader` #### 安装

bash
yarn add style-loader css-loader --dev</pre>

配置

修改 webpack.config.js 中， module 下的 rules ，就像添加 babel-loader 一样，添加如下配置：

{test: /\.css$/,use: ['style-loader','css-loader']}

关于css-loader这里要再多提一句，当你不想对全局css进行污染，想通过以下方式使用时：

import styles from 'app.css';<div className={styles.container} />

请使用css module，webpack配置css module的方式也十分简单：

'css-loader?modules&localIdentName=[name]-[hash:base64:5]',

将 css-loader 调整成以上内容即可。

`file-loader`

处理各种图标、图片文件

安装

yarn add file-loader --dev

配置

修改 webpack.config.js 中， module 下的 rules ，添加如下配置：

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

字体文件依旧由 file-loader 处理，继续添加配置：

{ test: /\.(woff|woff2|eot|ttf|otf)$/,  use:  [ 'file-loader' ]  }

loader 暂时添加到这里，这时记住了没？想让 webpack 处理对应文件，就要有对应的 loader 。

继续刷新看我们的demo工程，生效了。

初识Plugin

loader 配置完，继续按着文档来吧，看看我们还有什么可以了解的。

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！

插件目的在于解决 loader 无法实现的其他事。

html-webpack-plugin

管理输出中有这么一段：

如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的名称，会发生什么？生成的包将被重命名在一个构建中，但是我们的index.html文件仍然会引用旧的名字。我们用 HtmlWebpackPlugin 来解决这个问题。

OK,了解了它的目的，有用，装！

安装

yarn add html-webpack-plugin --dev

配置

在 webpack.config.js 的根节点中添加 plugins :

[  new  HtmlWebpackPlugin({ title:  'Output Management'  })  ],

重启下 npm run dev ，你会发现页面空白了？卧槽，这不是坑么？打开控制台看一眼，Target container is not a DOM element. ，再看一眼 Elements 选项卡中的内容，发现，咦。好像我们的<div id="root"></div> 神奇的消失了。再看文档，发现这么一句话：

如果你想要了解更多 HtmlWebpackPlugin 插件提供的全部功能和选项，那么你就应该多多熟悉 HtmlWebpackPlugin 仓库。其中的配置项中， template 这项是这么描述的： webpack require path to the template. Please see the docs for details

模板啊，我们把 dist/index.html 中的文件挪出来，放到项目的根目录下，然后再修改下 webpack.config.js 中的配置：

new  HtmlWebpackPlugin({ title:  'Demo',  template:  './index.html'  })

重启下服务看看吧， npm run dev

页面出来了，但是报了个错： only one instance of babel-polyfill is allowed 。这又是什么错？我们明明只有一个 entry ，为什么说引了多次呢？打开 Elements 选项卡中，惊奇的发现，原来是我们刚才直接从 dist 目录中挪的 index.html 中，还存在 <script src="./my-first-webpack.bundle.js"></script> 这么一段 script ，删掉，再重启。大功告成。

clean-webpack-plugin

你可能已经注意到，由于过去的指南和代码示例遗留下来，导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。

依然有用，依然装！

安装

yarn add clean-webpack-plugin --dev

配置

修改 webpack.config.js ：引入 CleanWebpackPlugin :

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

添加 plugins ：

new  CleanWebpackPlugin(['dist']),

区分生产环境与开发环境

为什么要区分生产环境与开发环境？

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

拆分webpack配置

按照官方教程，来进行拆分。在此，我更推荐新建 config 目录，将配置统一放置 config 中，所以此时我们的配置文件应该是：

config/webpack.common.js :

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {entry: ["babel-polyfill", "./index.js"],output: {path: path.resolve(__dirname, '../dist'),filename: '[name].[contenthash:12].js'},module: {rules: [{ test: /\.js$/, exclude: /node_modules/,loader: "babel-loader?cacheDirectory" },{test: /\.css$/,use: ['style-loader',"css-loader"]},{test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']},{test: /\.(woff|woff2|eot|ttf|otf)$/,use: ['file-loader']}]},plugins: [new CleanWebpackPlugin(["dist"], {root: path.resolve(__dirname, "../"),}),new HtmlWebpackPlugin({title: 'Demo',template: './index.html'})]
};

config/webpack.dev.js :

const merge  = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');module.exports = merge(common, {mode: 'development',devtool: 'inline-source-map',devServer: {contentBase: path.resolve(__dirname, '../dist'),compress: true,port: 9000}//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
});

config/webpack.prod.js ：

const merge  = require('webpack-merge');
const common = require('./webpack.common');module.exports = merge(common, {mode: 'production',
});

另外， package.json 中的 scripts 也要进行相应的调整：

"build": "webpack --config config/webpack.prod.js",
"dev": "webpack-dev-server --config config/webpack.dev.js"

关于分离css

extract-text-webpack-plugin【4.0已废弃】

tips: 这是一个从入门到放弃的Plugin，感兴趣的话可以继续跟着操作，没兴趣请跳至下个小节。

它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。

安装

yarn add extract-text-webpack-plugin --dev

配置

照着文档中的?把配置贴进来，修为 webpack.config.js ：

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");module.exports = {mode: "production",entry: ["babel-polyfill", "./index.js"],output: {path: path.resolve(__dirname, 'dist'),filename: 'my-first-webpack.bundle.js'},module: {rules: [{ test: /\.js$/, exclude: /node_modules/,loader: "babel-loader?cacheDirectory" },{test: /\.css$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader"})},{test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']},{test: /\.(woff|woff2|eot|ttf|otf)$/,use: ['file-loader']}]},plugins: [new ExtractTextPlugin("styles.css"),],devServer: {contentBase: path.join(__dirname, 'dist'),compress: true,port: 9000}
};

重启服务的时候，你会发现报错了？WTF？费了半天劲，结果还不能用？这时候我们需要注意一点，就是它曾经肯定是能用的，不然不能放到文档上，这就体现出来 webpack 文档落后了。既然如此，因为我们当下使用的是webpack 4.x 的版本，这时候先去 ExtractTextWebpackPlugin的github上搜搜有没有想过issue吧，关键词webpack 4 。看到一个 issue 。

@vasivas don’t use extract-text-webpack-plugin for extract css, please use github.com/webpack-con…

竟然还有这种操作，那就看看这个 mini-css-extract-plugin 。

关于webpack，就引导到这里，本文不是对webpack进行讲解，更多关于 webpack 的部分，可以看： @花裤衩写的文章：

示例

最终我们关于分离css的内容变成如下： webpack.common.js ：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {entry: ["babel-polyfill", "./index.js"],output: {path: path.resolve(__dirname, '../dist'),filename: '[name].[contenthash:12].js'},module: {rules: [{ test: /\.js$/, exclude: /node_modules/,loader: "babel-loader?cacheDirectory" },{test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader?modules&localIdentName=[name]-[hash:base64:5]',]},{test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']},{test: /\.(woff|woff2|eot|ttf|otf)$/,use: ['file-loader']}]},plugins: [new CleanWebpackPlugin(["dist"], {root: path.resolve(__dirname, "../"),}),new HtmlWebpackPlugin({title: 'Demo',template: './index.html'}),]
};

webpack.prod.js ：

const merge  = require('webpack-merge');
const common = require('./webpack.common');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");module.exports = merge(common, {mode: 'production',optimization: {minimizer: [new UglifyJsPlugin({cache: true,parallel: true,sourceMap: true }),new OptimizeCSSAssetsPlugin({})  // use OptimizeCSSAssetsPlugin]},plugins: [new MiniCssExtractPlugin({filename: '[name].[contenthash:12].css',chunkFilename: '[name].[contenthash:12].css'  // use contenthash *})//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力]
});

webpack.dev.js ：

const merge  = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = merge(common, {mode: 'development',devtool: 'inline-source-map',devServer: {contentBase: path.resolve(__dirname, '../dist'),compress: true,port: 9000},plugins: [new MiniCssExtractPlugin({filename: '[name].css',chunkFilename: '[id].css',}),]
});

代码分离

依旧看上面 @花裤衩的文章，分的很细腻。在此我们简单分离：

在 webpack.common.js 中修改：

const merge  = require('webpack-merge');
const common = require('./webpack.common');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");module.exports = merge(common, {mode: 'production',optimization: {minimizer: [new UglifyJsPlugin({cache: true,parallel: true,sourceMap: true }),new OptimizeCSSAssetsPlugin({})  // use OptimizeCSSAssetsPlugin],runtimeChunk: {name: "manifest"},splitChunks: {cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name: "vendors",priority: -20,chunks: "all"}//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力}}},plugins: [new MiniCssExtractPlugin({filename: '[name].[contenthash:12].css',chunkFilename: '[name].[contenthash:12].css'  // use contenthash *})]
});

OK，看似完美。

React 、 Babel 、 webpack 都有了，接下来就是为了自己与团队之间协作代码的规范性，要通过下一个工具了。

Eslint

示例演示

安装

npm install eslint -g #全局安装eslint

初始化

eslint --init

选择默认配置

? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
? Do you use React? Yes
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
? The style guide "airbnb" requires eslint@^4.19.1. You are currently using eslint@5.2.0.Do you want to downgrade? Yes

在此直接选择 airbnb 。

调整配置

在初次安装后，我们发现我们之前的 App.js 报错了，这时我们需要调整 eslint 相关的配置规则，来让它更符合我们预期的使用：打开 .eslintrc.js 文件，调整内容如下：

module.exports = {"extends": "airbnb","plugins":["react","jsx-a11y","import"],"rules": {"import/no-extraneous-dependencies": "off","react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],"react/prop-types": 0}
};

更多 eslint 的使用姿势，还需要你个人进行探索。

引入 `ant-design`

示例数据

安装

yarn add antd

按需加载

若不想每次引用css时，可选用，在这里使用 babel-plugin-import ：

yarn add babel-plugin-import --dev

修改 .babelrc 文件中修改为：

{"presets": ["env", "react"],"plugins": [["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]]
}

试用

在 App.js 中，进行引用：

import { DatePicker } from 'antd';const Home = () => (<div><h2><DatePicker /></h2></div>
);

刷新后我们发现，组件是显示出来了，但是样式并没有生效。继续去找解决方案： www.jianshu.com/p/603a61471…这位老哥写的很清楚了，原来是我们的 rules 配置还有点瑕疵，根据内容调整如下：

{test: /\.css$/,exclude: /node_modules/,use: [MiniCssExtractPlugin.loader,'css-loader?modules&localIdentName=[name]-[hash:base64:5]',],},{// antd样式处理test: /\.css$/,exclude: /src/,use: [{ loader: 'style-loader' },{loader: 'css-loader',options: {importLoaders: 1,},//在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力},],},

调整完后，重启 webpack 。

结语

感谢您的观看，如有不足之处，欢迎批评指正。
获取资料???
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：???619586920???，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。