這一篇來講解一下如何設置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。可以看到打包的詳細信息。

entry入口配置講解：

entry的配置可以是一個數組數組形式會將數組的每一項打包到一個js文件中。

也可以是一個對象，是一個對象的時候會打包生成多個文件。需要結合inputput使用

在src/js目錄下新建一個a.js文件，然后按照如上的設置添加一個[name]占位符，執行npm run webpack命令

生成的結果如下：單獨生成了兩個打包后的文件。

還有兩個占位符分別為[hash]和[chunkhash]，[hash]每次打包都會生成一個新的文件，chunkhash則只會生成修改過的文件。這對于打包上線的時候是很有幫助的。

這一篇關于主要講解了webpack.config的配置項entry和output的使用。

下一篇講解一下htmlWebpackPlugin自動化打包html文件插件的使用。

?

轉載于:https://www.cnblogs.com/xinggood/p/6815340.html

總結

以上是生活随笔為你收集整理的实例讲解webpack的基本使用第二篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。