webpack和webpack-dev-server安裝配置（遇到各種問題的解決方法）

跟着Webpack傻瓜式指南（一）這個教程在安裝webpack和webpack-dev-server的時候遇到很多問題，查了很多終于一一找到解決辦法。

主要參考了這三篇博文：

　　moudule.js:338 throw err; Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

　　建立Webpack簡單項目遇見的那些事兒

　　webpack-dev-server 使用方法，看完還不會的來找我~

看到網上很多人也遇到同樣這些問題，特寫這篇博文，簡要總結安裝過程并穿插問題解決辦法，希望能給大家帶來一些幫助。

安裝配置步驟：

1. 裝好node和npm

2. 全局安裝webpack

npm install -g webpack

3. 建立項目，進入項目根目錄

a. 建立一個package.json的檔案在項目根目錄下 npm init
b. 添加webpack.config.js配置檔案
c. 添加app檔案夾，内含2個js檔案

sub.js

//我們這裡使用CommonJS的風格
function generateText() {
　　var element = document.createElement('h2');
　　element.innerHTML = "Hello h2 world";
　　return element;
}
module.exports = generateText;

index.js

var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);

4. 配置Webpack

a. 安裝html-webpack-plugin，快速生成HTML npm install html-webpack-plugin --save-dev 可在項目根目錄下安裝（不加-g，在項目根目錄出現node_modules檔案夾，内含html-web-pack-plugin及其依賴包），也可全局安裝（加-g 必須sudo）
b. 寫webpack.config.js配置檔案中的内容

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定義了一些檔案夾的路徑
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {
    //項目的檔案夾 可以直接用檔案夾名稱 預設會找index.js 也可以确定是哪個檔案名字
    entry: APP_PATH,
    //輸出的檔案名 合并以後的js會命名為bundle.js
    output: {
        path: BUILD_PATH,
        filename: 'bundle.js'//将app檔案夾中的兩個js檔案合并成build目錄下的bundle.js檔案
    },
    //添加我們的插件 會自動生成一個html檔案
    plugins: [
        new HtmlwebpackPlugin({
            title: 'Hello World app'
        })//在build目錄下自動生成index.html，指定其title
    ],
};

5. 在項目根目錄運作webpack

webpack

a. Error: Cannot find module 'webpack/../../.....'
- 解決1：在本項目中安裝webpack： npm install webpack
- 解決2：修改環境變量
  - touch ~/.bash_profile
  - vim ~/.bash_profile
  - 修改打開的.bash_profile檔案：

export NODE_PATH="/usr/local/lib/node_modules"

- 使修改生效

source ~/.bash_profile

b. 若指令為 webpack --watch ，動态監聽檔案的改變并實時打包，輸出新bundle.js檔案；但不能做到hot replace，即每次webpack編譯之後，還需手動重新整理浏覽器

6. 配置webpack-dev-server：

a. webpack-dev-server簡介：
- 是一個小型node.js express伺服器
- 建立一個開發伺服器，可以serve我們pack以後的代碼，并且當代碼更新的時候自動重新整理浏覽器
- 啟動webpack-dev-server後，你在目标檔案夾中是看不到編譯後的檔案的，實時編譯後的檔案都儲存到了記憶體當中。
- 兩種自動重新整理方式：
  - iframe mode
    
    在網頁中嵌入了一個 iframe ，将我們自己的應用注入到這個 iframe 當中去，是以每次你修改的檔案後，都是這個 iframe 進行了 reload
    
    指令行：
    webpack-dev-server ，無需 --inline 浏覽器通路：http://localhost:8080/webpack-dev-server/index.html
  - inline mode webpack-dev-server --inline 浏覽器通路：http://localhost:8080
b. 安裝webpack-dev-server npm install webpack-dev-server --save-dev 可在項目根目錄下安裝（不加-g，在項目根目錄出現node_modules檔案夾，内含webpack-dev-server及其依賴包），也可全局安裝（加-g 必須sudo）
c. 在webpack.config.js中添加配置

var webpack=require('webpack');
module.exports = {
    ……
    devServer: {
        historyApiFallback: true,
        inline: true,//注意：不寫hot: true，否則浏覽器無法自動更新；也不要寫colors:true，progress:true等，webpack2.x已不支援這些
    },
    plugins:[
        ……
        new webpack.HotModuleReplacementPlugin()
     ]
		……
};

d. 在package.json裡配置運作的指令（npm支援自定義一些指令）

"scripts": 
{ 
　　"start": "webpack-dev-server --inline"//注意：不寫--hot，否則浏覽器無法自動更新
},

e. 運作server
- npm start
  - Error: .........（此處省略一堆錯誤）
  - 解決：在本項目中安裝webpack：（不加-g，在項目根目錄出現node_modules檔案夾，内含webpack及其依賴包） npm install webpack
- 浏覽器打開http://localhost:8080/
  
  成功運作，且修改app中的js代碼，浏覽器會自動重新整理！成功！