安装
npm install -g webpack // 全局安装npm install --save-dev webpack //本地安装
在完成全局安装和本地安装之后，就可以开始进行webpack的使用了。
尝试打包
安装完成之后，我们可以尝试使用webpack进行一次简单的打包。
webpack最基本的命令就是webpack，可以直接使用webpack命令对文件进行编译，例如 webpack main.js bundle.js
上述代码就能将main.js文件打包成bundle.js文件。
使用配置文件
也可以在webpack配置文件中设置好参数后直接运行webpack命令进行打包。在项目根目录下新建webpack.config.js，webpack会默认其为配置文件。
module.exports = { entry: __dirname + "/src/main.js", //设置main.js为项目入口 output: { path: __dirname + "/public",//设置public为编译后的目录 filename: "bundle.js"//编译后输出文件的文件名 }} 注意：__dirname是指项目根目录，必须要加上，这样在打包之后才能准确找到相应目录。
webpack就能得到前面的同样的结果。接下来也可以在package.json文件中配置webpack命令的代替方式，如下 "scripts": { "start":"webpack"} 这样直接输入 npm run start也能取得同样的效果。
webpack的配置文件的话，可以使用如下代码 webpack --config webpack.dev.config.js
这样就能将配置文件设置为webpack.dev.config.js了。也可以在package.json中去设置
"scripts": { "webpack":"webpack --config webpack.dev.config.js"} 运行 npm run webpack，就能实现和上面代码一样的功能，将配置文件设置为webpack.dev.config.js并执行。
配置文件解析
在配置文件中，entry字段可以分别设置为以下三种形式：
entry:'main.js' //指定main.js为入口文件
2.数组
存在多个入口文件的时候，使用数组方式可以添加多个互相不依赖的文件entry:['src/main.js','dist/index.js'] //两个文件会被打包为一个文件
3.对象
指定多个文件打包成多个文件以供不同页面使用{ entry:{ 'mainEntry':'src/main.js', 'indexEntry':'src/index.js' }, output:{ path:'/dist', filename:'[name].js' //执行后会打包成mainEntry.js和indexEntry两个文件 }} output最常用的两个属性分别是filepath和filename。
filepath是一个绝对路径，指定打包生成之后的文件存放的目录。fliename指定打包生成之后的文件名。根据上述entry字段的叙述，我们有时候会同时指定多个入口文件，如果只是在output.filename中指定一个文件名，那么会将两个入口文件打包到一个文件中去。这时候我们可以使用占位符的方式来指定output.filename，这样就能根据相应的入口文件打包出相应的文件了。占位符可以设置以下内容：
name模板名称，对应上面的mainEntry和indexEntryhash整体的hash值chunkhash分片的hash值
hash和chunkhash
为什么会有hash和chunkhash值呢？其实，hash值是在整个打包过程中每一次版本变化生成的值，这样一来，一旦某一个资源文件有发生变化，则整个hash值就会发生改变，从而导致所有打包出来的文件的文件名都会发生变化。
chunkhash，chunkhash是根据具体的模块的变化来生成的值，所以某一个文件的变化只会影响到它自己的chunkhash值的变化。例如： { entry: { mainEntry:__dirname + "/app/main.js", indexEntry:__dirname + "/app/index.js" }, output: { path: __dirname + "/public", filename: "[name]-[hash].js" }} 使用name加hash的方式来命名打包后的文件，生成的结果如下
Hash: 8449fbacd884544a83edVersion: webpack 2.5.1Time: 57ms Asset Size Chunks Chunk Names mainEntry-8449fbacd884544a83ed.js 2.73 kB 0 [emitted] mainEntryindexEntry-8449fbacd884544a83ed.js 2.71 kB 1 [emitted] indexEntry [0] ./app/index.js 76 bytes {1} [built] [1] ./app/main.js 84 bytes {0} [built] 两个打包之后的文件拥有同一个hash值8449fbacd884544a83ed，一旦main.js和index.js其中的一个文件发生变化，则会引起整体的hash值变化。
chunkhash的话，如果所示： { entry: { mainEntry:__dirname + "/app/main.js", indexEntry:__dirname + "/app/index.js" }, output: { path: __dirname + "/public", filename: "[name]-[chunkhash].js" }} 生成结果如下：
Hash: 41e84bc2e3034e423af1Version: webpack 2.5.1Time: 54ms Asset Size Chunks Chunk Names mainEntry-d4d7121b09d82bb73a8e.js 2.73 kB 0 [emitted] mainEntryindexEntry-252220e65aed8b7f327b.js 2.71 kB 1 [emitted] indexEntry [0] ./app/index.js 76 bytes {1} [built] [1] ./app/main.js 84 bytes {0} [built] 同样也会生成hash值，但是两个文件的chunkhash值是互不影响的，其中的一个文件发生变化，则只会改变发生变化文件打包后的文件名。
chunkhash能取代hash的作用，但是我认为hash的存在肯定有其适用的场景。比如在做静态资源大版本管理和文件夹命名的时候就能用上，肯定还会有更多其他可能的场景。 使用plugin
在使用hash和chunkhash来为打包之后的文件名做版本，每次打包之后会生成新的文件名，我们无法预知每一次打包之后的文件名，所以有什么办法可以一次实现html文件中对打包文件进行引用呢？
html-webpack-plugin这个插件来帮我们完成。 - 在项目目录中对插件进行安装：
npm install html-webpack-plugin --save-dev
- 在配置文件中对插件进行引用:
var htmlWebpackPlugin = require('html-webpack-plugin') - 使用并配置插件参数插件的使用方式是直接在配置文件中添加一个值为数组的属性：
plugins:[ new htmlWebpackPlugin(); //不加任何参数直接新建插件对象是最基本使用方式]
这样就能在output.path指定的目录中生成一个新的index.html文件，这个index.html文件会将所有打包完成之后的静态资源进行引用。由于每次重新打包之后的index.html文件是重新生成的，所以就解决了上面我们打包之后的静态资源文件名不断变化的问题。
new htmlWebpackPlugin({ template:'index.html', //webpack会在根目录下寻找index.html文件作为模板 fliename:'main.html', //还可以自定义打包生成之后的文件名}) 这样我们就能使用根目录下的index.html文件作为模板，在output.path下打包生成一个名为main.html的文件，这个文件包含了我们打包之后的静态资源文件的引用。
filename属性中来指定带目录的文件名。 filename:__dirname+'/dist/views/index.html'
这样我们就能将打包之后的html文件和js文件分开存放了。
htmlWebpackPlugin对象来配置。大体模板如下： new htmlWebpackPlugin({ template:'index.html', fliename:'main.html', }),new htmlWebpackPlugin({ template:'index.html', fliename:'side.html', }),... html-webpack-plugin插件的其他配置参数和使用方法可以去官网查看。
使用loader编译ES6代码
通过使用loader，webpack能实现对各种各样的文件进行处理。
loader需要在配置文件中的modules下进行配置，主要包括以下字段：
test一个匹配该loader所需要处理的文件拓展名的正则表达式loaderloader的名称include/exclude指定要处理的文件夹/屏蔽不需要处理的文件夹query额外选项
使用 babel
babel需要在命令行中安装单独的包
npm install --save-dev babel-core babel-loader babel-preset-es2015
以上是本地安装，需要在项目根目录下执行。
按照上面的loader配置方法，我们可以按照如下模板来配置babel module:{ loaders:[{ test:/\.js$/, //以.js结尾的文件都是babel需要处理的 loader:'babel-loader', //loader的名称 exclude:/node_modules/, //忽略node_modules目录下的所有文件 },{} //多个loader用逗号分隔开 ,...]} 配置完之后在项目根目录下创建文件.babelrc，并在文件中写入以下内容：
注：在windows系统下不能直接创建
.babelrc文件，可以在根目录下打开命令行输入type null>.babelrc命令创建
{ "presets": [ "es2015" ] } 完成之后执行webpack命令，在编译js文件的时候就会使用babel-loader将文件中的ES6代码编译成浏览器可执行的ES5代码。