webpack初识！
最近在使用webpack 感觉棒棒哒 下面这个简单的教程可以让你走入webpack的世界
欢迎使用webpack
这个小教程通过简单的例子来引导大家使用webpack
通过这些这篇文章你可以学到
- 如何安装webpack
- 如何使用webpack
- 如何使用加载器
- 如何使用开发服务器
安装webpack
你的电脑上需要先安装node.js
$ npm install webpack -g
这样就可以使用webpack命令
编码
在一个空的文件夹里创建一个文件
添加 entry.js
document.write("It works.");
添加 index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
在当前文件夹下输入下面命令
$ webpack ./entry.js bundle.js
运行上面命令将会把entry.js编译为bundle.js,如果编译成功就会有下面的提示
在浏览器里打开index.html
第二个文件
接下来 我们把一些代码移到另一个文件
添加 content.js
module.exports = "It works from content.js."
修改 entry.js
- document.write("It works");
+ document.write( require("./content.js));
然后继续编译
$ webpack ./entry.js bundle.js
刷新浏览器
> *webpack 会分析你的entry文件所依赖的其他文件，这些文件(也叫模块)也会被包含在你的bundle.js中，webpack会给每个模块一个唯一的id并且通过这些id很容易的保存所有模块到bundle.js。在启动时只有入口模块被调用执行，一个简单的运行提供了所需的功能并且在需要其他模块时执行依赖*
第一个加载器
我们希望在我们的应用里添加css文件
WebPack只能处理JavaScript本身，所以我们需要CSS加载器来处理CSS文件。我们还需要的样式装载在CSS文件应用的样式。
在控制台之行
npm install css-loader style-loader
来安装加载器（需要本地安装所以不需要-g 在项目文件夹里安装）安装后会在项目文件里创建一个node-modules 文件夹
接下来我们创建一个 style.css
body{background:＃ff0000;}
修改 entry.js
+require("!style!css!./style.css");
document.write(require("./content.js));
继续执行上面那句编译命令再刷新浏览器
通过前缀加载器这个模块儿以某种渠道被加载 这些加载器通过特殊的方式转换文件内容 转换后成为javascript模块
捆绑加载器
我们不希望写require("!style!css!./style.css");这么长么长的require
那么我们可以为加载器绑定文件扩展名 之后我们就可以直接写require("./style.css")这样
修改entry.js
- require("!style!css!./style.css");
+ require("./style.css");
document.write(require("./content.js"));
编译
webpack ./entry.js bundle.js --module-bind 'css=style!css'
有些环境可能要在"css=style!css" 加双引号
配置文件
我们希望把所有的配置都放在一个配置文件里面
添加webpack.config.js文件
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
现在我们只需要在终端执行
webpack
webpack命令需要在webpack.config.js所处的文件目录下执行
一个有趣的输出
如果我们的项目文件较大需要一个较长时间的编译 编译时我们希望有一个带颜色的进度条展示 我们可以通过一下命令实现
webpack --progress --colors
监听模式
如果不想每次修改文件都去重新执行一遍命令我们可以用下面命令来监听文件变化并编译
webpack --progress --colors --watch
webpack在编译时可以缓存未改变的模块儿和输出文件
开发环境服务
这个主要是起了个node的sever服务可以在浏览器上通过设置的端口访问并且还能实时刷新页面的修改内容，非常方便实用哟
npm install webpack-dev-server -g
webpack-dev-server --progress --colors
本文翻译于 webpack官网开始教程
webpack初识！的更多相关文章
- webpack 初识
Webpack介绍 webpack 官网 http://webpack.github.io/docs/ webpack 中文地址:https://doc.webpack-china.org/ webp ...
- webpack初识
1.什么是Webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等) ...
- Webpack学习-Webpack初识
一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...
- webpack初识(biaoyansu)
1.是什么和为什么 在浏览器中的js之间如果需要相互依赖 src=a.js src=b.js src=c.js src=d.js 需要暴露出全局变量,而暴露出的这个全局变量是非常不安全的, 随着Nod ...
- 使用webpack loader加载器
了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的 ...
- webpack学习（二）初识打包配置
前言:webpack打包工具让整个项目的不同文件夹相互关联,遵循我们想要的规则.想 .vue文件, .scss文件浏览器并不认识,因此webpage暗中做了很多转译,编译等工作. 事实上,如果我们在没 ...
- vue第一单元(初识webpack-webpack的功能-webpack的初步使用)
第一单元(初识webpack-webpack的功能-webpack的初步使用) #课程目标 了解webpack出现的意义,以及webpack解决的前端问题 掌握webpack的使用流程和步骤 掌握we ...
- webpack入门教程之初识loader(二)
上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...
- 初识webpack——webpack四个基础概念
前面的话 webpack是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.当webpack处理应用程序时,它会递归地构建一个依赖关系图表 ...
随机推荐
- C#集合总结
1.为什么引入集合? 因为数组长度是固定的,为了建立一个动态的"数组",所以引入了集合. 2.为什么引入ArrayList 非泛型集合? ArrayList可以填补数组的不足,进行 ...
- Oracle数据库02
EXISTS子查询 特征:将主查询中的数据带到子查询中进行验证,如果验证成功则子查询返回true,当主查询接收到true的时候被验证的数据就显示,如果在子查询中验证失败则返回false,当主查询接收到 ...
- 1、认识Redis
Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库.Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库, ...
- django系列4.1--模版系统,过滤器,标签,模版继承,组件
django 模版系统 一. 语法 { { 变量 } } {% 表达式 %} 二. 变量 { {变量名} } 深度查询据点符( . )在模版语言中有特殊的含义. 当模版系统遇到点(.) 查询顺序如下: ...
- python中的内置函数,递归,递归文件显示(二),二分法
1.部分内置函数 repr()显示出字符串的官方表示形式,返回一个对象的string形式 # repr 就是原封不动的输出, 引号和转义字符都不起作用 print(repr('大家好,\n \t我叫周 ...
- API接口安全加强设计方法
前面两篇相关文章: <Web Api 内部数据思考 和 利用http缓存优化 Api> <Web Api 端点设计 与 Oauth> 1.开放的接口 这样的接口我们天天都在接触 ...
- robot framework接口测试之二-四种常见的POST提交数据方式
写接口测试用例时,遇到以json格式提交数据时,报错,Request如下图: Response如下图: 改成form格式提交,可以正常运行,如下图: 代码如下: ------------------- ...
- Display all 2232 possibilities? (y or n)
Linux下我在没输入任何命令的情况下摁了两下tab键,然后就出现了这个提示:Display all 2232 possibilities? (y or n) 我觉得摁y的话就会显示所有的现阶段命令. ...
- MongoDB 数据自动同步到 ElasticSearch
我们产品中需要全文检索的功能,后端数据存储主要使用了 MySQL + MongoDB,而其中需要检索的内容是在 MongoDB 中的. MongoDB 本身是自带文本索引功能的,但是,不支持中文.术业 ...
- [Flex] 组件Tree系列 —— 作为PopUpButton的弹出菜单
mxml: <?xml version="1.0" encoding="utf-8"?> <!--功能描述:Tree作为PopUpButton ...