* 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. guling code细节

    detect_hand.py 分水岭算法: 任何一幅灰度图像都可以被看成拓扑平面,灰度值高的区域可以被看成是山峰,灰度值低的区域可以被看成是山谷.我们向每一个山谷中灌不同颜色的水,随着水的位的升高,不 ...

  2. tomcat:利用tomcat部署war包格式的项目

    配置jdk环境变量, 配置TOMCAT_HOME 变量, 将war包放入webapps中. 运行tomcar-bin文件夹中的startup.bat. tomcat会自动解压war包. 进入项目:

  3. YIT-CTF—Web

    一:背后 打开传送门——>查看网页源代码——>1b0679be72ad976ad5d491ad57a5eec0——>用MD5解密 二:一种编码 [][(![]+[])[+[]]+([ ...

  4. sudo安装软件的时候出现Could not get lock /var/lib/dpkg/lock - open (11: Resource temporarily unavailable)

    最近在安装软件的时候经常出现下面提示: E: Could not get lock /var/lib/dpkg/lock - open (11: Resource temporarily unavai ...

  5. Android.bp学习笔记

    1.Android.bp简介 Android 7.0之后希望用Android.bp替换Android.mk,bp简单的配置更方便Ninja 文件的产生,而Blueprint和Soong 就此产生.An ...

  6. 使用distillery&&docker 部署phoenix 应用

      distillery 发布了2.0 了,有好多的新的功能 config prodiver 进行环境变量的配置 appup tansforms 插件系统,方便在release 构建的时候进行修改 m ...

  7. NPOI之Excel——合并单元格、设置样式、输入公式、设置筛选等

    首先建立一个空白的工作簿用作测试,并在其中建立空白工作表,在表中建立空白行,在行中建立单元格,并填入内容: //建立空白工作簿 IWorkbook workbook = new HSSFWorkboo ...

  8. 持续集成--Jenkins--2

    安装sonar Scanner 打开http://www.sonarqube.org/官网 找到下面扫描器 通过这个扫描器可以分析代码分析 因此你也的安装这个扫描器 上传sonar-scanner-2 ...

  9. jQuery实现跨域请求

    我们都知道,xhr(XMLHttpRequest)是不允许跨域的.而jQuery的ajax方法是基于xhr的,所以,直接使用它也是无法跨域的.一般的,我们是如下使用$.ajax方法的: $.ajax( ...

  10. Vue学习入门

    1.安装WebStorm: 2.激活WebStorm:https://blog.csdn.net/qq_40147863/article/details/81317709 3.安装全局脚手架:npm ...