一.介绍：

　　　　Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生

　　产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转

　　换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、　　

　　Coffeescript、 LESS等。

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

　　静态资源。

二.Webpack 和其他模块化工具有什么区别呢？

　　1.代码拆分：

　　2.Loader:

　　3.智能解析：

　　4.插件系统：

　　5.快速运行：

三.安装使用：

　　1.用 cnpm 全局安装 Webpack： cnpm install webpack -g

　　2.本地安装使用：cnpm install webpack --save-dev

　　3.项目初始化：

　　　　（1）.建立mywebpack文件夹并初始化项目：C:\mywebpack>npm init

　　　　（2）.如果不是实际项目可以一路回车完成初始化，安装本地webpack：C:\mywebpack>cnpm install webpack --save-dev  完成安装。可以使用 C:\mywebpack>dnpm info webpack 查看webpack 的版

　　　　　　本；也可以看到package.json中例如：

　　　　　　　　"devDependencies": {
　　　　　　　　　　"webpack": "^1.14.0"
　　　　　　　　　}

　　　　　　　　webpack安装成功！

　　　　（3）.使用webpack:

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

　　　　　　　　<!-- index.html -->

　　　　　　　　<html>

　　　　　　　　<head>

 　　　　　　　 　　<meta charset="utf-8">

　　　　　　　　</head>

　　　　　　　　<body>

 　　　　　　　　　 <script src="bundle.js"></script>

　　　　　　　　</body>

　　　　　　</html>


　　　　　　// entry.js

　　　　　　document.write('It works.')

　　　　　　然后编译 entry.js 并打包到 bundle.js: C:\mywebpack> webpack entry.js bundle.js

　　　　　　用浏览器打开 index.html 将会看到 It works.　　　　　

　　　　　　接下来添加一个模块 module.js 并修改入口 entry.js：

　　　　　　// module.js

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


　　　　　　// entry.js

　　　　　　document.write('It works.')

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

　　　　　　重新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.

　　　　（4）.Loader：Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader

　　　　　　　　进行转换。

　　　　　　上一节的例子，我们要在页面中引入一个 CSS 文件 style.css，首页将 style.css 也看成是一个模块，

　　　　　　然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中　　

　　　　　　/* style.css */

　　　　　　body { background: yellow; }

　　　　　　修改 entry.js：

　　　　　　require("!style!css!./style.css") // 载入 style.css

　　　　　　document.write('It works.')

　　　　　　document.write(require('./module.js'))
　　　　　　

　　　　　　安装 loader：

　　　　　　C:\mywebpack>cnpm install css-loader style-loader
　　　　　　重新编译打包，刷新页面，就可以看到黄色的页面背景了。
　　　　　　

　　　　　　如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（扩展名）来自动绑定需要的 loader。

　　　　　　将 entry.js 中的 require("!style!css!./style.css") 修改为 require("./style.css") ，然后执行：

　　　　　　　　$ webpack entry.js bundle.js --module-bind 'css=style!css'

　　　　　　# 有些环境下可能需要使用双引号

　　　　　　　　$ webpack entry.js bundle.js --module-bind "css=style!css"

　　　　　　显然，这两种使用 loader 的方式，效果是一样的。

　　　　（5）.配置文件：继续我们的案例，在根目录创建 package.json 来添加 webpack 需要的依赖。　　　

　　　　　　　{

 　　　　　　　　"name": "webpack-example",

 　　　　　　　　"version": "1.0.0",

  　　　　　　　　"description": "A simple webpack example.",

  　　　　　　　　"main": "bundle.js",

 　　　　　　　　 "scripts": {

   　　　　　　　 　　"test": "echo \"Error: no test specified\" && exit 1"

 　　　　　　　　 },

  　　　　　　　　"keywords": [

    　　　　　　　　　　"webpack"

  　　　　　　　　],

  　　　　　　　　"author": "",

  　　　　　　　　"license": "ISC",

  　　　　　　　　"devDependencies": {

    　　　　　　　　　　"css-loader": "^0.21.0",

    　　　　　　　　　　"style-loader": "^0.13.0",

    　　　　　　　　　　"webpack": "^1.12.2"

  　　　　　　　　　}

　　　　　　　　}

　　　　　　运行C:\mywebpack>cnpm install

　　　　　　然后创建一个配置文件 webpack.config.js：

　　　　　　　　var webpack = require('webpack')

　　　　　　　　module.exports = {

  　　　　　　　　entry: './entry.js',

  　　　　　　　　output: {

    　　　　　　　　path: __dirname,

    　　　　　　　　filename: 'bundle.js'

  　　　　　　　　},

 　　　　　　　　 module: {

    　　　　　　　　　loaders: [

      　　　　　　　　　　{test: /\.css$/, loader: 'style!css'}

    　　　　　　　　　]

  　　　　　　　　}

　　　　　　　　}

　　　　　　同时简化 entry.js 中的 style.css 加载方式：

　　　　　　require('./style.css')

　　　　　　webpack 通过配置文件执行的结果和上一章节通过命令行 :

　　　　　　C:\mywebpack>webpack entry.js bundle.js --module-bind 'css=style!css' 执行的结果是一样的.

　　　　（6）.插件：

　　　　　　接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出

　　　　的文件头部添加注释信息。　　　　　

　　　　　　修改 webpack.config.js，添加 plugins：

　　　　　　　　var webpack = require('webpack')

　　　　　　　　module.exports = {

  　　　　　　　　entry: './entry.js',

  　　　　　　　　output: {

   　　　　　　　　 path: __dirname,

   　　　　　　　　 filename: 'bundle.js'

 　　　　　　　　 },

  　　　　　　　　module: {

    　　　　　　　　loaders: [

      　　　　　　　　{test: /\.css$/, loader: 'style!css'}

   　　　　　　　　 ]

  　　　　　　　　},

  　　　　　　　　plugins: [

    　　　　　　　　new webpack.BannerPlugin('This file is created by zhaoda')

  　　　　　　　　]

　　　　　　　　}

　　　　　　然后运行 webpack，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息：

　　　　　　　　　　/*! This file is created by zhaoda */

　　　　　　　　　　/******/ (function(modules) { // webpackBootstrap

　　　　　　　　　　/******/  // The module cache

　　　　　　　　　　/******/  var installedModules = {};

　　　　　　　　　　// 后面代码省略

　　　　（7）.开发环境：

　　　　　　　　当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色：

　　　　　　　　　　C:\mywebpack>webpack --progress --colors

　　　　　　　　如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编

　　　　　　　译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

　　　　　　　　　　C:\mywebpack>webpack --progress --colors --watch

　　　　　　　　使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静

　　　　　　态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 　

　　　　　　可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新

　　　　　　页面。

　　　　　　　　# 安装

　　　　　　　　　C:\mywebpack>cnpm install webpack-dev-server -g　　　　

　　　　　　　　# 运行

　　　　　　　　　C:\mywebpack>webpack-dev-server --progress --colors

四.注意事项：记得每次打包到bundle.js的时候需要清空bundle.js中的内容不然文件会被多次打包加入其中,显示内容会出错。

　　　　　　

Webpack:前端资源模块化管理和打包工具的更多相关文章

  1. webpack模块化管理和打包工具

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

  2. Webpack, 现在最流行的模块打包工具.压缩打包

    压缩bundle.js 1.把我们项目的代码从es6 -> es5 [babel] 参考:http://babeljs.io/docs/setup/#installation 1.1.安装包 b ...

  3. Webpack打包工具学习使用

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

  4. webpack打包工具的初级使用方法

    这里下载的是webpack的3.8.1版本(新版更新的使用有些问题) 什么是webpack? 他是一个前端资源加载或打包工具,. 资源: img css json等. 下载的话 用 npm webpa ...

  5. 打包工具webpack和热加载深入学习

    本次小编呢,为大家带来一篇深入了解打包工具 webpack. 我们今天使用的是 webpack3.8.1版本的,我们学习使用 3.8.1更稳定些,并学习自己如何配置文件,最新版本不需要自己配置文件,但 ...

  6. 浅谈Webpack模块打包工具一

    为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁  开发阶段把散的模块打包成一个模块 解决网络请 ...

  7. 好用的打包工具webpack

    <什么是webpack> webpack是一个模块打包器,任何静态资源(js.css.图片等)都可以视作模块,然后模块之间也可以相互依赖,通过webpack对模块进行处理后,可以打包成我们 ...

  8. 模块化管理工具兼打包工具 webpack

    webpack 是一个[模块化管理工具]兼[打包工具] 是一个工具(和seajs,requirejs管理前端模块的方式是不一样) 在webpack一个文件就是一个模块! seajs,requirejs ...

  9. 前端教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-资源汇总

    内容精简 资源这么多,多看看多学习再总结肯定是好的.多读读就算看重了不算浪费时间,毕竟一千个读者就有一千个林黛玉,还有温故而知新,说不定多读一些内容,就发现惊喜了呢.不过,在此也精简一些内容,就1~2 ...

随机推荐

  1. scikit-learn一般实例之七:使用多输出评估器进行人脸完成

    本例将展示使用多输出评估期来实现图像完成.目标是根据给出的上半部分人脸预测人脸的下半部分. 第一列展示的是真实的人脸,接下来的列分别展示了随机森林,K近邻,线性回归和岭回归对人脸下半部分的预测. # ...

  2. MessageBox.Show()的各种用法

    [函数] <整型> MessageBox(<字符串> Text, <字符串> Title, <整型> nType,MessageBoxIcon); [函 ...

  3. C#开发微信门户及应用(14)-在微信菜单中采用重定向获取用户数据

    我曾经在系列文章中的<C#开发微信门户及应用(11)--微信菜单的多种表现方式介绍>中介绍了微信菜单里面的重定向操作,通过这个重定向操作,我们可以获取一个code值,然后获取用户的open ...

  4. javascript中的递归函数

    正常的递归函数如下: function factorial(num){ ){ ; }else{ ); } } 这个函数表面看起来还ok,但如果我们执行下面代码就会出错. var jenny = fac ...

  5. js的命名规范

                   js的命名规范   1.驼峰命名法:首字母是小写的,接下来的字母都以大写字符开头.例如: var testValue = 0; var oneValue = 10; 2. ...

  6. 【微信开发】公众号后台设置错误导致的微信redirect_uri参数错误【图】

    在微信开发中,如微信网页授权登录,分享到朋友圈自定义内容,微信h5支付时 可能会遇到微信redirect_uri参数错误的情况. 此时除了检查自己代码正确性外,还要检查一下是否正确地设置了公众号后台的 ...

  7. Delphi_04_Delphi_Object_Pascal_基本语法_02

    这里简单的描述Object的语法中的基本内容,数据类型.因为代码是自描述的所以不废话,直接贴代码. { 用户自定义类型 1.数组 2.动态数组 3.记录 4.集合 } program UserDefi ...

  8. JAVA 问题集中之处以及解决的办法

    也许当你看的时候,你可能认为这些都是简单的问题,有什么好记的.其实不是,我认为,我们往往是因为粗心而造成的错误,当你在开发中碰到这些问题时,你能一下看出来是什么错误,达到提高效率.而且往往你把小的问题 ...

  9. iOS之获取App的LaunchImage

    作者:里脊串 授权本站转载. 启动图(LaunchImage)的管理其实在iOS开始中算比较简单的了,尤其是Xcode引入了xcassets之后,完全是傻瓜式的操作.但是有的时候我们还是需要在Laun ...

  10. Angular版本1.2.4在IE11的IE8模式下出错解决方案

    今天,群里一个兄弟抛出一个问题(如上),截图说明. 打断点调试下,貌似是console里面的log方法出错了,如下: 这个是console的log方法,为什么错呢,继续: 我们会发现,在这里是检测fu ...