首页
学习
活动
专区
工具
TVP
发布

从零开始,使用webpack高效搭建react工作流

关注后,回复“1”获取文章案例源代码。

很多人想搭建一套属于自己的前端工作流;最开始的时候,我们的工作流萌芽是从写一个项目的时候,拷贝以前写过的一个项目文件夹改完直接使用开始的,后来使用了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"

报错了,人家提示的特别到位,说你没有入口文件。

so,人家缺啥你就补啥就行了。

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"]

}

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了你可以继续搞,因为不是每一个项目都用,我就不搞了,我只搞最原生的css,当然顺便也把html搞了。

npm i mini-css-extract-plugin css-loader --save-dev

npm i html-webpack-plugin html-loader --save-dev

constHtmlWebPackPlugin=require("html-webpack-plugin");

constMiniCssExtractPlugin=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: [

newHtmlWebPackPlugin({

template:"./src/index.html",

filename:"./index.html"

}),

newMiniCssExtractPlugin({

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://kuaibao.qq.com/s/20190124G05F7S00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券