二、webpack的基本配置（1）

1、建立一個檔案夾，命名為webpack-demo

初始化

npm      

安裝webpack

npm install  webpack -g --save-dev      

npm install  webpack --save-dev      

再建立兩個檔案夾，

src放代碼源檔案，dist打包過以後的檔案，

建立一個初始化的頁面indec.html，引入打包後的JS檔案,

在再src檔案夾裡面建兩個檔案夾，分别放腳步命名為script和放樣式style

給目前這個項目建一個webpack的配置檔案，命名為webpack.config.js，

config 的API 見​​​http://webpack.github.io/docs/configuration.html​​

解釋：

我們之是以在項目檔案夾下建一個webpack.config.js的檔案，是因為如果我們直接使用webpack這個指令的話，那麼webpack就直接會在項目的根目錄尋找webpack.config.js這個檔案，把他作為預設的配置去運作。這個時候其實是不需要指定任何參數的，他會直接讀取webpack.config.js裡面的内容。

當然我們也可以通過–config來指定其他的配置檔案。

webpack.config.js

//首先使用的是子產品化輸出

module.exports = {
    entry:'./src/script/main.js',   //表示打包的入口是從哪個檔案開始的
    output:{
        path: './dist/js',      //指明打包以後的檔案放在什麼地方
        filename:'bundle.js'    //指明打包以後的檔案名稱      

運作

webpack      

我們可以看出dist/js下面多了一個bundle.js的檔案.

說明我們的配置已經生效了

2、如果我們将webpack.config.js改了一下名字，如何運作呢？

比如改為webpack.dev.config.js

這個時候它已經不是預設運作的檔案了，我們需要通過指定讓它運作

webpack --config webpack.dev.config.js      

這裡隻是為了示範一下，這裡我在把名字改回webpack.config.js

有的朋友可能會說，現在我可以通過指令行來運作我的配置，那麼我想加一些參數，我該怎麼辦呢？

其實這裡我們是可以在package.json檔案裡寫好配合npm的一些腳本來做。

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"},
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.2.1"}
}      

輸入運作：

npm