前端打包工具

最新推荐文章于 2024-08-23 22:11:34 发布

哈尼熊熊

最新推荐文章于 2024-08-23 22:11:34 发布

阅读量3.3k

点赞数 1

分类专栏： *前端

本文链接：https://blog.csdn.net/beauty5188/article/details/81510618

版权

*前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

前端打包工具是一种将前端代码进行转换，压缩以及合并等操作的程序工具。目前常见的有grunt，webpack等。

它能将我们前端人员写得less,sass等编译成css.将多个js文件合并压缩成一个js文件。它的作用就是通过将代码编译、压缩，合并等操作，来减少代码体积，减少网络请求。以及方便在服务器上运行。目前，会使用web前端打包工具是现代前端人员必备技能。

webpack

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。它将一堆文件中的每个文件都作为一个模块，找出它们的依赖关系，将它们打包为可部署的静态资源。

我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情。

一个基本的例子，想像我们有一些 CommonJS 模块，它们不能直接在浏览器中运行，所以我们需要打包成一个文件，这样就可以通过 <script> 标签加载。webpack 可以遵循 require() 调用的依赖关系，为我们完成这些工作。

但是 webpack 可以做的不止这些。通过“loader”，我们可以配置 webpack 以任何方式去转换所有类型的文件。包括以下例子：

转换 ES2015，CoffeeScript 或者 TypeScript 模块为普通的 ES5 CommonJS 模块；
可以选择在编译之前检验你的源代码；
将 Jade 模版转换为纯 HTML 并且嵌入 Javascript 字符串中；
将 Sass 文件转换为纯 CSS，然后将其转换成 JavaScript 片段，将生成的 CSS 作为 <style> 标签插入页面；
处理 HTML 或者 CSS 中引用的图片，移动到配置的路径中，并且使用 md5 hash 重命名。

当你理解 webpack 原理后会感觉它是如此强大，它可以大大优化你的前端工作流程。它主要的缺点是配置复杂麻烦。

webpack模块引入

一. HTML

直接在页面引入 webpack 最终生成的页面脚本即可，不用再写什么 data-main 或 seajs.use 了：

<!DOCTYPE html>

<html>

<head
lang="en">

  <meta
charset="UTF-8">

  <title>demo</title>

</head>

<body>

  <script
src="dist/js/page/common.js"></script>

  <script
src="dist/js/page/index.js"></script>

</body>

</html>

可以看到我们连样式都不用引入，毕竟脚本执行时会动态生成<style>并标签打到head里。

二. JS

各脚本模块可以直接使用 commonJS 来书写，并可以直接引入未经编译的模块，比如 JSX、sass、coffee等（只要你在 webpack.config.js 里配置好了对应的加载器）。

我们再看看编译前的页面入口文件（index.js）：

require('../../css/reset.scss'); //加载初始化样式

require('../../css/allComponent.scss'); //加载组件样式

var
React = require('react');

var
AppWrap = require('../component/AppWrap'); //加载组件

var
createRedux = require('redux').createRedux;

var
Provider = require('redux/react').Provider;

var
stores = require('AppStore');

var
redux = createRedux(stores);

var
App = React.createClass({

    render: function() {

        return
(

            <Provider redux={redux}>

                {function() { return
<AppWrap />; }}

            </Provider>

        );

    }

});

React.render(

    <App />, document.body

);

一切就是这么简单么么哒~ 后续各种有的没的，webpack 都会帮你进行处理。