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

  1. style-loader和css-loader顺序不可错乱错乱直接报错
  2. 没写style-loader则build文件会生成,但你会发现页面中js不起作用;
  3. 没写css-loader则会直接报错:’You may need an appropriate loader to handle this file type.’
  4. style-loader会在页面的header标签里生成内部的<style></style>;
  5. 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: 8192
            }
          }
        ]
      }
    ]
  }
};

加载图片的类型为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‘
    })
  ]
};

原文地址:https://www.cnblogs.com/wangyang0210/p/10376582.html

时间: 2024-11-07 22:23:16

webpack——阮一峰webpackDemo分析的相关文章

javascript工具--控制台详解(转自 阮一峰博客)

javascript工具--控制台详解(转自 阮一峰博客) 大神这篇博客是写在2011年,主要介绍 "Firefox" 浏览器插件 "Firebug" 的操作,如今主流浏览器对控制台都已经提供了很好的支持.我自己用的最多是谷歌的 "chrome" 浏览器,下面也用 "chrome" 浏览器来调试. 一.显示信息的命令 console.log();  //控制台输入 网页中不会输出 console.info();  //一般信息

【阮一峰】深入研究URL编码问题及JavaScript相应的解决方案

作者: 阮一峰 日期: 2010年2月11日 一.问题的由来 URL就是网址,只要上网,就一定会用到. 一般来说,URL只能使用英文字母.阿拉伯数字和某些标点符号,不能使用其他文字和符号.比如,世界上有英文字母的网址 “http://www.abc.com”,但是没有希腊字母的网址“http://www.aβγ.com”(读作阿尔法-贝塔-伽玛.com).这是 因为网络标准RFC 1738做了硬性规定: "...Only alphanumerics [0-9a-zA-Z], the specia

阮一峰:互联网协议入门

阮一峰:互联网协议入门 2015-12-29 阮一峰 程序员之家 作者:阮一峰 原文:http://www.ruanyifeng.com/blog/2012/06/internet_protocol_suite_part_ii.html 我们每天使用互联网,你是否想过,它是如何实现的? 全世界几十亿台电脑,连接在一起,两两通信.上海的某一块网卡送出信号,洛杉矶的另一块网卡居然就收到了,两者实际上根本不知道对方的物理位置,你不觉得这是很神奇的事情吗? 互联网的核心是一系列协议,总称为”互联网协议”

关于阮一峰老师es6(第三版)中管道机制代码的理解浅析

最近正在学习阮一峰老师的es6(第三版)教材,在学到第七章<函数的扩展>中的箭头函数嵌套时,文中提到了一个关于“管道机制”的示例,文中源代码如下: //es6(第三版)教材中的管道机制源代码: const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val); const plus1 = a => a + 1; const mult2 = a => a * 2; const addThe

转: DNS 原理入门 (from 阮一峰)

转自:http://www.ruanyifeng.com/blog/2016/06/dns.html DNS 原理入门 作者: 阮一峰 日期: 2016年6月16日 DNS 是互联网核心协议之一.不管是上网浏览,还是编程开发,都需要了解一点它的知识. 本文详细介绍DNS的原理,以及如何运用工具软件观察它的运作.我的目标是,读完此文后,你就能完全理解DNS. 一.DNS 是什么? DNS (Domain Name System 的缩写)的作用非常简单,就是根据域名查出IP地址.你可以把它想象成一本

转:阮一峰Flex 布局教程:实例篇

作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solved by Flexbox. 一.骰子的布局 骰子的一面,最多可以放置9个点. 下面,就来看看Flex如何实现,从1个点到9个点的布局.你可以到codepen查看Demo. 如果不加说明,本节的H

转:阮一峰Flex 布局教程:语法篇

作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局将成为未来布局的首选方案.本文介绍它的语法,下一

阮一峰:jQuery官方基础教程笔记

jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. 对于网页开发者来说,学会jQuery是必要的.因为它让你了解业界最通用的技术,为将来学习更高级的库打下基础,并且确实可以很轻松地做出许多复杂的效果. 虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的各种方法和内部变化有上千种之多.初学者常常感到,入门很方便

(转)阮一峰-蒙特卡罗方法入门

本文转载自阮一峰-蒙特卡罗方法入门 本文通过五个例子,介绍蒙特卡罗方法(Monte Carlo Method). 一.概述 蒙特卡罗方法是一种计算方法.原理是通过大量随机样本,去了解一个系统,进而得到所要计算的值. 它非常强大和灵活,又相当简单易懂,很容易实现.对于许多问题来说,它往往是最简单的计算方法,有时甚至是唯一可行的方法. 它诞生于上个世纪40年代美国的"曼哈顿计划",名字来源于赌城蒙特卡罗,象征概率. 二.π的计算 第一个例子是,如何用蒙特卡罗方法计算圆周率π. 正方形内部有