详解webpack模块化管理和打包工具

网络编程 2024/11/17 佚名

3 1 2

本篇文章主要介绍了详解webpack模块化管理和打包工具，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Webpack简介

webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际

需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

模块系统的演进<script>标签

<script src="/UploadFiles/2021-04-02/module1.js">

这是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window  对象中，
不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口，典型的例子如 YUI  库。
这种原始的加载方式暴露了一些显而易见的弊端：

  全局作用域下容易造成变量冲突
  文件只能按照   <script>  的书写顺序进行加载
  开发人员必须主观解决模块和代码库的依赖关系
  在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

CommonJS规范
CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。
CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行。该规范的主要内容是，模块必须通过 module.exports  导出对外的变量 或接口，通过   require()  来导入其他模块的输出到当前模块作用域中。
一个直观的例子


// moduleA.js
module.exports = function( value ){
  return value * 2;
}
// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2(4);


AMD规范
AMD（异步模块定义）是为浏览器环境设计的，因为 CommonJS 模块系统是同步加载的，当前浏览器环境还没有准备好同步加载模块的条件。
模块通过 define  函数定义在闭包中，格式如下：


define(id"htmlcode">

define('myModule', ['jquery'], function($) {
  // $ 是 jquery 模块的输出
  $('body').text('hello world');
}); // 使用 require(['myModule'], function(myModule) {});



注意 ：在 webpack 中，模块名只有局部作用域，在 Require.js 中模块名是全局作用域，可以在全局引用。
定义一个没有 id  值的匿名模块，通常作为应用的启动函数：


define(['jquery'], function($) {
  $('body').text('hello world');
});



AMD 也采用require()语句加载模块，但不同于CommonJS,他要求两个参数
第一个参数[module]，是一个数组，里面的成员就是要加载的模块； 第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：
math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境
目前，主要有两个Javascript库实现了AMD规范： require.js 和 curl.js


　require(['math'], function (math) {
　　　　math.add(2, 3);
　　});



什么是 Webpack
Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
Webpack 的特点

  代码拆分
  Loader
  智能解析
  插件系统
  快速运行

webpack基本使用
创建项目根目录
初始化


npm init 或 npm init -y


全局安装


npm install webpack -g


局部安装,在项目目录下安装


npm install webpack --save-dev


--save: 将安装的包的信息保存在package中
--dev:开发版本,只是项目构建的时候使用,项目构建完成后并不依赖的文件
如果使用web开发工具,单独安装


npm install webpack-dev-server --save-dev


基本使用
首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：


<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="/UploadFiles/2021-04-02/bundle.js">

创建entry.js


// entry.js : 在页面中打印出一句话
document.write('It works.')



然后编译 entry.js并打包到 bundle.js文件中


// 使用npm命令 
webpack entry.js bundle.js



使用模块
1.创建模块module.js,在内部导出内容


module.exports = 'It works from module.js'


2.在entry.js中使用自定义的模块


//entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块


加载css模块
1.安装css-loader


npm install css-loader style-loader --save-dev


2.创建css文件


//style.css
body { background: yellow; }


3.修改 entry.js：


require("!style-loader!css-loader!./style.css") // 载入 style.css
document.write('It works.')
document.write(require('./module.js'))



创建配置文件webpack.config.js
1.创建文件


var webpack = require('webpack')

module.exports = {
 entry: './entry.js',
 output: {
  path: __dirname,
  filename: 'bundle.js'
 },
 module: {
  loaders: [
    //同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
   {test: /\.css$/, loader: 'style-loader!css-loader'}
  ]
 }
}




2.修改 entry.js 中的 style.css 加载方式：require('./style.css')
3.运行webpack
在命令行页面直接输入webpack
插件使用
1.插件安装


//添加注释的插件
npm install --save-devbannerplugin


2.配置文件的书写


var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      //同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ],
    plugins: [
      //添加注释的插件
      new webpack.BannerPlugin('This file is created by zhaoda')
    ]
  }
}




3.运行webpack


// 可以在bundle.js的头部看到注释信息
/*! This file is created by zhaoda */



开发环境
webpack
--progress : 显示编译的进度
--colors ：　带颜色显示，美化输出
--watch　：　开启监视器，不用每次变化后都手动编译


12.4.7.1. webpack-dev-server
开启服务,以监听模式自动运行
1.安装包


npm install webpack-dev-server -g --save-dev


2.启动服务
实时监控页面并自动刷新


webpack-dev-server --progress --colors


自动编译
1.安装插件


npm install --save-dev html-webpack-plugin


2.在配置文件中导入包


var htmlWebpackPlugin = require('html-webpack-plugin')


3.在配置文件中使用插件


plugins: [
    //添加注释的插件
    new webpack.BannerPlugin('This file is created by zhaoda'),
    //自动编译
    new htmlWebpackPlugin({
      title: "index",
      filename: 'index.html', //在内存中生成的网页的名称
      template: './index.html' //生成网页名称的依据
    })
  ]



4.运行项目


webpack--save-dev


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                
                                    webpack,模块化打包,webpack,模块化,webpack,打包 
                                华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“详解webpack模块化管理和打包工具”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

详解webpack模块化管理和打包工具

在vue-cli项目中使用bootstrap的方法示例

Node.Js生成比特币地址代码解析

评论“详解webpack模块化管理和打包工具”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接