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

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

?

執(zhí)行如下命令

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

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

文件目錄結(jié)構(gòu)如下：

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

然后設(shè)置webpack.config.js

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

????????????? output表示打包之后文件的輸出設(shè)置。

設(shè)置好之后，我們執(zhí)行webpack命令。

發(fā)現(xiàn)dist文件夾下生成了一個main.bound.js文件。

我們還可以在package.json文件里面添加一些webpak打包的參數(shù)：然后執(zhí)行npm run webpack。可以看到打包的詳細信息。

entry入口配置講解：

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

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

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

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

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

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

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/xinggood/p/6815340.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。