内容简介:很多人想搭建一套属于自己的前端工作流,最开始的时候我们的工作流萌芽是从写一个项目的时候,拷贝以前写过的一个项目文件夹改完直接使用开始的,后来使用了grunt和gulp,再到webpack,另外一方面,即使不是想搭建自己的工作流,而是使用现成的脚手架,大家都会用。跑一下vue官方的例子,但是实际工作的时候,文件夹结构一变,或者组件的倒入和导出和官方例子不一致,就彻底不会了。
很多人想搭建一套属于自己的前端工作流,最开始的时候我们的工作流萌芽是从写一个项目的时候,拷贝以前写过的一个项目文件夹改完直接使用开始的,后来使用了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...
以上所述就是小编给大家介绍的《从0开始使用webpack搭建react工作流》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- springboot~工作流activiti的搭建
- 2018移动端页面适配-自适应最新方案直接写px--------通过gulp工作流搭建一体化的移动端开发环境
- [JWFD开源工作流]JWFD开源工作流-矩阵引擎设计初步
- 前端工程工作流规范
- SharePoint PowerShell 启动工作流
- Git工作流规范 Beta
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。