从0开始使用webpack搭建react工做流

不少人想搭建一套属于本身的前端工做流，最开始的时候咱们的工做流萌芽是从写一个项目的时候，拷贝之前写过的一个项目文件夹改完直接使用开始的，后来使用了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...