webpack前端构建工具学习总结(一)之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题;
常见的使用场景有以下几种:
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。


将webpack安装到全局环境中
4.输入命令:webpack -v,查看当前webpack的版本号
5.进入项目目录,输入命令:npm init,生成package.json文件
package.json的文件内容:
6.输入命令:npm install webpack --save-dev为项目添加webpack依赖
7.创建一个静态文件hello.js,里面包含一个hello函数和通过require引入world.js
运行命令之前,hello.bundle.js不存在
运行命令:webpack hello.js hello.bundle.js,将hello.js编译并打包到hello.bundle.js
hello.bundle.js文件内容如下:
Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块
运行过程中如果出现:webpack:command not found,请检查是否在全局环境下安装webpack,全局环境下安装webpack使用命令:npm install webpack -g
接下来就要开始学习loader了:webpack前端构建工具学习总结(二)之loader的使用
webpack前端构建工具学习总结(一)之webpack安装、创建项目的更多相关文章
- webpack前端构建工具学习总结(二)之loader的使用
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...
- webpack前端构建工具学习总结(四)之自动化生成项目中的html页面
接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...
- webpack前端构建工具学习总结(三)之webpack.config.js配置文件
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...
- 前端读者 | 前端构建工具Gulp
@羯瑞 整理 前言 前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具.有的工具提供的功能还是非常强大的. FIS.百度团队的产品.现在百度的多个产品中使用.面向前 ...
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- 前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
- 前端构建工具gulp
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...
- JavaScript自动化构建工具grunt、gulp、webpack介绍
前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...
- FIS构建工具学习(一)
一.FIS是什么 在做项目的时候,用到部门内部前端人员开发的fiskit构建工具,经过这次项目基本把它的配置弄清楚了,fiskit构建工具是基于FIS的,所以自己也准备学习FIS,以便更好的理解. 后 ...
随机推荐
- IT网址大全
图像处理 [素材] 在线作图 [素材] 思缘设计论坛 [素材] ps联盟 [素材] ps学习网 [素材] ps教程论坛 [素材] ps爱好者 [素材] 46ps [素材] ...
- Codeforces-B-Divisors of Two Integers(思维技巧)
Recently you have received two positive integer numbers xx and yy. You forgot them, but you remember ...
- 在Javascript中 声明时用"var"与不用"var"的区别
http://www.cnblogs.com/juejiangWalter/p/5725220.html var num = 0;function start() { num = 3;} 只要一 ...
- pl/sql declare loop if
-- 1.判断表是否存在,如果存在则drop表 -- 2.创建表 -- 3.插入1W条数据 -- 4.每1K条commit一次 declare v_table ):='STUDENT'; --表名 v ...
- 在MD中使用Emoji
mark语法中支持emoji表情 具体语法是:emoji: 比如我输入 :smile: 就会出现微笑
- 2.4 Rust Ownership
What Is Ownership ownership这个单词有些不好翻译,刚开始就直接叫它“ownership”即可.这里简单说一下,我对它的理解, 从“数据结构与算法”的角度来看,ownershi ...
- Vue.js-----轻量高效的MVVM框架(十二、组件动态切换)
在写html的过程中,我们经常会遇到要写tabs的切换,类似于这样: 在vue中,我们也有自己的组件和属性来实现这样的效果,这个东西我们叫做动态组件. html: <h3>动态组件< ...
- c++ for_each( )学习
for_each()事实上是個 function template,其实质如下 [effective STL item 41] template<typename InputIterator, ...
- 几个单元素Loading动画解构
这个账号建了也有1个多月,拖延症患者终于下定决心开始写博.做前端从前至后差不多1年时间,如果文中有什么纰漏欢迎指出,未来的路还很长~ 第一篇文章用来解构几个挺不错的单元素Loading动画.效果图如下 ...
- C#取得程序的根目录以及判断文件是否存在
一:获取根目录的方法 取得控制台应用程序的根目录方法方法1.Environment.CurrentDirectory 取得或设置当前工作目录的完整限定路径方法2.AppDomain.CurrentDo ...