安装（全局安装）

首先要安装node.js，node.js自带了软件包管理器npm，webpack需要node.js v0.6以上支持，建议使用最新版node.js。

npm install -g webpack

建立项目

新建项目目录webpack-project，然后进入项目

//初始化项目，生成package.json文件
npm init

 // 安装 webpack 依赖，可以使用项目本地版本的webpack
npm install webpack --save-dev
 //缩写
npm i webpack -D

<blockquote>
webpack -h可查看当前安装的版本信息
</blockquote>
在文件夹下打开项目配置文件package.json如下：

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "webpack学习笔记demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

  "author": "zqq",
  "license": "ISC",
 "devDependencies": {
    "webpack": "^3.0.0"
  }
}
还可以安装不同的版本

npm install webpack@2.2.x --save-dev

创建代码文件

在项目根目录下创建Index.html文件和src目录，在src目录下创建entry.js

 webpack-project
 |--src
 |  |--entry.js
 |  |--index.js
 |--index.html
 |--package.json

index.html文件：

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <title>Webpack First  Project</title>
   </head>
   <body>
     <div id='hello'></div>
     <script src="./bundle.js"></script>
   </body>
 </html

entry.js

document.write("hi webpack!");

在控制台或命令行，输入以下命令打包：

$webpack  src/entry.js  src/bundle.js

如果成功，会看到下面代码：

Hash: 2852c5082c8d2ef73222
Version: webpack 3.0.0
Time: 66ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.51 kB       0  [emitted]  main
   [0] ./src/entry.js 33 bytes {0} [built]

打开Index.html，你将会看到页面上显示：

hi  webpack

在src下面新建index.js

module.exports = "这里是 index.js 的内容！";

更新下entry.js

document.write(require("./index.js"));

再次输入下面命令：

webpack  src/entry.js  src/bundle.js

打开index.html你将会看到：

这里是index.js内容

打包css

安装css-loader ，style-loader 模块
<blockquote>
.css文件使用style-loader 和 css-loader编译处理
.js文件使用jsx-loader编译处理
.scss文件使用style-loader、css-loader和sass-loader来编译处理
</blockquote>
安装css-loader

npm install css-loader --save -dev

在src目录下添加style.css

body{
    font-size: 32px;
    color: green;
}

更新entry.js

//注意这是webpack2.0的写法，webpack1.0是不用加后缀-loader的
require("!style-loader!css-loader!./css/style.css");
document.write(require("./index.js"));

再次输入下面命令：

webpack  src/entry.js  src/bundle.js

使用webpack.config.js

在项目目录下新建webpack.config.js文件。

module.exports = {
    entry: "./src/entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders:[{
                test:/\.css$/,
                loader:"style-loader!css-loader"
            }]

    }
};

运行项目，输入下面命令：

webpack

webpack命令会优先读取项目中的webpack.config.js文件

添加plugin，BannerPlugin内置插件是给输出的文件头部添加注释信息。

var webpack = require('webpack');
module.exports = {
    entry: "./src/entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders:[{
                test:/\.css$/,
                loader:"style-loader!css-loader"
            }]
    },
      plugins: [
          new webpack.BannerPlugin('This file is created by zqq')
        ]
};

运行webpack，打开bundle.js可以看到头部文件出现了我们指定的注释信息：

/*! This file is created by zqq */

加载图片

对于url-loader来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：

npm install url-loader

配置webpack.config.js文件

var webpack = require('webpack');
module.exports = {
    entry: "./src/entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders:[{
                test:/\.css$/,
                loader:"style-loader!css-loader"
            },
             { 
                 test: /\.(png|jpg)$/,
                 loader: "url?limit=32000"  // 添加到这
             },    
        ]
    },
     plugins: [
    new webpack.BannerPlugin('This file is created by zqq')
  ]

}

注意后面的limit的参数，当图片大小小于这个限制的时候，会自动启动base64编码图片。
我在输入webpack运行时报错，提示缺少了file-loader，然后安装了file-loader后在运行，编译正确。
打开Index.html页面可看到背景图片以设置成功。

index.png

webpack笔记demo这次的工程代码全部放到github了，以后会持续更新的。
Webpack教程—阮一峰这里的最好全都敲下，啊啊我也还没有敲完

rose.png

webpack学习笔记- 入门教程