webpack和webpack-dev-server安裝配置

本文轉載自：http://www.javashuo.com/article/p-rrfraijx-ho.html

跟着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代碼，瀏覽器會自動刷新！成功！