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:

 

重新打包 可以看到页面。