1. 程式人生 > >實例講解webpack的基本使用第二篇

實例講解webpack的基本使用第二篇

文件的 分享 fig .com size 如何 try 基本 bpa

這一篇來講解一下如何設置webpack的配置文件webpack.config.js

我們新建一個webpack-demo的項目文件夾,然後安裝webpack

技術分享

執行如下命令

技術分享

在項目文件夾下,建一個dist文件夾來放打包後的文件,以及一個src文件夾來放我們的代碼文件

再建立一個index.html文件,以及一個webpack.config文件。

文件目錄結構如下:

技術分享

在src/js目錄下新建一個main.js文件。

技術分享

然後設置webpack.config.js

技術分享

基本配置:entry表示打包的入口文件。

output表示打包之後文件的輸出設置。

設置好之後,我們執行webpack命令。

發現dist文件夾下生成了一個main.bound.js文件。

我們還可以在package.json文件裏面添加一些webpak打包的參數:然後執行npm run webpack。可以看到打包的詳細信息。

技術分享

實例講解webpack的基本使用第二篇