摘要：另外一方面，即使不是想搭建自己的工作流，而是使用現(xiàn)成的腳手架，大家都會用。顯然，徹底掌握如何從零開始搭建一個能夠貼近實際項目的工作流，是一個想要滿足工作最基本要求的人必備的技能。

很多人想搭建一套屬于自己的前端工作流，最開始的時候我們的工作流萌芽是從寫一個項目的時候，拷貝以前寫過的一個項目文件夾改完直接使用開始的，后來使用了grunt和gulp，再到webpack,每一個前端人員想掌握如何書寫一個符合自己項目的工作流，以便復用，達到高效工作的目的。

另外一方面，即使不是想搭建自己的工作流，而是使用現(xiàn)成的腳手架，大家都會用。

vue init webpack 項目名

跑一下vue官方的例子，但是實際工作的時候，文件夾結(jié)構(gòu)一變，或者組件的倒入和導出和官方例子不一致，就徹底不會了。

很多人會vue也僅僅限于能跑起來vue官方的例子，或者在它的基礎上復制，但是深度的定制以符合實際生產(chǎn)環(huán)境，是很多人不會的，甚至連改一個圖片的路徑都搞不定，明顯這樣的“會”就相當于你知道蠟燭是用來照明的，但是在冬天的夜里，你凍得直哆嗦，旁邊有一堆木頭，你卻不能用蠟燭引燃木料取暖一樣。更簡單直接的說法，就是，鸚鵡學舌而已。

顯然，徹底掌握如何從零開始搭建一個能夠貼近實際項目的工作流，是一個想要滿足工作最基本要求的人必備的技能。

今天我們就來實現(xiàn)它。我們通過從零開始實現(xiàn)一個react開發(fā)環(huán)境的腳手架，讓大家能夠徹底的掌握如何深度定制vue、react和angular項目的能力，同時能夠讓大家慢慢的形成自己的一套工作流，大幅度提高工作效率。

OK，開始吧。

1.我們新建一個文件夾，helloworld.

2.我們進入文件夾，初始化項目。

npm init

3.安裝webpack。

npm i webpack --save-dev

為什么用webpack?因為現(xiàn)在公司基本都用它。我們使用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.我們確實可以打包了，但是這樣好像還是不行啊，我們通常情況下分為開發(fā)環(huán)境和生產(chǎn)環(huán)境，現(xiàn)在這樣怪怪的。沒關系馬上就滿足你的需求，解決你的難言之隱，讓你找回男人的尊嚴。我們搞一把開發(fā)模式和生產(chǎn)模式，

一圖抵萬言：

"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(yǎng)來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，已經(jīng)編譯了。

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 (
    

      
大彬哥一如既往的666
    
  );
};
export default App;
ReactDOM.render(, document.getElementById("app"));

最后引入到index.js里面

import App from "./App";

然后重新build，又可以了，豈止是很贊，簡直是很贊。

到這里react安裝就搞定了。

9.如果你想搞點sass了你可以繼續(xù)搞，因為不是每一個項目都用，我就不搞了,我只搞最原生的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.搞了這么多，我其實想實現(xiàn)的就是，我修改點東西，然后自動服務器刷新，最后開發(fā)完了，然后build一次完事兒。這個簡單：

npm i webpack-dev-server --save-dev

配置一下，

然后輸入

npm start

就可以了。

通過上面的過程呢，我們就實現(xiàn)了完整的工作流，但是有些具體的項目可以根據(jù)需要去添加對應的loaders等，不如有人寫less，那就加less的loaders，還有我們需要對最終上線的文件（比如bundle.js）加時間戳去緩存，這些都是個性化的不同項目的需求了，大家可以在我的這個基礎上繼續(xù)搞。

最后我們總結(jié)一下，工作流實現(xiàn)了：

1.ES6編譯

2.css編譯

3.html壓縮

4.react支持

5.服務器自動刷新

大家可以在我的基礎上繼續(xù)添加功能，實現(xiàn)自己的工作流，有了工作流配合著組件庫，就能真正的工業(yè)化生產(chǎn)，大幅度的提高效率。

本文所有源碼：https://github.com/leolau2012...