webpack教程

来源：互联网发布：结构优化算法编辑：程序博客网时间：2024/06/03 22:58

本文为阅读http://zhaoda.net/webpack-handbook/usage.html文章后总结而得

为什么要使用webpack

1、无需用户再去纠结于复杂的依赖关系

2、当有很多模块需要加载时，传统的方法有两种：

每个模块分别请求，这样会导致请求过多，影响速度
一个请求获取所有模块，这样会导致模块太大，同样影响速度

webpack通过懒加载的方式，只加载当前需要的模块，而非在最开始就获取所有模块，且无论css、js都可以通过webpack进行整合加载

使用方法

bundle.js：其他待加载文件通过webpack ‘待加载文件’ bundle.js将资源打包到bundle.js中

entry.js：待加载资源，若该资源还需要调用其它模块，则通过require（'./待加载文件）调用。

待加载文件：通过module.exports=.....，将exports的内容供外部调用。

example：

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

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

// entry.jsdocument.write('It works.')

然后编译 entry.js 并打包到 bundle.js：

$ webpack entry.js bundle.js

打包过程会显示日志：

Hash: e964f90ec65eb2c29bb9Version: webpack 1.12.2Time: 54ms    Asset     Size  Chunks             Chunk Namesbundle.js  1.42 kB       0  [emitted]  main   [0] ./entry.js 27 bytes {0} [built]

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

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

// module.jsmodule.exports = 'It works from module.js.'// entry.jsdocument.write('It works.')document.write(require('./module.js')) // 添加模块

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

Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

配置webpack

可以看到，上面的语句有些复杂，在cmd中需要打很长的命令。那么如何简化呢，通过全局配置webpack。为了配置webpack，我们需要对两个文件进行编写。

package.json

{  "name": "webpack-example",  "version": "1.0.0",  "description": "A simple webpack example.",  "main": "bundle.js",//我们的html要加载的最终通过webpack生成的文件  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [    "webpack"  ],  "author": "zhaoda",  "license": "MIT",  "devDependencies": {//注意这些依赖都是事先已经安装好的    "css-loader": "^0.21.0",    "style-loader": "^0.13.0",    "webpack": "^1.12.2"  }}

然后运行npm install

webpack.config.js

该文件返回给我们的是一个json 格式的配置信息对象。

var webpack = require('webpack')module.exports = {  entry: './entry.js',//入口文件，我们的待加载主文件  output: {//webpack处理后生成文件的路径及名称    path: __dirname,    filename: 'bundle.js'  },  module: {    loaders: [//加载器      {test: /\.css$/, loader: 'style!css'}    ]  }}

然后我们只需要在cmd运行webpack，就可以事先与上文webpack entry.js bundle.js 一样的功能了。

0 0