小編給大家分享一下webpack模塊化管理和打包工具的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)是由多位在大型網(wǎng)絡(luò)公司、廣告設(shè)計公司的優(yōu)秀設(shè)計人員和策劃人員組成的一個具有豐富經(jīng)驗的團隊，其中包括網(wǎng)站策劃、網(wǎng)頁美工、網(wǎng)站程序員、網(wǎng)頁設(shè)計師、平面廣告設(shè)計師、網(wǎng)絡(luò)營銷人員及形象策劃。承接：成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、網(wǎng)站改版、網(wǎng)頁設(shè)計制作、網(wǎng)站建設(shè)與維護、網(wǎng)絡(luò)推廣、數(shù)據(jù)庫開發(fā),以高性價比制作企業(yè)網(wǎng)站、行業(yè)門戶平臺等全方位的服務(wù)。

Webpack簡介

webpack是當(dāng)下最熱門的前端資源模塊化管理和打包工具。 它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際

需要的時候再異步加載。通過 loader  的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

模塊系統(tǒng)的演進

這是最原始的 JavaScript 文件加載方式，如果把每一個文件看做是一個模塊，那么他們的接口通常是暴露在全局作用域下，也就是定義在 window  對象中，

不同模塊的接口調(diào)用都是一個作用域中，一些復(fù)雜的框架，會使用命名空間的概念來組織這些模塊的接口，典型的例子如 YUI  庫。

這種原始的加載方式暴露了一些顯而易見的弊端：

1. 全局作用域下容易造成變量沖突

2. 文件只能按照  

   創(chuàng)建entry.js

   // entry.js : 在頁面中打印出一句話
   document.write('It works.')

   然后編譯 entry.js并打包到 bundle.js文件中

   // 使用npm命令 
   webpack entry.js bundle.js

   使用模塊

   1.創(chuàng)建模塊module.js,在內(nèi)部導(dǎo)出內(nèi)容

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

   2.在entry.js中使用自定義的模塊

   //entry.js
   document.write('It works.')
   document.write(require('./module.js')) // 添加模塊

   加載css模塊

   1.安裝css-loader

   npm install css-loader style-loader --save-dev

   2.創(chuàng)建css文件

   //style.css
   body { background: yellow; }

   3.修改 entry.js：

   require("!style-loader!css-loader!./style.css") // 載入 style.css
   document.write('It works.')
   document.write(require('./module.js'))

   創(chuàng)建配置文件webpack.config.js

   1.創(chuàng)建文件

   var webpack = require('webpack')
   
   module.exports = {
    entry: './entry.js',
    output: {
     path: __dirname,
     filename: 'bundle.js'
    },
    module: {
     loaders: [
       //同時簡化 entry.js 中的 style.css 加載方式：require('./style.css')
      {test: /\.css$/, loader: 'style-loader!css-loader'}
     ]
    }
   }

   2.修改 entry.js 中的 style.css 加載方式：require('./style.css')

   3.運行webpack

   在命令行頁面直接輸入webpack

   插件使用

   1.插件安裝

   //添加注釋的插件
   npm install --save-devbannerplugin

   2.配置文件的書寫

   var webpack = require('webpack')
   
   module.exports = {
     entry: './entry.js',
     output: {
       path: __dirname,
       filename: 'bundle.js'
     },
     module: {
       loaders: [
         //同時簡化 entry.js 中的 style.css 加載方式：require('./style.css')
         {
           test: /\.css$/,
           loader: 'style-loader!css-loader'
         }
       ],
       plugins: [
         //添加注釋的插件
         new webpack.BannerPlugin('This file is created by zhaoda')
       ]
     }
   }

   3.運行webpack

   // 可以在bundle.js的頭部看到注釋信息
   /*! This file is created by zhaoda */

   開發(fā)環(huán)境

   webpack

   --progress : 顯示編譯的進度

   --colors ：　帶顏色顯示，美化輸出

   --watch?。骸￠_啟監(jiān)視器，不用每次變化后都手動編譯

   12.4.7.1. webpack-dev-server

   開啟服務(wù),以監(jiān)聽模式自動運行

   1.安裝包

   npm install webpack-dev-server -g --save-dev

   2.啟動服務(wù)

   實時監(jiān)控頁面并自動刷新

   webpack-dev-server --progress --colors

   自動編譯

   1.安裝插件

   npm install --save-dev html-webpack-plugin

   2.在配置文件中導(dǎo)入包

   var htmlWebpackPlugin = require('html-webpack-plugin')

   3.在配置文件中使用插件

   plugins: [
       //添加注釋的插件
       new webpack.BannerPlugin('This file is created by zhaoda'),
       //自動編譯
       new htmlWebpackPlugin({
         title: "index",
         filename: 'index.html', //在內(nèi)存中生成的網(wǎng)頁的名稱
         template: './index.html' //生成網(wǎng)頁名稱的依據(jù)
       })
     ]

   4.運行項目

   webpack--save-dev

   以上是“webpack模塊化管理和打包工具的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

   
   本文題目：webpack模塊化管理和打包工具的示例分析
   本文地址：http://weahome.cn/article/gcgcpp.html