首先上交阮一峰老师的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:

            }

          }

        ]

      }

    ]

  }

};

加载图片的类型为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分析的更多相关文章

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

    作者: 阮一峰 日期: 2010年2月11日 一.问题的由来 URL就是网址,只要上网,就一定会用到. 一般来说,URL只能使用英文字母.阿拉伯数字和某些标点符号,不能使用其他文字和符号.比如,世界上 ...

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

    最近正在学习阮一峰老师的es6(第三版)教材,在学到第七章<函数的扩展>中的箭头函数嵌套时,文中提到了一个关于“管道机制”的示例,文中源代码如下: //es6(第三版)教材中的管道机制源代 ...

  3. 监控阮一峰老师的blog

    引言 阮一峰大家基本都认识,很厉害的一个人,经济学博士,文章写得很棒,知识面很广泛,计算机.算法.英语.文采,这是能想到的他的一些标签,他的博客应该算是最受欢迎的博客之一了. 我经常回去看他的博客,但 ...

  4. [转]❲阮一峰❳Linux 守护进程的启动方法

    ❲阮一峰❳Linux 守护进程的启动方法 "守护进程"(daemon)就是一直在后台运行的进程(daemon). 本文介绍如何将一个 Web 应用,启动为守护进程. 一.问题的由来 ...

  5. Javascript模块化编程（三）：require.js的用法 作者： 阮一峰

    声明:转载自阮一峰的网络日志 这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用 ...

  6. Javascript模块化编程（二）：AMD规范 作者： 阮一峰

    声明:转载自阮一峰的网络日志 这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可 ...

  7. Javascript模块化编程（一）：模块的写法 作者： 阮一峰

    声明:转载自阮一峰的网络日志 随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理. ...

  8. 09.13日记（2014年9月13日00:18:26）英语，bootstrap，阮一峰，

    我们这里只推荐一本语法书:台湾的旋元佑老师写的<文法俱乐部>(简体版名为<语法俱乐部>).这本书因为出版社倒闭而绝版,淘宝可以买到影印的版本. (1)学英语:奶爸的英语教室 资 ...

  9. 【转】【阮一峰的网络日志】Git 使用规范流程

    作者: 阮一峰 日期: 2015年8月 5日 团队开发中,遵循一个合理.清晰的Git使用流程,是非常重要的. 否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护. 下面是Th ...

随机推荐

  1. Java执行JavaScript脚本破解encodeInp()加密

    一:背景 在模拟登录某网站时遇到了用户名和密码被JS进行加密提交的问题,如图: 二:解决方法 1.我们首先需要获得该JS加密函数,一般如下: conwork.js var keyStr = " ...

  2. .netcore 堆栈调用方法小记

    背景 上午临近午饭时,公司同事反馈验证码被攻击灌水.我们匆忙查询验证码明细,对已频繁出现的IP插入黑名单,但IP仍然隔断时间频繁变动,不得已之下只能先封禁对应公司id的验证码发送功能.年初时候,专门对 ...

  3. Python全栈开发之路 【第八篇】：面向对象编程设计与开发（2）

    一.继承与派生 什么是继承? 继承指的是类与类之间的关系,是一种什么是什么的关系,继承的功能之一就是用来解决代码重用问题. 继承是一种创建新的类的方式,在python中,新建的类可以继承一个或多个父类 ...

  4. hibernate在写cfg配置文件自动创建表时报错org.hibernate.MappingException: Could not get constructor for org.hibernate.persister.entity.SingleTableEntityPersister

    在用hibernate框架时,写cfg文件,想自动生成表时,一般写<property name="hibernate.hbm2ddl.auto">create</ ...

  5. ES5中文分词(IK)

    ElasticSearch5中文分词(IK) ElasticSearch安装 官网:https://www.elastic.co 1.ElasticSearch安装 1.1.下载安装公共密钥 rpm ...

  6. mysql之找回误删数据

    场景:我们开发阶段,经常要有一些测试数据在我们测试相关功能的时候,是十分必要的.后期由于引入了正式的数据,但是测试数据并没有被及时清理.这个时候由于一个误删除,导致一些正式的数据被删除,由此,一场追找 ...

  7. react-redux异步数据操作

    import React, { Component } from 'react'; import './App.css'; import {connect} from 'react-redux'; i ...

  8. 微信QQ打开网页时提示用浏览器打开

    微信QQ打开网页时提示用浏览器打开 一,需求分析 1.1,使用微信或QQ打开网址时,无法在微信或QQ内打开常用下载软件,手机APP等.故此需要在微信qq里提示 二,功能实现 2.1 html实现 &l ...

  9. Tomcat启用GZIP压缩，提升web性能

    一.前言 最近做了个项目,遇到这么一个问题:服务器返回给客户端的json数据量太大(大概65M),在客户端加载了1分多钟才渲染完毕,费时耗流量,用户体验极其不好.后来网上搜优化的方法,就是Http压缩 ...

  10. 剑指offer(19)二叉树中和为某一值的路径

    题目: 输入一颗二叉树的跟节点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径.(注意: 在返回值的list中,数组长度大的 ...