創建項目的webpack簡單配置

實戰項目中的 Webpack 配置：

說明：如下命令經過 Git Bash 執行

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

Administrator@PC-20170414ZFJO MINGW64 /g/gentle/project
$ mkdir webpack-demo
    
Administrator@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 src

Administrator@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 打包配置完成。