新人學習，照文檔手擼webpack,bug基本修復完善（有問題請聯繫我，並不是徹底原創，不喜勿噴。。。）

介紹：
webpack簡單點來講就就是一個配置文件，全部的魔力都是在這一個文件中發生的。 這個配置文件主要分爲三大塊

entry 入口文件 讓webpack用哪一個文件做爲項目的入口
output 出口 讓webpack把處理完成的文件放在哪裏
module 模塊 要用什麼不一樣的模塊來處理各類類型的文件
下面咱們就一步一步來新建一個簡單的項目，話很少講，該懂的自行百度，這裏只負責讓你本身的webpack跑起來。

（一）安裝
全局安裝webpack

npm install -g webpack

在文件夾裏面也須要安裝webpack

npm install webpack

這個是在你根目錄下進行的全局安裝記得加-g,npm 太慢，推薦用npm的鏡像cnpm 安裝方法同樣。

（二）建立項目
新建文件夾命令行輸入命令。 輸入npm init後一路回車，看須要本身更改

cd study-webpack
npm init

{
  "name": "study-webpack2.0",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

此時會生成一個package.json 而後

npm install

安裝基本依賴的模板

（三）創建項目基本目錄結構
如今項目裏面就有一個package.json， 咱們多加一點東西，慢慢豐富它的內容。

/app
    index.js
    sub.js
package.json
webpack.config.js

添加了兩個js文件，添加了最重要的webpack的配置文件，咱們仍是從很是簡單的hello world開始玩起，webpack原生直接支持AMD和CommonJS兩種格式

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);

代碼寫完了，完成一個很簡單的功能，新建一個單獨的module，而且在另一個module裏面引用他，最後會在頁面裏面輸出兩個標題。

配置webpack

如今開始配置webpack，目標是把這兩個js文件合併成一個文件. 咱們能夠本身在build文件夾裏面手動建一個index.html文件夾，而後再把合併之後的js引用在裏面，可是這樣有些麻煩，因此咱們這裏安裝一個plugin，能夠自動快速的幫咱們生成HTML。

npm install html-webpack-plugin --save-dev

在有了這個插件的前提下 開始寫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'
  },
  //添加咱們的插件 會自動生成一個html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ]
};

而後在項目根目錄運行指令，此時會生成一個build文件夾裏面有bundle.js和index.html

webpack  //這個是命令行命令

配置webpack-dev-server

上面任務雖然完成了，可是咱們要不斷運行程序而後查看頁面，因此最好新建一個開發服務器，能夠serve咱們pack之後的代碼，而且當代碼更新的時候自動刷新瀏覽器。

安裝webpack-dev-server

npm install webpack-dev-server --save-dev

安裝完畢後 在webpack.config.js中添加配置

module.exports = {
  ....
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true
  },
  ...

}
而後再package.json裏面配置一下運行的命令,npm支持自定義一些命令

...
"scripts": {
  "start": "webpack-dev-server --hot --inline"
},
...

好了，萬事具有了，在項目根目錄下輸入npm start,一堆花花綠綠的信息後server已經起來了，在瀏覽器裏面輸入http://localhost:8080 發現偉大的hello world出現了，在js裏面隨便修改一些輸出而後保存, boom!瀏覽器自動刷新，新的結果出現了。

關於一些文件依賴解釋：

紅色框框內的東西是你運行一些文件所須要的配置，記得得在webpack.config.js裏面的module下加哦，好比你須要使用sass

{
  test: /\.scss$/,
  loaders: ['style-loader','css-loader','sass-loader'],
  include: APP_PATH
},


命令行得安裝這些相對應的模板 npm install style-loader css-loader sass-loader --save-dev也能夠分開寫


提醒：要使用es6必須全局安裝babel-core;使用sass也必須全局安裝sass,先裝ruby;

拓展

下面附上完整項目截圖代碼(es6)：

項目目錄

npm-debug.log 是調試日誌文件，報錯能夠參考這個文件改錯

index.js

import './main.css';
import './main.scss';

import generateText from './sub';
import $ from 'jquery';
import moment from 'moment';

let app = document.createElement('div');
const myPromise = Promise.resolve(42);
myPromise.then((number) => {
  $('body').append('<p>look at me! now is ' + number + ' now is ' + moment().format() + '</p>')
})
app.innerHTML = '<h1>Hello World!!</h1>';
document.body.appendChild(app);
app.appendChild(generateText());

sub.js

export default function() {
  var element = document.createElement('h2');
  element.innerHTML = 'Hello h2 world hahaha';
  return element;
}

main.css

main.scss

variables.scss

build 文件夾下的東西會自動生成，我就不放過來了

package.json

{
  "name": "aaa",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot --inline"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "css-loader": "^0.26.2",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.28.0",
    "jquery": "^3.1.1",
    "moment": "^2.17.1",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.2",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

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'
  },
  //添加咱們的插件 會自動生成一個html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app'
    })
  ],
  devServer: {//webpack-dev-server的配置
    historyApiFallback: true,
    hot: true,
    inline: true
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style-loader','css-loader'],
        include: APP_PATH
      },
      {
        test: /\.scss$/,
        loaders: ['style-loader','css-loader','sass-loader'],
        include: APP_PATH
      },
      {
        test: /\.(png|jpg)$/,
        loader: ['url-loader?limit=40000']
      },
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        include: APP_PATH,
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
};