* webpack安装

1、 安装最新node,node自带npm包管理器;

2、 全局模式安装webpack(只有将webpack在全局模式下安装才能在命令行直接通过webpack执行命令)

$npm install webpack -g

3、切换到项目目录

4、然后在本地项目安装依赖包webpack(在本地项目中加载了依赖包才能在项目中通过require来引入webpack)

如果项目没有package.json,先通过npm init创建package.json,不在npm上发布项目,创建时命令行中出现的选项就不重要

* webpack使用,打包js模块

创建html文件,并在文件中引入打包文件bundle.js(项目有关的所有的文件打包之后合成这一个文件,html最后只引入这一个打包文件)

创建空的打包文件bundle.js、入口文件entry.js(所有的内容的显示入口)

配置webpack(配置之后在命令行执行命令时只需输入webpack,然后命令就会自动参考配置文件中配置选项来打包文件)

创建配置文件webpack.config.js

执行webpack命令打包文件:

运行index.html

* webpack打包其他类型的模块

webpack本身只能打包原生JavaScript模块,如果要打包其他类型的文件模块,例如:css、图片、json等,需要通过loader转换器将各种类型的资源转换成JavaScript模块。

参考资料:

入门Webpack,看这篇就够了:http://www.jianshu.com/p/42e11515c10f

webpack学习总结(一)的更多相关文章

  1. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

  2. webpack学习(入门基础)

    webpack的学习webpack是什么?1:加载模块(将JS.sass/less.图片等作为模块来处理使用) 2:进行打包 webpack的优势?1:webpack以commonJS(JS的规范)的 ...

  3. webpack学习笔记(二)-- 初学者常见问题及解决方法

    这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...

  4. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  5. Webpack学习-Plugin

    原文地址:http://wushaobin.top/2019/03/15/webpackPlugin/ 什么是Plugin? 在Webpack学习-工作原理(上)一文中我们就已经介绍了Plugin的基 ...

  6. webpack 学习资料

    webpack 学习资料 webpack 学习资料 网址 webpack 中文版 https://webpack.docschina.org/configuration/dev-server/

  7. webpack学习(六)—webpack+react+es6(第3篇)

    接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...

  8. webpack学习(六)—webpack+react+es6(第2篇)

    接上篇        webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...

  9. webpack学习(五)—webpack+react+es6(第1篇)

    如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...

  10. webpack学习(三)

    前篇:webpack学习(二) jquery不需要在项目中自己下载,而是作为一个模块引入.jquery的存放路径是在 node_modules目录下.1.首先给项目安装jquery,npm insta ...

随机推荐

  1. servlet简单介绍

    什么是Servlet? servlet是一种Java编程语言类,用于扩展托管通过请求 - 响应编程模型访问的应用程序的服务器的功能.尽管servlet可以响应任何类型的请求,但它们通常用于扩展Web服 ...

  2. mvc core2.1 Identity.EntityFramework Core 用户列表预览 删除 修改 (五)

    用户列表预览 Controllers->AccountController.cs [HttpGet] public IActionResult Index() { return View(_us ...

  3. Red Hat OpenShift

    Core Concepts 基本概念 Master Master监控其他Node和Pod 提供Web Console Node Node是k8s的工作机器 Node中运行Pod,pod可以在node中 ...

  4. Rendering on the Web

    转自: https://developers.google.com/web/updates/2019/02/rendering-on-the-web Rendering on the Web Goog ...

  5. tile38 roaming-geofences 试用

    tile38 支持动态实时的移动对象的数据监控 环境准备 docker-compose 文件 version: "3" services:  app:    image: tile ...

  6. jQuery -> 基于当前元素的遍历

    版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/FeeLang/article/details/26257549 假设我们已经通过jQuery方法选中了一组元 ...

  7. Linux 日志分析工具之awstats

    一.awstats 是什么 官方网站:AWStats is a free powerful and featureful tool that generates advanced web, strea ...

  8. 曾经很强大的免费 ERP 2BizBox

    曾经很强大的免费 ERP 2BizBox 整个功能很强大,特别是生产,工单也很完善,有损耗,有反冲等功能. 流程比较规矩,需要先采购后才能使用,只有生产后才能销售,工单有组装和拆装,工程有工程更改,也 ...

  9. 使用 FreeCAD 打开 KiCad 用于制作外壳

    使用 FreeCAD 打开 KiCad 用于制作外壳 先看导入后的结果. 步骤: 安装 FreeCAD 安装 KiCad StepUp Mod Addon 重启 FreeCAD(非常重要,不重启不生效 ...

  10. Swagger2的使用及注意事项

    一.Swagger的主要作用有两方面: 1.生成在线文档,通过注解方式生成在线文档,方便在定义修正接口时直接修改接口文档: 2.对接口文档在线测试,不用在输入接口地址以及里面的参数对象,可以很方便的对 ...