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 ...
随机推荐
- HBase篇(1)-特性与应用场景
[每日五分钟搞定大数据]系列,HBase第一篇 结束了Zookeeper篇, 接下来我们来说下Google三驾马车之一BigTable的开源实现:HBase,要讲的内容暂定如下: 这是第一篇我们先不聊 ...
- Signalr实现消息推送
一.前言 大多数系统里面好像都有获取消息的功能,但这些消息来源都不是实时的,比如你开两个浏览器,用两个不同的账号登录,用一个账号给另外一个账号发送消息,然而并不会实时收到消息,必须要自己手动F5刷新一 ...
- 朱晔的互联网架构实践心得S2E4：小议微服务的各种玩法（古典、SOA、传统、K8S、ServiceMesh）
十几年前就有一些公司开始践行服务拆分以及SOA,六年前有了微服务的概念,于是大家开始思考SOA和微服务的关系和区别.最近三年Spring Cloud的大火把微服务的实践推到了高潮,而近两年K8S在容器 ...
- vue内置组件 transition 和 keep-alive 使用
1.transition name - string,用于自动生成 CSS 过渡类名.例如:name: 'fade' 将自动拓展为.fade-enter,.fade-enter-active等.默认类 ...
- Python—randonm模块介绍
random是python产生伪随机数的模块 >>> random.randrange(1,10) #返回1-10之间的一个随机数,不包括10 >>> random ...
- es6在网页中模块引入的方法
前言: 以前,当然包括现在的大部分js引入,我们都是利用<script></script>这种全局的方式进行引入,当然这种弊端还是用的,比如这样直接利用script引入的话,会 ...
- 03-Linux的shell命令 .doc
快捷键 基本操作和命令 Cd转换文件夹 以/开头的是绝对路径 没有/相对路径 ../代表上一级目录 Tab补充 Ctrl+R 查找历史输入过的命令 箭头上也代表能够查询以往输入的命令 Ctrl+C 终 ...
- Spring.profile配合Jenkins发布War包，实现开发、测试和生产环境的按需切换
前两篇不错 Spring.profile实现开发.测试和生产环境的配置和切换 - Strugglion - 博客园https://www.cnblogs.com/strugglion/p/709102 ...
- JEECG DataGridColumn dictionary使用问题
<t:dgCol title="线索所属人" field="ownerId" query="true" queryMode=&q ...
- java依赖的斗争：依赖倒置、控制反转和依赖注入
控制反转(Inversion Of Controller)的一个著名的同义原则是由Robert C.Martin提出的依赖倒置原则(Dependency Inversion Principle),它的 ...