摘要:全局安装安装成功之后,现在命令就在全局生效。为了将依赖关系与捆绑到一起,我们需要导入。执行命令,入口文件为,输出文件,其中未使用的依赖关系不会打入中。现在我们直接运行命令实现与上面相同的功能。
源码地址:https://github.com/silence717/webpack2-demos
webpack在你的应用中是一个模块打包工具。webpack可以简化工作流,快速构建一个应用程序的依赖关系图,按照它们正确的顺序绑定。webpack可以配置定制优化你的代码,拆分vendor/css/js代码用于生产环境,运行一个可以及时部署代码并且页面无刷新的开发服务器,还有许多很酷的功能。
安装webpack开始之前首先你得在本地安装一个新版的nodejs。这是一个比较好的基础。老版本你可能会遇到各种与webpack相关的功能丢失或者缺少一些依赖的包。
全局安装npm install webpack -g
安装成功之后,现在webpack命令就在全局生效。
然而,这不是一个最佳实践,因为它会锁定到一个特定版本的webpack,你在项目中使用不同版本的可能会失效。
npm install webpack --save-dev npm install webpack@--save-dev
这是一种比较推荐的方法。
如果你想运行本地安装的webpack,你可以进入它的bin里面,就像这样 node_modules/.bin/webpack
如果你对使用最新的webpack有极大的热情(注意 - 可能是不稳定的),你可以直接安装webpack库使用。
npm install webpack/webpack#Creating a bundle
创建一个demo目录去实践webpack.
mkdir webpack2-demo && cd webpack2-demo mkdir demo01-getting-started && cd demo01-getting-started npm init -y npm install --save-dev webpack npm install --save lodash
现在我们创建一个index.js文件
getting-started/src/index.js
function component () { var element = document.createElement("div"); /* lodash is required for the next line to work */ element.innerHTML = _.map(["Hello","webpack"], function(item){ return item + " "; }); return element; } document.body.appendChild(component());
为了运行这段代码,我们创建一个一个html
index.html
Webpack demo
在这栗子中,使用 script 标签引入依赖。
index.js依赖lodash,所以最最开始引入它。这个里面并没有很直接的表明index.js依赖lodash库,只是使用了lodash的变量 _。
这种管理javascript项目会存在一些问题:
如果一个依赖丢失,或者没有按照正确的顺序去引入,应用将不会工作。
如果一个依赖被引入了,但是从未使用,浏览器就需要加载根本不需要的大段代码。
为了将lodash依赖关系与index.js捆绑到一起,我们需要导入lodash。
+ import _ from "lodash"; function component () { ...
同样我们需要改变index.html文件只包含一个bundlejs文件。
Webpack demo - - +
现在index.js明确表明依赖lodash,并且将其绑定到_,再也不会产生全局命名污染。
执行webpack命令,入口文件为index.js,输出bundle.js文件,其中未使用的依赖关系不会打入bundle.js中。
webpack src/index.js dist/bundle.js // 输出 Hash: 73259977daef4d7ca66c Version: webpack 2.1.0-beta.28 Time: 558ms Asset Size Chunks Chunk Names bundle.js 544 kB 0 [emitted] [big] main [0] ./src/index.js 371 bytes {0} [built]用一个配置文件来使用webpack
webpack.config.js
module.exports = { entry: "./src/index.js", output: { filename: "bundle.js", path: "./dist" } };
使用webpack运行这个文件:
webpack --config webpack.config.js // 输出 Hash: 54fb380c0318be007543 Version: webpack 2.1.0-beta.28 Time: 562ms Asset Size Chunks Chunk Names bundle.js 543 kB 0 [emitted] [big] main [3] ./src/index.js 371 bytes {0} [built]
如果webpack.config.js已经存在,webpack命令会默认选择它
配置文件能够灵活使用webpack,添加loaders,插件,解析选项和许多其他增强功能。
我们在package.json中设置一个快捷方式,运行webpack。
... "scripts": { "build": "webpack" } ...
现在我们直接运行npm run build命令实现与上面相同的功能。
总结在这个栗子中,我们了解了webpack的基本概念和配置,之后我们将按照API进一步深入学习Webpack。
PS:本文完全属于边实践学习边写,会不断更新,希望不对的地方可以及时指出。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/86483.html
摘要:实践笔记入门一官网文档地址实践工程地址本篇文章可切换到分支查看源代码。简单分步实践创建一个空文件夹,进入全局安装创建文件创建执行命令这个时候项目中多了一个文件,使用标签将其引入到中在浏览器中打开文件,页面出现文字。 webpack 实践笔记入门(一) [webpack官网文档地址]:(http://webpack.github.io/docs...) [实践工程地址]: (https:...
摘要:前言月份开始出没社区,现在差不多月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了一般来说,差不多到了转正的时候,会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客,博文推荐分享给大家。 1.前言 6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天我就...
摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...
平日学习接触过的网站积累,以每月的形式发布。2017年以前看这个网址:http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码 十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用 扩展JavaScript语法记录 - 掉坑初期工具 汉字拼音转换...
阅读 3690·2021-11-24 09:39
阅读 1850·2021-11-16 11:45
阅读 593·2021-11-16 11:45
阅读 1004·2021-10-11 10:58
阅读 2446·2021-09-09 11:51
阅读 1925·2019-08-30 15:54
阅读 666·2019-08-29 13:13
阅读 3450·2019-08-26 12:18