新人学习，照文档手撸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']
        }
      }
    ]
  }
};