實(shí)戰(zhàn)項(xiàng)目中的 Webpack 配置：

說(shuō)明：以下命令通過(guò) Git Bash 執(zhí)行

1.建立webpack-demo文件夾及npm初始化

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project $ mkdir webpack-demoAdministrator@PC-20170414ZFJO MINGW64 /g/gentle/project $ cd webpack-demo/Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo $ npm init

然后一路回撤，npm初始化成功，建立package.json，用于存放npm的相關(guān)信息（主要是安裝模塊信息）

2.安裝 Webpack

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo $ npm install webpack --save-dev

3.建立項(xiàng)目所需文件夾

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo $ mkdir srcAdministrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo $ mkdir dist

然后Sublime打開"webpack-demo"，并新建 index.html, 引入一會(huì)打包后的 bundle.js 文件。
src下新建script和style文件夾，如下圖所示：

4.配置 webpack.config.js

官方文檔地址：https://webpack.js.org/configuration/ 根目錄下新建 webpack.config.js文件，配置內(nèi)容如下： const path = require('path'); module.exports = {entry: './src/script/main.js', // 入口文件的配置項(xiàng)output:{ // 出口文件的配置項(xiàng)path: path.resolve(__dirname, 'dist/js'), // 打包的路徑文職filename: 'bundle.js' // 打包的文件名稱} };

新建入口文件 main.js 及代碼如下：

function helloWorld() {}

Git Bash 運(yùn)行以下命令

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project/webpack-demo $ webpack

打包成功以后，在 dist下會(huì)多一個(gè)js文件夾，里邊是打包后文件bundle.js.
最簡(jiǎn)單的 Webpack 打包配置完成。

總結(jié)

以上是生活随笔為你收集整理的建立项目的webpack简单配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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