webpack的安装与使用(单文件)
在安装 Webpack 前,你本地环境必须已安装nodejs。
可以使用npm安装,当然由于 npm 安装速度慢,也可以使用淘宝的镜像及其命令cnpm(npm install -g cnpm --registry=https://registry.npm.taobao.org),安装使用介绍参照:使用淘宝 NPM 镜像。
使用 cnpm 安装 webpack:
cnpm install webpack -g
安装完后,我们可以在本地创建一个目录如project。命令:mkdir project
在project目录下创建一个index.js文件,代码如下:
document.write("Hello world!")
然后在project文件夹下创建index.html文件。代码如下:
然后就可以使用webpack命令来打包了。由于我的project是安装在桌面,因此我的操作是:
执行以上命令会编译 index.js 文件并生成myScript.js 文件,成功后输出信息如下所示:
在浏览器中打开index.html文件,结果如下:
下面来创建另一个js文件。index2.js文件代码如下:
module.exports = "Nothing is impossible!"
更新index.js文件如下:
document.write(require("./index2.js"));
接下来用webpack命令来打包:
webpack index.js myScript.js
完成后,在浏览器中打开index.html文件,结果如下:
在页面启动时,会先执行index.js文件中的代码,其他模块会在运行require的时候再执行。
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件,就需要使用到 css-loader 和 style-loader,他们做两件不同的事情,css-loader 会遍历 CSS 文件,然后找到 url() 表达式然后处理他们,style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。
接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。
cnpm install style-loader css-loader (注意是在要运行的js所在的目录环境下安装。也可以选择全局安装,惭愧,我没成功过)
执行以上命令后,会再当前目录生成 node_modules 目录,它就是 css-loader 和 style-loader 的安装目录。
接下来创建一个 index.css 文件,代码如下:
然后修改index.js中的文件,代码如下:
接下来使用webpack来打包:
webpack index.js myScript.js
完成后,在浏览器中打开index.html文件,结果如下:
require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!
前面说的相对简单些,这里要说的稍微复杂一点的。
假如css文件存放在style文件夹中,而js文件存放在js文件中呢?这样使用webpack来打包又该如何操作呢?例如此刻我的目录结构是这样的。
此时我们需要改两个地方,其一,将index.js文件中的代码改为:
然后将index.html加载的js文件的那部分改为:
然后使用webpack来打包。命令如下:
此时,在浏览器中打开index.html文件,结果如下:
补充:
如:webpack index.js myScript.js -p 表示将打包后的文件进行压缩
如:webpack index.js myScript.js -w 提供watch方法;实时进行打包更新,即保存后,再刷新页面即可可以看到代码生效了,无需重新运行webpack
webpack的安装与使用(单文件)的更多相关文章
- Radmin Server-3.5 完美绿色破解版(x32 x64通用) 第三版 + 单文件制作方法
Radmin Server v3.5 汉化破解绿色版(x32 x64通用) 第三版 下载链接: https://pan.baidu.com/s/1qYVcSQo 2016年7月8日更新第三版1.修复在 ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- 在单文件组件中,引入安装模块里的css的2种方式:script中引入、style中引入
在单文件组件中,引入安装模块里的css的2种方式:script中引入.style中引入 1.script中引入 <script> import 'bulma/css/bulma.css' ...
- webpack的安装和使用
Webpack是什么 首先可以看下 官方文档 ,文档是最好的老师. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模块格式书写的多个JavaScrip ...
- webpack 介绍 & 安装 & 常用命令
webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpa ...
- 一丢丢学习之webpack4 + Vue单文件组件的应用
之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...
- vuejs 单文件组件.vue 文件
vuejs 自定义了一种.vue文件,可以把html, css, js 写到一个文件中,从而实现了对一个组件的封装, 一个.vue 文件就是一个单独的组件.由于.vue文件是自定义的,浏览器不认识,所 ...
- vue中的单文件组件
之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...
- webpack介绍 安装 常用命令
Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...
随机推荐
- boost 学习(1)
智能指针的学习 中文教程网站 http://zh.highscore.de/cpp/boost/ 不过代码可能 由于BOOST 版本不同需要稍作修改 scoped_ptr 离开作用域则自动调用类析构函 ...
- 8.15 自定义tr行 滚动 信息行的滚动
<table class="zixun-con-table"> <tr class="hover"> <th style=&quo ...
- IntelliJ IDEA 2017版 spring-boot与Mybatis简单整合
一.编译器建立项目 参考:http://www.cnblogs.com/liuyangfirst/p/8372291.html 二.代码编辑 1.建立数据库 /* Navicat MySQL Data ...
- cmake-file
file: File manipulation command. file(WRITE filename "message to write"... ) file(APPEND f ...
- 2013多校联合3 G The Unsolvable Problem(hdu 4627)
2013-07-30 20:35 388人阅读 评论(0) 收藏 举报 http://acm.hdu.edu.cn/showproblem.php?pid=4627 The Unsolvable Pr ...
- C++中的结构体的认识
C++中的结构体的认识 1. typedef的用法 在C/C++语言中,typedef常用来定义一个标识符及关键字的别名,它是语言编译过程的一部分,但它并不实际分配内存空间. 实例像:typedef ...
- spring案列——annotation配置
一.需要的jar包 spring.jar commons-loggin.jar commons-loggin.jar commons-annotation.jar 二.项目结构 三.entity pa ...
- [smarty] 在smarty模板中使用smarty变量初始化 javascript 变量的问题
// 总结:// 1/ 在smarty 模板文件中,使用从php中assign过来的smarty变量,一定需要使用双引号或单引号来括住smarty变量,如:var title="<!- ...
- Android app日志保存功能
每一个App应用应该都需要有日志保存的功能,日志保存可以记录App运行中所遇到的问题,查Bug也比较方便 等等: Android日志保存功能,保存某几天的最新日志文件到某个目录,直接看是如何代码实现的 ...
- Python学习-22.Python中的函数——type
type函数可以检测任何值或变量的类型. 例子: def printType(var): print(type(var)) class TestClass: pass printType(1) pri ...