webpack定义

webpack是一个前端资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。简单来说，webpack会根据我们定义的打包规则，从入口文件（entry）开始对你的项目文件进行分析打包。

webpack安装

使用一个工具前，首先得安装它（这是句废话，哈哈哈！）。
在项目根目录下，命令行输入 npm init 新建一个package.json文件（全部回车即可）

npm init

安装webpack（安装时，可指定版本号，不然默认下载最新版本），这里使用webpack3

npm install webpack@3.* --save-dev

webpack打包

安装好webpack之后，其实就可以使用webpack进行项目文件打包了，entry.js为入口文件，output.js为打包完成输出的文件。

webpack entry.js output.js

若全局中没有安装webpack，那么直接运行该条命令，会报错。
解决方案：可以在package.json中的script属性中加上webpack的执行命令：

"scripts": {
    "webpack": "webpack --progressr"
  }

--progress：可以看到打包的进度，还有更多的webpack命令属性可以到webpack官网去了解。
这时候，只要运行npm run webpack就可以了

npm run webpack

项目中要使用的打包规则比较复杂，可以把这些规则定义在webpack.config.js文件中，命令行运行webpack时，webpack会根据webpack.config.js里定义的打包规则对项目进行打包。
在项目根目录下，新建一个webpack.config.js文件。

var path = require("path");

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/main-[hash:5].js"
    }
}

entry：webpack打包入口文件。
path：文件输出的文件路径，filename：输出文件的名称。
path是nodejs内置包，path模块提供了一些工具函数，用于处理文件与目录的路径。
关于path更详细的介绍可以到官方网站上了解：

运行webpack后，打包成功后可以看到：

Hash: 8875d9ab4c555b1113df
Version: webpack 3.11.0
Time: 278ms
           Asset     Size  Chunks             Chunk Names
js/main-8875d.js  2.68 kB       0  [emitted]  main
   [0] ./src/main.js 208 bytes {0} [built]

js/main-8875d.js是打包输出的文件，文件名称是根据webpack.config.js定义的打包规则生成的，[hash:5]表示截取hash的前5位。

webpack + babel

babel是一个广泛使用的转码器，可以将es6语法转化为es5语法。
在webpack中引用babel-loader：
首先安装babel-loader：

npm install babel-loader babel-core --save-dev

定义babel的转码规则，安装babel-preset-env。

npm install babel-preset-env --save-dev

注意：babel还有其他的转码规则，这里就不一一列举了，大家可以到babel的官网去看看。

webpack.config.js中的配置：

const path = require("path");

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "js/index.js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: "babel-loader",
                options: {
                    presets: ["env"]
                }
            }
        ]
    }
}

运行webpack之后，可以发现输出的js文件中，已经把es6语法转换成es5语法了！

常用loader

以此类推，利用webpack打包其他文件类型的文件也是如此配置，这里列举一些比较常用的loader：

html

test: /\.html$/,
loader: "html-loader"

css

test: /\.css$/,
loader: "style-loader!css-loader"

less

test: /\.less$/,
loader: "style-loader!css-loader!less-loader"

图片

[name]：图片原本的名字；
[hash:5]：本次打包hash值得前5位；
[ext]: 图片的后缀；

test: /\.(jpg|png|gif|svg)$/i,
loader: "file-loader",
options: {
    filename: "[name]-[hash:5].[ext]"
}

与file-loader的区别是：当图片的大小不超过limit时，不会对图片进行打包放到输出的目录下，会作为一个url传过去。

test: /\.(jpg|png|gif|svg)$/i,
loader: "url-loader",
options: {
    limit: 2000，
    filename: "[name]-[hash:5].[ext]"
}

打包后的图片会被压缩。

test: /\.(jpg|png|gif|svg)$/i,
loader: "image-webpack",
options: {
    filename: "[name]-[hash:5].[ext]"
}

html-webpack-plugin插件

该插件用于生成项目所需的index.html。
主要以项目根目录下的index.html为模板，在打包好的目录下生成所需要的index.html。
关于html-webpack-plugin插件的详情可到官方网站了解。

本文源码

关于本文的源码可以到我的GitHub-webpack-demo上面下载。
下载完成之后，先npm install下载项目所需的依赖包

npm install

下载完依赖包后，再运行npm run webpack

npm run webpack

项目根目录下会生成打包好的dist文件夹