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:

 

從新打包 能夠看到頁面。