【前端工程】前端打包之webpack(一)

認識webpack

webpack_是一個現代 JavaScript 應用程序的_靜態模塊打包器(module bundler)_。當 webpack 處理應用程序時，它會遞歸地構建一個_依賴關係圖(dependency graph)_，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個_bundle_。

webpack打包初步

一、建立文件、初始化化項目生成package.json、安裝webpack、webpack-cli(能夠在命令行執行webpack)

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

二、建立目錄
建立src/index.js、dist/index.html

最初咱們都是經過非模塊化開發方式開發一個應用頁面，將邏輯寫在js文件中，而後在html中經過script引入js文件。但當應用程序愈來愈複雜，頁面須要引入的js文件就會愈來愈多，在瀏覽器端每個文件的加載都會作一次請求。而webpack的好處之一就是能夠將應用程序依賴的全部的包打包成一個js文件供index.html主頁面引用，大大減小了加載的文件數量。

三、執行npx webpack 打包文件

npx會執行webpack包中的二進制文件，默認將src中的index.js做爲應用程序的文件入口，將因此依賴的文件打包成一個main.js輸出到dist文件夾中。index.html引入main.js文件就能夠訪問到頁面內容。

四、自定義webpack配置文件

對於複雜的應用程序須要更復雜的配置能夠經過建立webpack.config.js文件來自定義配置。

例如自定義入口文件、輸出文件的名稱和目錄等等。

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

五、package.json中配置腳本

scrips中配置命令行，npm run build代替npx webpack 打包文件。

執行npm run build就會將entry指定的入口文件./src/index.js中的內容打包到指定的dist/bundle.js中。

六、自動刷新頁面

參考資料：

• webpack入門