從0開始使用webpack搭建react工做流

時間 2019-11-08

標籤開始使用 webpack 搭建 react 欄目 React 简体版

原文原文鏈接

不少人想搭建一套屬於本身的前端工做流，最開始的時候咱們的工做流萌芽是從寫一個項目的時候，拷貝之前寫過的一個項目文件夾改完直接使用開始的，後來使用了grunt和gulp，再到webpack,每個前端人員想掌握如何書寫一個符合本身項目的工做流，以便複用，達到高效工做的目的。css

另一方面，即便不是想搭建本身的工做流，而是使用現成的腳手架，你們都會用。html

vue init webpack 項目名

跑一下vue官方的例子，可是實際工做的時候，文件夾結構一變，或者組件的倒入和導出和官方例子不一致，就完全不會了。前端

不少人會vue也僅僅限於能跑起來vue官方的例子，或者在它的基礎上覆制，可是深度的定製以符合實際生產環境，是不少人不會的，甚至連改一個圖片的路徑都搞不定，明顯這樣的「會」就至關於你知道蠟燭是用來照明的，可是在冬天的夜裏，你凍得直哆嗦，旁邊有一堆木頭，你卻不能用蠟燭引燃木料取暖同樣。更簡單直接的說法，就是，鸚鵡學舌而已。vue

顯然，完全掌握如何從零開始搭建一個可以貼近實際項目的工做流，是一個想要知足工做最基本要求的人必備的技能。node

今天咱們就來實現它。咱們經過從零開始實現一個react開發環境的腳手架，讓你們可以完全的掌握如何深度定製vue、react和angular項目的能力，同時可以讓你們慢慢的造成本身的一套工做流，大幅度提升工做效率。react

OK，開始吧。webpack

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

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

npm init

3.安裝webpack。web

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一次完事兒。這個簡單：