《JavaScript模块化开发实验webpack入门》由会员分享，可在线阅读，更多相关《JavaScript模块化开发实验webpack入门（7页珍藏版）》请在金锄头文库上搜索。
1、 http:/xueyuan.lanqiao.orgJavaScript 模块化开发实验（2）webpack 入门0.前情回顾上一章我们主要介绍了 amd 模块化规范和 requirejs 的用法。需要指出的是虽然requirejs 非常好地实现了 amd 规范，但它只是一个模块加载器，而现在的前端开发除了模块加载以外，还需要一套工程化构建流程及支持工具。所谓工程化构建，包括：代码的编译、调试、代理、打包部署等。因此本章介绍：webpack一款模块加载器兼打包工具，它同时支持 amd、cmd 写法，还有丰富的插件可以对代码进行混淆压缩等优化。1.安装 node（npm）和 webpacknod
2、e-windows 安装，其他系统安装请自行解决，本文重点是 webpack。webpack 安装我们直接使用 npm 的形式来安装：1. npm install webpack -g如果访问国外网站很慢，可以先执行这个命令：1. npm install -g cnpm -registry=https:/registry.npm.taobao.org以后就可以用 cnpm install pck-name 来安装 npm 生态圈的各种包了。安装 webpack，后面我们就可以使用 webpack 命令来构建项目。2.规划项目的目录结构1. www/2. -js/3. -app/4. +todo
3、.js http:/xueyuan.lanqiao.org5. +todo.html实际项目中，我们还会有 img,font,css 等目录，我们尽可能只演示 js 的模块化和打包，因此上面的目录结构非常简单。3.todo 添加功能的实现学语言写 helloworld，学前端写 todo.我们只想做最简单的功能（输入姓名和内容提交，上方会新增一个条目），因为功能不是重点，重点是模块化开发和 webpack 的使用：todo.html1. 2. 3. 4. 5. todo 列表6. 7. 8. 9. 10. 11. 12. 13. http:/xueyuan.lanqiao.org14. 15.
4、 16. 17. 18. 19. 20. 21.没有 script 标签，我们暂不依赖任何 js，后面自有玄机。todo.js先用 npm 方式安装 jquery 到本地，执行命令： cnpm install jquery -save-dev1. var $ = require(jquery);/用包名即可 2.3. $(function() 4. $(#btn-submit).click( function() 5. var username = $(#username).val();6. var content = $(#content).val();7. var $todo = $().
5、html(username + : + content);8. $(.todolist ul).append($todo);9. );10.);第一行代码是 commonJS 的写法，依赖的包需要提前使用 npm 安装到当前工程目录下的node_modules 目录下，剩余代码就是常规的 jquery 使用方法：获取值，操作 dom。但是，现在的 todo.html 是不会有任何互动效果的，因为它没有加载 todo.js。现在轮到 webpack上场了，我们曾号称它是模块加载器和打包工具。4.webpack 基本配置我们在 node 环境下工作，还需执行下述命令（只需执行一次）来添加本次构建任
6、务的依赖：1. npm init #生成 package.json http:/xueyuan.lanqiao.org2. cnpm install webpack -save-dev #本地安装 webpack 包，保证 require(webpack);可以成功对于第二条命令，你可能不是很理解，之前我们不是安装过 webpack 吗？上一次安装是我们需要使用 webpack 命令，而这次安装是因为我们在代码中要依赖这个模块。你可以理解为上次安装了一个工具（命令行），这次是下载了一个模块 (node_modules 目录下 )。以后我们还会安装更多工具和模块。项目工程路径下新建 webpac
7、k.config.js：1. var webpack = require(webpack); /依赖 npm 安装的 webpack，只需引用名字2.3. /导出所有配置项4. module.exports = 5. /入口文件名称-路径配置6. entry: 7. todo : ./js/app/todo.js8. ,9. /入口文件的输出10. output: 11. path: dist/js/app/,12. filename: name.js13. 14.15.;这份配置文件告诉 webpack 入口文件在哪里，出口文件去哪里。5.添加插件，自动为 html 插入脚本因为编译后的产出
8、物路径会根据配置的变化而变化，所以在 html 中写死依赖脚本的路径需要手工维护，现在我们介绍一种插件，可以自动将脚本路径插入 html 中。执行下列命令安装插件：cnpm install html-webpack-plugin -save-dev在配置文件 webpack.config.js 中使用插件，本例完整的配置文件如下：1. var webpack = require(webpack); /依赖 npm 安装的 webpack，只需引用名字 http:/xueyuan.lanqiao.org2. /导入 Html-Webpack-Plugin3. const HtmlWebpackP
9、lugin = require(html-webpack-plugin);4. /新建实例，配置模板（依赖脚本路径留空的页面）、产出路径、插入在什么节点5. const HTMLWebpackPluginConfig = new HtmlWebpackPlugin(6. template: $_dirname/todo.html,7. filename: ././todo.html,/相对于入口文件输出位置的路径8. inject: body,9. );10./导出所有配置项11.module.exports = 12. /入口文件名称-路径配置13. entry: 14. todo : ./
10、js/app/todo.js15. ,16. /入口文件的输出17. output: 18. path: dist/js/app/,19. filename: name.js20. ,21. / plugins 放置所使用的插件，这里使用前面 HTMLWebpackPluginConfig 实例22. plugins: HTMLWebpackPluginConfig23.;请仔细阅读注释以了解代码的含义。6.构建并查看效果构建1. webpack -display-error-details #根据配置进行构建后面的参数-display-error-details 是推荐加上的，方便出错时能查
11、阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。 其他主要的参数有：1. $ webpack -config XXX.js /使用另一份配置文件（比如 webpack.config2.js）来打包2. $ webpack -watch /监听变动并自动打包3. $ webpack -p /压缩混淆脚本，这个非常非常重要！4. $ webpack -d /生成 map 映射文件，告知哪些模块被最终打包到哪里了 http:/xueyuan.lanqiao.org其中的 -p 是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb（主要是样式这块
12、一句就独占一行脚本，导致未压缩脚本变得很大）。盘点产出物1.编译后的脚本查看 dist/js/app/目录，发现生成了一个 todo.js 文件，这个文件和我们自己编写的todo.js 完全不一样，这里面不仅包含了我们写的代码，还直接合并了 jquery 的代码（第 78 行）。如果我们的 webpack 命令带上了-p 命令，那这里面的代码就更面目全非了，因为-p 会压缩代码。直接 require 是 commonJS 就近加载的写法，默认情况下会导致 webpack 将依赖的文件合并至入口文件。这样做的好处在于，可以减少浏览器的 http 请求次数（一个页面只有一个入口 js 文件），但会
13、增大入口文件的 size。2.生成的 htmldist 目录下会出现一个和项目根路径下的 todo.html 相似的 todo.html，不同的是，生成的 html 中 body 标签的最后插入了脚本的定位。1. .2. 3. 运行 todo.html如果前面都做对的话，用浏览器打开 dist/todo.html，就能看到我们预期的功能都实现了。7.总结关于 webpack http:/xueyuan.lanqiao.org可以看到 Webpack 的目标就是对项目中的静态资源进行统一管理，为产品的最终发布提供最优的打包部署方案。node、npm 和 commonJS npm 是 node 的
14、包管理器，通过它能获得可直接运行的命令行工具如 webpack，也需要用它来下载各种模块如 jquery（内容是代码） commonJS 是 node 管理包的规范，我们需要安装依赖的包到 node_modules，然后用require(pkg-name)来依赖，也可以依赖任意路径下的 js 模块，但需要写全路径。配置 webpack 的配置文件是一个 js 文件，是以 js 语法来书写的，首先导入 webpack 对象，然后导出一个配置对象 webpack 把入口文件视为一个模块，默认情况下会把它依赖的模块的代码合并到入口文件中，这样做有利有弊 为了自动管理页面和脚本、样式之间的关系，我们使用了 html-webpack-plugin 插件，它会根据配置将标签自动插入新生成的页面中。本文来源：蓝桥软件学院
