摘要:一直在用,也能完美满足目前业务需求。我厂的也有大量的贴合业务线。最近在看,要打通的技术栈,学习是必不可少的了。配置好文件后,下面命令可以监听文件变化在配置文件里一样可以实现在做网页开发时候,需要用到服务器,提供了安装很简单
一直在用fis3,也能完美满足目前业务需求。我厂的scrat也有大量的feature贴合业务线。
最近在看React,要打通React的技术栈,学习Webpack是必不可少的了。
从npm上安装很简单:
npm install webpack -gWebpack特色:
先上第一个demo:
cats.jsvar cats = ["dave", "henry", "martha"]; module.exports = cats;app.js
var cats = require("./cats"); console.log("cats")
webpack登场:
webpack ./app.js app.bundle.js
这命令可以cats.js打包进app.js里面,最后生成app.bundle.js
利用配置文件来操作webpack-webpack.config.js
module.exports = { entry: "./src/app", output: { path: "./bin", filename: "app.bundle" } }
配置完后,在文件夹直接webpack即可
使用loaderloader应该是webpack的预加载工具
module.exports = { entry: "./src/app.js", output: { path: "./bin", filename: "app.bundle.js" }, module: { loaders: [{ test: /.js$/, exclude: /node_moudles/, loader: "babel-loader" }] } }使用plugins
module.exports = { entry: "./src/app.js", output: { path: "./bin", filename: "app.bundle.js" }, module: { loaders: [{ test: /.js$/, exclude: /node_moudles/, loader: "babel-loader" }] }, plugins: [ new webapck.optimize.UglifyJsPlugin({ compress: { warnings: false }, output: { comments: false } }) ] }CONFIGURATION OBJECT CONTENT
可以编写js,不仅仅是个json对象
entry基本语法: { context: _dirname + "/app", entry: "./entry", output: { path: _dirname + "/dist", filename: "bundle.js" } } 传入object时 { entry: { page1: "./page1", page2: ["./entry1", "./entry2"] }, output: { filename: "[name].bundle.js", chunkFilename: "[id].bundle.js" } }output
multiple entries { entry: { app: "./src/app.js", search: "./src/search.js" }, output: { filename: "[name].js", path: __dirname + "/built" } } //outpu: ./built/app.js ./built/search.jsoutput.pubicPath
适用于类似CDN匹配需求 可添加hash绕过缓存机制 output: { path: "/home/project/cdn/assets/[hash]", publicPath: "http://cdn.example.com/assets/[hash]/" }Watch
webpack有个很牛逼的地方,热刷新。
配置好文件后,下面命令可以监听文件变化
webpack --watch
在配置文件里一样可以实现:
module.exports = { entry: { app: "./src/app.js" }, output: { filename: "bundle.js", }, watch: true }
在做网页开发时候,需要用到服务器,webpack提供了webpack-dev-server
安装很简单:
npm install webpack-dev-server -g
demo:
webpack-dev-server --host 0.0.0.0 --port 8080 --inline
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/79876.html
摘要:项目的架构也是最近在各种探讨研究。还求大神多指点项目技术总结技术栈项目结构探究初体验关于项目中的配置说明项目简单说明开发这一套,我个人的理解是体现的是代码分层职责分离的编程思想逻辑与视图严格区分。前端依旧使用技术栈完成。 项目地址:https://github.com/Nealyang/R...技术栈:react、react-router4.x 、 react-redux 、 webp...
项目开始前,我们先聊一聊关于项目的一些说明。该项目起始于2017年初,当时公司主要技术栈为gulp+angular,鉴于react的火热的生态,在公司决定研发bss管理系统时选用react开发,目的也是为react native打下基础,以解决后期公司大前端技术栈的逐步成熟。(当时没有选择vue开发的主要原因是weex生态还不够特别成熟),既然决定换新,项目的构建也跟着一起换,从gulp转向火热的...
摘要:在上面的列表中,是自解释型的。我们将使用后者。调整文件的内容到这一步,这个应用就具备热刷新的功能。下一步,更新文件中的到现在为止,如果你在控制台运行压缩文件将被创建并且放在路径下面。 这是React和ECMAScript2015系列文章的最后一篇,我们将继续探索React 和 Webpack的使用。 下面是所有系列文章章节的链接: React 、 ES6 - 介绍(第一部分) Rea...
摘要:在上面的列表中,是自解释型的。我们将使用后者。调整文件的内容到这一步,这个应用就具备热刷新的功能。下一步,更新文件中的到现在为止,如果你在控制台运行压缩文件将被创建并且放在路径下面。 这是React和ECMAScript2015系列文章的最后一篇,我们将继续探索React 和 Webpack的使用。 下面是所有系列文章章节的链接: React 、 ES6 - 介绍(第一部分) Rea...
阅读 2855·2021-11-24 09:39
阅读 3084·2021-11-19 10:00
阅读 1506·2021-10-27 14:17
阅读 1788·2021-10-14 09:43
阅读 939·2021-09-03 10:30
阅读 3399·2019-08-30 15:54
阅读 2701·2019-08-30 13:05
阅读 1971·2019-08-30 11:02