脚本宝典收集整理的这篇文章主要介绍了webpack1.X 渐进教程(一)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
1. 安装webpack
npm Install webpack －g
（－g 代表全局安装，这样就不用每个使用webpack的项目都在当前项目中再安装一遍了。）
2.初步使用
现在我们不用任何config文件（了解下过程，项目中肯定不会这么用），但是要有一个你想要编译的文件，比如一个js文件，一张图片，一个sass文件。
下面我们来release一个js文件(test.js，这个文件里只写一句：):
// test.js
alert('hellow world')
用法：webpack 入口文件 目标地址
使用：webpack ./test.js ./dist/bundle.js
然后你去look一下./dist/bundle.js这个文件的内容，不要care是否看的懂，just一句一句的看两边。
3.使用配置文件
webpack ./test.js ./dist/bundle.js 这样的usage体验肯定是不好的，这时候就该配置文件登场了:webpack.config.js,这是webpack默认的配置文件名，当然你也可以修改，这个后面再讲。
:
// webpack.config.js
// 这里展示了最最基本的配置
module.exports = {
entry: './test.js',
output: {
path: './dist',
// filename: '[name]-[chunkhash:8].bundle.js',
// filename: '[name]-[hash].bundle.js', 下面有解释 chunkhash 和 hash 的区别
filename: 'bundle.js',
},
module: {
// loaders
},
plugins: [
// plugins
]
}chunkhash:当前“代码块”（chunk）的hash值，也可以理解为是代码块内容的md5值，如果代码没有修改，这个值是不会改变的；否则一律改变。
hash:webpack本次编译的hash值,任何一个文件的改变都会有新的hash生成。
contenthash:指根据当前文件的内容计算md5。 但是require进来的内容改变也会引起它的改变。
以上3个值都无法很好的满足现实开发中的需求，因为我们想要的是：我们打开某个编译好的文件，如果它本身的内容有所改变（不包括require进来的文件：css，image等），才去计算新的md5值。
这里推荐一片文章讲的很清楚：Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案，文中提到的webpack-md5-hash是个很好的选择。(补充：webpack-md5-hash有坑，勿入！坑：vendor引用了修改的chunk，但vendor的hahs并不会改变！)
其中的module:{}和plugin:[]先忽略不管，下面很快就会讲到。
Now,我们有了配置文件，执行命令变得simple多了：
webpack
就这么一个单词，webpack会去配置文件里找入口文件 and 目标地址。
4.ES6 or Sass or React or Vue
可能再项目里用到了es6，或者sass，less等现阶段浏览器不能识别的语言；或者你的文件是.jsxor.vue,这些文件里可能包含了HTML,CSS,SASS,ES6等等浏览器或者你的应用所运行的环境，但是这些环境不能识别这些文件or语法or语言，这个时候就需要先将它们编译成能够被识别并执行的语言or语法。
Now,让webpack中的主角loader登场。loader中文就是装载器，比如把es6装进es6-loader(这是一个假名字)中，过一会儿，es6－loader里面的es6就变成es5 or es3 了。
注意：loader相关的配置都写在上面提到的module:{}中。具体用法如下：
ES6
加载器：babel-loader
用法：先安装npm install babel-loader --save-dev(如果报错，那么就根据提示缺什么 install 什么，比如babel-core等)
详细用法
module: {
loaders: [{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
}再加一个sass-loader
Sass
加载器：babel-loader
用法：先安装npm install sass-loader --save-dev(如果报错，那么就根据提示缺什么 install 什么,比如：node-sass,它不是一个loader，但是sass-loader依赖它。)详细用法
// ...
module: {
loaders: [{
test: /.js/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /.scss/,
exclude: /node_modules/,
loader: 'sass-loader'
}]
}
// ...5.更多用法
Now,我们还剩一个plugins:[]。
现在我们有一个需求，刚才我们编译好的bundle.js文件要引入到我们的某个.htML文件中进行使用。但是如果我们像上面配置的那样加了hash值：[name]-[hash].bundle.js,文件名会由于文件内容的变化而变化，我们总不能 again and again 地修改html文件中的引用路径吧～So,找个插件来帮忙吧:html-webpack-plugin.
html-webpack-plugin
插件：一样要先安装npm install html-webpack-plugin --save-dev
用法：
var HtmlWebpackPlugin = require('html-webpack-plugin');
// ...
plugins: [
new HtmlWebpackPlugin({
// <title>我的webpack</title>
title:"我的webpack",
// [name]-[hash].bundle.js要写入的html文件路径
// 默认根路径是： output.path ， 默认文件名是： index.html(eg：./dist/index.html)
filename: './index.html',
// template: './myIndex.html' 下面会讲到
})
]
// ...上面的配置会将output输出的文件bundle.js自动引入到./dist/index.html文件中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--这里就是 HtmlWebpackPlugin的功劳-->
<title>我的webpack</title>
</head>
<body>
<!--这里就是 HtmlWebpackPlugin的功劳-->
<script src="bundle.js"></script>
</body>
</html>上面这个index.html是HtmlWebpackPlugin的功劳自己生成的，所有的内容都需要在new HtmlWebpackPlugin({})中配置好（详细配置说明）。但是，多数情况下，我们会有自己index.html or myIndex.html,这些文件是我们已经添加了样式或者插入了其它代码。这时候template就派上用场了。我们自己的myIndex.html需要是这样的：