webpack——简单入门

1.介绍

Webpack 是当下最热门的前端资源模块化管理和打包工具。它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还能够将按需加载的模块进行代码分隔，等到实际须要的时候再异步加载。经过 loader 的转换，任何形式的资源均可以视做模块，好比 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

 

2.安装

咱们须要安装一个node.js ， Node.js 自带了软件包管理器 npm，建议使用最新版node.js.

经过npm安装webpack:

$ npm install webpack -g

安装成功后经过 webpack -h 查看帮助

3.使用

咱们创建一个项目来使用一下webpack吧！

新建一个demo1文件夹，

经过npm init 建立一个package.json文件：（看不懂的能够一直回车，没什么关系）

 

咱们把webpack安装到当前的项目依赖中：

 

安装后package.json：

 

新建一个index.html：

 

新建一个main.js（根据传统使用helloword！！）：

document.write('<h1>Hello World</h1>');

新建一个webpack.config.js：

// webpack.config.js
module.exports = {
 entry: './main.js', 
 output: {
 filename: 'bundle.js'
 }
 };

这个文件的意思是 把main.js文件打包为bundle.js文件。

其中bundle.js文件是Webpack生成出来的，不是咱们建立的。

cmd键入命令：

$ webpack

 

打开index.html就能看到 hello world 了.

webpack也能够将依赖模块打包到一个文件：

新建一个main1文件

// main1.js
document.write('<h1>Hello World</h1>');

更改main.js文件

//main.js
document.write('<h1>Hello World</h1>');
require("./main1.js")

从新打包 能够看到页面

 

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

webpack还能够打包多个入口文件：

在原来项目下新建文件夹，进入文件夹：

新建main1.js main2.js文件：

// main1.js
document.write('<h1>Hello World</h1>');
 
// main2.js
document.write('<h2>Hello Webpack</h2>');

新建webpack.config.js文件：

//webpack.config.js
module.exports = {
 entry: {
 bundle1: './main1.js',
 bundle2: './main2.js'
 },
 output: {
 filename: '[name].js'
 }
}

新建 index.js:

 

从新打包 能够看到页面。