小工具      在线工具  汉语词典  css  js  c++  java

使用webpack(1)

前端,前端,webpack 额外说明

收录于:40天前

前言

“前端的变化太快了”,这是我这几年在朋友同事中听到非常多的一句话,确实,node,webpack,grunt,gulp,browserify,vue,react,angular,backbond,还有概念上的AMD,mvvm…
随便一个名词,表示都要学一段时间,要熟练肯定都要实战中反复踩坑。。

然而千里之行始于足下。我们先看一下前端工程工具webpack。

安装节点。这是前端运行的环境。最好有一些node的基础知识。 Webpack 是前端框架(vue、react、Angular)中广泛使用的工具。我们看一下中文官方的定义;

Webpack是目前最流行的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖关系和规则打包成适合生产环境部署的前端资源。您还可以将按需加载的模块的代码分开,并在实际需要时异步加载它们。通过loader转换,任何形式的资源都可以被视为一个模块,例如CommonJs模块、AMD模块、ES6模块、CSS、图像、JSON、Coffeescript、LESS等。

 即,webpack是前端资源模块化管理和打包工具.如果做过web工程,比如java web,我们会发现,前端的封装相比后端,根本就是地狱模式。类似jsp自定义标签等工具确实在框架层面上对组件化给予了很大支持,

我知道的有两个思路,一个是定义标签的方式,如 , 等,对业务代码人员,样式和常用的js是透明的。在各种管理平台上,这个挺有用的,我感觉比较不错的是 easyui,当然,这个是用js做客户端模板渲染的.
还有一种,参考extjs,我没用过extjs,但和swing的思路应该殊途同归。

 既然都是纯前端了,那就放弃服务端模板引擎吧 ,但没有编译这样的环节可不好,那webpack等工具就横空出世了.

以上是我自己开发期间的感受。它可能有更大的局限性。更多了解请直接查看官网。

安装node,安装webpack

自己百度一下

一个非常简单的例子

两个文件,entry.js,index.html

  • 索引.html
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>
  • 入口.js
document.write('helloWorld.')
  • 编译:
E:\codeplace\n_learn\node\webpack\c1>webpack entry.js bundle.js

Hash: 71820986fc674176394e
Version: webpack 1.13.0
Time: 38ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./entry.js 27 bytes {
   0} [built]
  • 运行:
    直接访问index.html
    界面出现 helloWorld

  • 分析webpack生成的bundle.js

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};

/******/     // The require function
/******/     function __webpack_require__(moduleId) {

/******/         // Check if module is in cache
/******/         if(installedModules[moduleId])
/******/             return installedModules[moduleId].exports;

/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             exports: {},
/******/             id: moduleId,
/******/             loaded: false
/******/         };

/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/         // Flag the module as loaded
/******/         module.loaded = true;

/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }


/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;

/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;

/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";

/******/     // Load entry module and return exports
/******/     return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    document.write('It works.')

/***/ }
/******/ ]);

单纯这段代码,流程很好理解的,不过很多变量不清楚做法.
如果不太清楚流程,通过打断点的方式分析一下。
这里写图片描述

  • 说明:
    上面的例子,可以理解为webpack是一个编译的过程(或者说是构建,这和ant,maven很像),生成bundle.js类似于java的字节码 。。。=.=

添加webpack配置文件

上面的例子只有两个文件,用一个命令行就可以完成。如果业务复杂的话这个就不行了,所以引入了一个配置文件。

  • webpack.config.js 文件内容
module.exports = {
    entry: './entry.js',
    output: {
        filename: 'bundle.js'
    }
};

index.html和entry.js与之前相同

  • 直接在目录下运行webpack进行编译
  • 操作情况与上例相同

如果我想添加css

这里有一个loader的概念,

Webpack 本身只能处理 JavaScript 模块。如果要处理其他类型的文件,则需要使用加载器进行转换。 Loader可以理解为模块和资源的转换器。它本身是一个函数,接受源文件作为参数并返回转换结果。这样,我们就可以要求加载任何类型的模块或文件,例如 CoffeeScript、JSX、LESS 或图像。

由于我们要引入css模块,所以我们需要在配置文件中添加一些东西。

module.exports = {
    entry: './entry.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }]
    }
};
  • 我们新增个css
    app.css
h1{ background-color: blue; }
  • Entry.js 应该导入这个 css 文件
require('./app.css');
document.write('<h1>helloworld.<h1>')

和其他事情一样,直接 webpack 编译会抛出错误,因为 style-loader 还没有从 npm 下载。我们在这里下载吧。

npm install css-loader style-loader

然后编译,运行,OK,

  • 说明 :
    css是非常灵活的,之前看到有时维护的时候,直接在index.html 中引入一个css,这样,这个css就不需要经过编译这一环节了.但这样是不好的,尽量还是要纳入webpack中来, 即使是全局。

其他

参考:http://webpackdoc.com/
文中代码
https://github.com/huawumingguo/webpackdemo

. . .

相关推荐

额外说明

springboot-基于docx填充生成word文件并导出pdf

文章目录 前言 将docx模板填充数据生成doc文件 1、依赖引入 2、doc文件转换docx,并标注别名 3、编写java代码实现数据填充 docx文件填充数据导出pdf(web) 1、依赖引入 2、字体文件 3、编写工具类 4、编写测试接口 请求测试

额外说明

如果集成dynamic-datasource实现多数据源增强

        dynamic-datasource是一个基于springboot的快速集成多数据源的启动器。同时支持数据源分组、数据库敏感配置信息加密、自定义注解、动态增加移除数据源、读写分离、本地多数据源事务方案、基于Seata的分布式事务方案等。

额外说明

Spring Boot学习笔记(未完待续……)

一、前言 1.1 SpringBoot简介 Spring Boot 是 Spring 家族中的一个全新的框架,它用来简化 Spring 应用程序的创建和开发过程,也可以说 Spring Boot 能简化我们之前采用 SpringMVC + Spring

额外说明

清理数据库日志SQL语句

查询数据库日志文件名 USE 数据库名称 GO SELECT file_id, name,size,* FROM sys.database_files; 清理数据库日志 --SQL2008: --在SQL2008中清除日志就必须在简单模式下进行,等清除

额外说明

MFC f:\dd\vctools\vc7libs\ship\atlmfc\src\mfc\dlgdata.cpp 行:40

控件的变量有初始化,因为控件都删除了,所以对控件上的变量初始化会报错。

额外说明

jQuery ——(很全、很清晰,三小时带你学会 jQuery 基础)

简介- 个人简介:在校大学生一枚-‍- 个人主页:-Baymax- -‍♂️ 博客内容:WEB前端(JavaScript、jQuery、AJAX、ES6、Vue…) - 支持大白:点赞-、收藏⭐、关注- 我来创作,我们来学习,与君共勉-。持续创作中…-

额外说明

【转载】RedisUtils 操作五大集合 增删改查

前排提示,我在这个工具类加了@Component注解,如果在springboot的项目使用,记得通过@Autowired注入使用。 import org.springframework.beans.factory.annotation.Autowired

额外说明

mycat 常用分片规则使用详解

前言 在上一篇,详细了解了使用mycat进行数据库的垂直拆分和表的水平拆分,本篇在此基础上继续探讨mycat的常用分片规则。 什么是分片规则? 分片规则就是按照一定的规则(算法),将数据分散存储到多个物理节点上,从根本上来说,是为了解决单节点数据容量过大

额外说明

k8s存储PV与PVC使用详解

一、前言 在整个k8s集群中,有一些存储资源,比如说NFS、CIFS等存储,这些存储都是由集群管理人员提前去创建的,不同的存储方式不一样, 如果都掌握才可以使用,则很不方便 ; 所以在k8s中提供了新的对象资源叫做PV(Persistent Volume

额外说明

英语学习笔记2019-11-29

英语学习笔记2019-11-29 Now we're living in a network-based information era and the Internet is closely related to our study, work and

ads via 小工具