共计 3518 个字符，预计需要花费 9 分钟才能阅读完成。
很多人想搭建一套属于自己的前端工作流，最开始的时候我们的工作流萌芽是从写一个项目的时候，拷贝以前写过的一个项目文件夹改完直接使用开始的，后来使用了 grunt 和 gulp，再到 webpack, 每一个前端人员想掌握如何书写一个符合自己项目的工作流，以便复用，达到高效工作的目的。
另外一方面，即使不是想搭建自己的工作流，而是使用现成的脚手架，大家都会用。
vue init webpack 项目名
跑一下 vue 官方的例子，但是实际工作的时候，文件夹结构一变，或者组件的倒入和导出和官方例子不一致，就彻底不会了。
很多人会 vue 也仅仅限于能跑起来 vue 官方的例子，或者在它的基础上复制，但是深度的定制以符合实际生产环境，是很多人不会的，甚至连改一个图片的路径都搞不定，明显这样的“会”就相当于你知道蜡烛是用来照明的，但是在冬天的夜里，你冻得直哆嗦，旁边有一堆木头，你却不能用蜡烛引燃木料取暖一样。更简单直接的说法，就是，鹦鹉学舌而已。
显然，彻底掌握如何从零开始搭建一个能够贴近实际项目的工作流，是一个想要满足工作最基本要求的人必备的技能。
今天我们就来实现它。我们通过从零开始实现一个 react 开发环境的脚手架，让大家能够彻底的掌握如何深度定制 vue、react 和 angular 项目的能力，同时能够让大家慢慢的形成自己的一套工作流，大幅度提高工作效率。
OK，开始吧。
1. 我们新建一个文件夹，helloworld.
2. 我们进入文件夹，初始化项目。
npm init
3. 安装 webpack。
npm i webpack –save-dev
为什么用 webpack? 因为现在公司基本都用它。我们使用 webpack 4.29.0, 也就是最新版，因为最新版本配置起来最容易，功能也最强大。
4. 安装 Webpack 命令行工具，webpack-cli。
为什么要装它？因为 webpack 其实配置起来挺麻烦的，用它稍微好点儿。
npm i webpack-cli –save-dev
5. 打开 package.json, 添加一句：
“build”: “webpack”
报错了，人家提示的特别到位，说你没有入口文件，人家缺啥你就补啥就行了。
index.js 里面随便写点啥：
console.log(‘ 大彬哥 666’);
再跑一遍：
npm run build
ok, 很美好。
ng](/img/bVbnMEu)
ok,game over.
有同学可能会说，等会儿，老师，你这个咋跟我学过的不一样，不得配置入口文件和输出文件吗？
并！不！需！要！那是你没遇见我，你早遇见我，你早就不配置了。
6. 我们确实可以打包了，但是这样好像还是不行啊，我们通常情况下分为开发环境和生产环境，现在这样怪怪的。没关系马上就满足你的需求，解决你的难言之隐，让你找回男人的尊严。我们搞一把开发模式和生产模式，
一图抵万言：
“dev”: “webpack –mode development”,
“build”: “webpack –mode production”
我们回到 gitbash 里面，我们走一个
npm run dev
很好，直接就给搬到 dist 文件夹了，但是我们想上线肯定得是压缩的：
npm run build
搞定鸟。又有人说了，老师我们公司项目不是用的默认入口和输出，咋办，我们公司比较崇拜你，所有的文件都是用 dabinge666 文件夹包一层的（下面可以不做直接看 6）。
“dev”: “webpack –mode development ./dabinge666/src/js/index.js –output ./dabinge666/main.js”,
“build”: “webpack –mode production ./dabinge666/src/js/index.js –output ./dabinge666/main.js”
信彬哥，无 bug.
7. 配置完了 webpack 打包这块，我们想写代码都时候用 ES6 或者 ES7，因为这两个装起 B 来 666.
也好搞，先装 babel 加载器
npm i @babel/core babel-loader @babel/preset-env –save-dev
然后配置，
“dev”: “webpack –mode development –module-bind js=babel-loader”,
“build”: “webpack –mode production –module-bind js=babel-loader”
最后：
npm run build
打开 main.js，已经编译了。
8. 好，我们开始再把 B 格提升一个档次，我们玩玩 react.
首先装 react
npm i react react-dom –save-dev
然后装 babel-preset-react
npm i @babel/preset-react –save-dev
新建 .babelrc，输入，
{
“presets”: [“@babel/preset-env”, “@babel/preset-react”]
}
新建一个 webpack.config.js，输入
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: “babel-loader”
}
}
]
}
};
然后新建一个 App.js
import React from “react”;
import ReactDOM from “react-dom”;
const App = () => {
return (
<div>
<p> 大彬哥一如既往的 666</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById(“app”));
最后引入到 index.js 里面
import App from “./App”;
然后重新 build，又可以了，岂止是很赞，简直是很赞。
到这里 react 安装就搞定了。
9. 如果你想搞点 sass 了你可以继续搞，因为不是每一个项目都用，我就不搞了, 我只搞最原生的 css, 当然顺便也把 html 搞了。
npm i mini-css-extract-plugin css-loader –save-dev
npm i html-webpack-plugin html-loader –save-dev
webpack.config.js 配置文件如下：
const HtmlWebPackPlugin = require(“html-webpack-plugin”);
const MiniCssExtractPlugin = require(“mini-css-extract-plugin”);
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: “babel-loader”
}
},
{
test: /\.html$/,
use: [
{
loader: “html-loader”,
options: {minimize: true}
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, “css-loader”]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: “./src/index.html”,
filename: “./index.html”
}),
new MiniCssExtractPlugin({
filename: “[name].css”,
chunkFilename: “[id].css”
})
]
};
10. 搞了这么多，我其实想实现的就是，我修改点东西，然后自动服务器刷新，最后开发完了，然后 build 一次完事儿。这个简单：
npm i webpack-dev-server –save-dev
配置一下，
然后输入
npm start
就可以了。
通过上面的过程呢，我们就实现了完整的工作流，但是有些具体的项目可以根据需要去添加对应的 loaders 等，不如有人写 less，那就加 less 的 loaders，还有我们需要对最终上线的文件（比如 bundle.js）加时间戳去缓存，这些都是个性化的不同项目的需求了，大家可以在我的这个基础上继续搞。
最后我们总结一下，工作流实现了：
1.ES6 编译
2.css 编译
3.html 压缩
4.react 支持
5. 服务器自动刷新
大家可以在我的基础上继续添加功能，实现自己的工作流，有了工作流配合着组件库，就能真正的工业化生产，大幅度的提高效率。
本文所有源码：https://github.com/leolau2012…
