正文

webpack——阮一峰webpackdemo分析(代码片段)

wangyang0210  wangyang0210  2023-03-09  531

关键词：

首先上交阮一峰老师的github地址，一共有15个demo，我们一个一个的进行分析，结合上文所学的知识！

其中有一些内容,我做了修改,我是先看一遍然后从新敲了一遍。

准备工作

首先还是安装，不过这一次，我们进行全局安装。

$ 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: 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‘
    )
  ]
;

java面试基础知识，docker阮一峰

如何保证redis的高并发和高可用？redis的主从复制原理能介绍一下么？redis的哨兵原理能介绍一下么？面试官心理分析：其实问这个问题，主要是考考你，redis单机能承载多高并发？如果单机扛不住如何... 查看详情

flex布局阮一峰

Flex布局教程：实例篇http://www.ruanyifeng.com/blog/2015/07/flex-examples.htmlFlex布局教程：语法篇http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 查看详情

from阮一峰

JavaScript面向对象编程（一）：封装　　原文链接：http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html Javascript面向对象编程（二）：构造函数的继承：　　原文链接：http://www.ruanyifeng.com/blog/2010/05/object- 查看详情

flex实例（阮一峰）

Flex布局教程：实例篇作者：阮一峰日期： 2015年7月14日上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请... 查看详情

react入门实例教程[阮一峰的网络日志](分享)

作者：阮一峰https://github.com/ruanyf/react-demos 转自：http://www.ruanyifeng.com/blog/2015/03/react.html对着文章的说明，看明白了，再跑下demo.... 查看详情

阮一峰网络日志第38期2019年01月04日

http://www.ruanyifeng.com/blog/2019/01/weekly-issue-38.html声明：链接及文章内容为原博主阮一峰原创。查看详情

阮一峰网络日志第39期2019年01月11日

http://www.ruanyifeng.com/blog/2019/01/weekly-issue-39.html 声明：链接及文章内容为原博主阮一峰原创。查看详情

阮一峰网络日志第44期2019年02月22日

http://www.ruanyifeng.com/blog/2019/02/weekly-issue-44.html 声明：链接及文章内容为原博主阮一峰原创。查看详情

阮一峰网络日志第37期2018年12月28日

http://www.ruanyifeng.com/blog/2018/12/weekly-issue-37.html 声明：链接及文章内容为原博主阮一峰原创。查看详情

阮一峰网络日志第43期2019年02月15日

http://www.ruanyifeng.com/blog/2019/02/weekly-issue-43.html 声明：链接及文章内容为原博主阮一峰原创。查看详情

flex布局教程：语法篇（转自阮一峰的网络日志）

作者：阮一峰（转自阮一峰的网络日志，如有侵权，立即删除）网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性+ position属性+ float属性。它对于那些特殊布局非常不... 查看详情

转：阮一峰flex布局教程：语法篇

作者：阮一峰日期： 2015年7月10日网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性+ position属性+ float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不... 查看详情

转：阮一峰flex布局教程：实例篇

作者：阮一峰日期： 2015年7月14日上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法... 查看详情

flex布局（引用阮一峰大神）

Flex布局教程：语法篇http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlFlex布局教程：实例篇http://www.ruanyifeng.com/blog/2015/07/flex-examples.html一个学习Flex布局的小游戏http://flexboxfroggy.com/#zh-cn 查看详情

[转帖]阮一峰：哈希碰撞与生日攻击(代码片段)

哈希碰撞与生日攻击分享按钮作者：阮一峰日期： 2018年9月5日一、哈希碰撞是什么？所谓哈希（hash），就是将不同的输入映射成独一无二的、固定长度的值（又称"哈希值"）。它是最常见的软件运算之一。如果不同的输... 查看详情

阮一峰：jquery的几篇文章

jQuery的设计思想：http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.htmljQuery的最佳实践：http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.htmljQuery的deferred对象详解：http://www.ruanyifeng.com/bl 查看详情

27理解js的继承机制（转载自阮一峰）

Javascript继承机制的设计思想作者：阮一峰日期： 2011年6月5日我一直很难理解Javascript语言的继承机制。它没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototyp... 查看详情

闭包——读《阮一峰的日志》

【闭包】：就是能够读取其他函数内部变量的函数（声明这个函数为变量result，然后调用它就可读取内部参数的值了）。Javascript语言的特殊之处，就在于函数内部局部变量可以直接读取全局变量，但是反过来：外部全局变量不... 查看详情