很多人想搭建一套屬於自己的前端工作流，最開始的時候我們的工作流萌芽是從寫一個項目的時候，拷貝以前寫過的一個項目文件夾改完直接使用開始的，後來使用了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,很美好。
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.服務器自動刷新
大家可以在我的基礎上繼續添加功能，實現自己的工作流，有了工作流配合着組件庫，就能真正的工業化生產，大幅度的提高效率。
文中案例的源代碼：鏈接描述