webpack——阮一峰webpackDemo分析
首先上交阮一峰老师的github地址，一共有15个demo，我们一个一个的进行分析，结合上文所学的知识！
其中有一些内容,我做了修改,我是先看一遍然后从新敲了一遍。
https://github.com/ruanyf/webpack-demos
准备工作
首先还是安装，不过这一次，我们进行全局安装。
$ npm i -g webpack webpack-dev-server webpack-cli
克隆仓库地址
git clone https://github.com/ruanyf/webpack-demos.git
安装依赖包
$ cnpm install
这里就完成了基本的准备工作了，现在我们来依次来看看所有的demo
Demo 1
主要为单一入口下,只是为了让大家简单的了解下webpack的打包
目录结构如下
bundle.js 代码打包后会输出到此文件 index.html 页面展示 main.js 入口文件 package.json demo1的npm配置文件 webpack.config.js webpack的配置文件
index.html
<html>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
main.js
document.write('<h1>Hello World</h1>');
package.json
{
"name": "webpack-demo1",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --open",
"build": "webpack -p"
},
"license": "MIT"
}
因为在package的scripts中配置过了dev和build所以我们可以直接运行命令进行编译,这里说下webpack一些基本的参数
webpack 用于开发环境的打包
webpack -p 用于生成环境的打包(会自动进行压缩)
webpack --watch 监听文件变化并自动打包
webpack -d 生成map映射,告诉源码被打包到哪里
webpack --colors 美化打包时输出内容 webpack --config 使用新的配置文件打包
webpack --progress 显示打包进度
webpack.confg.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
Demo 2
多页面应用下的打包
目录结构
index.html
<html>
<body>
<script src="bundle1.js"></script>
<script src="bundle2.js"></script>
</body>
</html>
main1.js
document.write('<h1>Hello World</h1>');
main2.js
document.write('<h2>Hello Webpack</h2>');
webpack.config.js
module.exports = {
entry: {
bundle1: './main1.js',
bundle2: './main2.js'
},
output: {
filename: '[name].js'
}
};
Demo3
loader开始登场了,用Babel-loader可以将JSX / ES6文件转换为普通的JS文件，之后Webpack将开始构建这些JS文件。Webpack的官方文档有一个完整的加载器列表。
目录结构
index.html
<html>
<body>
<div id="wrapper"></div>
<script src="bundle.js"></script>
</body>
</html>
main.jsx
const React = require('react');
const ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.querySelector('#wrapper')
);
webpack.config.json
module.exports = {
entry: './main.jsx',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
}
]
}
};
Demo4
使用CSS-loader预处理CSS文件。
目录结构
app.css
body {
background-color: blue;
}
index.html
<html>
<head>
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
main.js
require('./app.css');
webpack.config.js
- style-loader和css-loader顺序不可错乱错乱直接报错
- 没写
style-loader则build文件会生成，但你会发现页面中js不起作用； - 没写
css-loader则会直接报错：’You may need an appropriate loader to handle this file type.’ - style-loader会在页面的
header标签里生成内部的<style></style>; - css-loader的存在使得在js中通过
require或者import引入css成功；通过css-loader，可以实现在js文件中通过require的方式，来引入css。
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
}
};
Demo5
演示图片的加载url-load,对小于8kb的图片进行base64转换
目录结构
index.html
<html>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
main.js
var img1 = document.createElement("img");
img1.src = require("./small.png");
document.body.appendChild(img1);
var img2 = document.createElement("img");
img2.src = require("./4853ca667a2b8b8844eb2693ac1b2578.png");
document.body.appendChild(img2);
webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader',
options: {
limit:
}
}
]
}
]
}
};
加载图片的类型为png和jpg,limit的单位为byte
Demo6
css-loader?modules（查询参数模块）启用CSS模块，它为您的JS模块的CSS提供本地范围的CSS。您可以使用:global(selector)（更多信息）将其关闭。
通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack对CSS模块化提供了非常好的支持，只需要在CSS loader中进行简单配置即可，然后就可以直接把CSS的类名传递到组件的代码中，这样做有效避免了全局污染。在这里也要注意多个loader的写法
目录结构
app.css
.h1 {
color:red;
}
:global(.h2) {
color: blue;
}
index.html
<html>
<body>
<h1 class="h1">Hello World</h1>
<h2 class="h2">Hello Webpack</h2>
<div id="example"></div>
<script src="./bundle.js"></script>
</body>
</html>
main.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var style = require('./app.css');
ReactDOM.render(
<div>
<h1 className={style.h1}>Hello World</h1>
<h2 className="h2">Hello Webpack</h2>
</div>,
document.getElementById('example')
);
webpack.config.js
module.exports = {
entry: './main.jsx',
output: {
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
};
只有第二个h1是红色的，因为它的CSS是本地范围的，并且都是h2蓝色的，因为它的CSS是全局范围的。
Demo7
Webpack有一个插件系统来扩展其功能。例如，UglifyJs插件将缩小output（bundle.js）JS代码
目录结构
inndex.html
<html>
<body>
<script src="bundle.js"></script>
</body>
</html>
main.js
var longVariableName = 'Hello';
longVariableName += ' World';
document.write('<h1>' + longVariableName + '</h1>');
webpack.config.js
var webpack = require('webpack');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [
new UglifyJsPlugin()
]
};
压缩后的代码
Demo8
HTML Webpack插件和Open Browser Webpack插件,展示如何加载第三方插件。
html-webpack-plugin可以index.html为你创建，而open-browser-webpack-plugin可以在Webpack加载时打开一个新的浏览器选项卡。
目录结构
main.js
document.write('<h1>Hello World</h1>');
webpack.config.js
var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [
new HtmlwebpackPlugin({
title: 'Webpack-demos',
filename: 'index.html'
}),
new OpenBrowserPlugin({
url: 'http://localhost:8080'
})
]
};
webpack——阮一峰webpackDemo分析的更多相关文章
- 【阮一峰】深入研究URL编码问题及JavaScript相应的解决方案
作者: 阮一峰 日期: 2010年2月11日 一.问题的由来 URL就是网址,只要上网,就一定会用到. 一般来说,URL只能使用英文字母.阿拉伯数字和某些标点符号,不能使用其他文字和符号.比如,世界上 ...
- 关于阮一峰老师es6(第三版)中管道机制代码的理解浅析
最近正在学习阮一峰老师的es6(第三版)教材,在学到第七章<函数的扩展>中的箭头函数嵌套时,文中提到了一个关于“管道机制”的示例,文中源代码如下: //es6(第三版)教材中的管道机制源代 ...
- 监控阮一峰老师的blog
引言 阮一峰大家基本都认识,很厉害的一个人,经济学博士,文章写得很棒,知识面很广泛,计算机.算法.英语.文采,这是能想到的他的一些标签,他的博客应该算是最受欢迎的博客之一了. 我经常回去看他的博客,但 ...
- [转]❲阮一峰❳Linux 守护进程的启动方法
❲阮一峰❳Linux 守护进程的启动方法 "守护进程"(daemon)就是一直在后台运行的进程(daemon). 本文介绍如何将一个 Web 应用,启动为守护进程. 一.问题的由来 ...
- Javascript模块化编程（三）：require.js的用法 作者： 阮一峰
声明:转载自阮一峰的网络日志 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用 ...
- Javascript模块化编程（二）：AMD规范 作者： 阮一峰
声明:转载自阮一峰的网络日志 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可 ...
- Javascript模块化编程（一）：模块的写法 作者： 阮一峰
声明:转载自阮一峰的网络日志 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理. ...
- 09.13日记（2014年9月13日00:18:26）英语，bootstrap，阮一峰，
我们这里只推荐一本语法书:台湾的旋元佑老师写的<文法俱乐部>(简体版名为<语法俱乐部>).这本书因为出版社倒闭而绝版,淘宝可以买到影印的版本. (1)学英语:奶爸的英语教室 资 ...
- 【转】【阮一峰的网络日志】Git 使用规范流程
作者: 阮一峰 日期: 2015年8月 5日 团队开发中,遵循一个合理.清晰的Git使用流程,是非常重要的. 否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护. 下面是Th ...
随机推荐
- Feign性能优化注意事项
一.FeignClient注解 FeignClient注解被@Target(ElementType.TYPE)修饰,表示FeignClient注解的作用目标在接口上 @FeignClient(name ...
- ML.NET 示例：多类分类之鸢尾花分类
写在前面 准备近期将微软的machinelearning-samples翻译成中文,水平有限,如有错漏,请大家多多指正. 如果有朋友对此感兴趣,可以加入我:https://github.com/fei ...
- .net Core 调用微信Jsapi接口，H5解析二维码
项目里需要用到扫描二维码,自己实现,不会. 找到了两种解决方案: 通过reqrcode.js,这是一个前端解析二维码内容的js库.如果二维码比较清晰,用这种效果也不错 调用微信扫一扫功能,这种效果很好 ...
- OO生存指.....抱歉无法生存
还记得前三次的设计策略:星期二之前实现功能,星期三找一下可能出现的小bug. 这三次以及变成了:星期二之前能跑出来就行. 总体来说设计策略是:先让几个线程能够顺利运行,再开始实现功能. 在接触到多线程 ...
- Log4.Net 在Winform、MVC、ashx程序里的使用，ashx程序里使用异步
最近做一个双11活动的,是一套相关的H5页面.本来以为难度不大,但是做下来几天还是遇到些问题.就总结一下吧,还是有收获的. 1.在H5页面中,有一个遮罩层,还是挺有意思的.直接用div+css控制遮罩 ...
- Python_列表推导式_生成器的表达式_各种推导式_40
列表推导式: #列表推导式: egg_list = [] for i in range(10): egg_list.append('鸡蛋%s'%i) print(egg_list) egon egg_ ...
- 把玩Alpine linux(二):APK包管理器
导读 Alpine Linux非常精简,开机内存占用也在二三十兆大,没有拆箱即用,就需要我们自己去做一些了解和配置 Alpine Linux的优劣 优势 Alpine Linux的Docker镜像特点 ...
- JSP页面的基本元素
JSP页面元素构成:静态内容.指令.表达式.小脚本.声明.注释. JSP指令包括: page指令:通常位于jsp页面的顶端,同一个页面可以有多个page指令. include指令:将一个外部文件嵌入到 ...
- 配置nginx反向代理服务器，解决浏览器跨域调用接口的限制问题
配置nginx反向代理服务器,解决浏览器跨域调用接口的限制问题 - 大venn的博客 - CSDN博客https://blog.csdn.net/u011135260/article/details/ ...
- Memcache之安装篇
本篇文章会介绍memcache在Windows和Linux下的具体安装过程,详细的记录其中的流程内容,帮助小伙伴们快速的搭建起memcache服务,废话少说,直接上!!! Windows: Memca ...