實戰項目中的 Webpack 配置：

說明：以下命令通過 Git Bash 執行

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的相關信息（主要是安裝模塊信息）

2.安裝 Webpack

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

3.建立項目所需文件夾

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, 引入一會打包后的 bundle.js 文件。
src下新建script和style文件夾，如下圖所示：

4.配置 webpack.config.js

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

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

function helloWorld() {}

Git Bash 運行以下命令

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

打包成功以后，在 dist下會多一個js文件夾，里邊是打包后文件bundle.js.
最簡單的 Webpack 打包配置完成。

總結

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

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