webpack走在前端技术的前沿（深入浅出）
Webpack
网上有很多webpack的介绍，也有不少的视频，但是不少人看到应该还是不是很了解webpack里面到底是讲什么，而且报错了之后也是不知所措
那么这里我作为一个工具小白就阐述一下小白面前应该怎么学习webpack吧，当你看完之后，我相信对其他工具也会有更深的了解
概述
在我的文章里主要讲解：
- webpack基本介绍及安装
- webpack基本配置和配置文件
- webpack在项目中如何自动生成html文件
- 强大的loader加载器
还有更多的功能我也会在文中提及到
1.webpack基本介绍及安装
1.1 webpac基本介绍
Webpack是时下最流行的模块打包器
它的主要任务就是将各种格式的JavaScript代码，甚至是静态文件进行分析、压缩、合并、打包，最后生成浏览器支持的代码
用一张图片简单表示一下
特点：
- 代码拆分方案：webpack可以将应用代码拆分成多个块，每个块包含一个或多个模块，块可以按需异步加载，极大提升大规模单页应用的初始加载速度
- 智能的静态分析：webpack的智能解析器几乎可以处理任何第三方库
- Loader加载器：webpack只能处理原生js模块，但是loader可以将各种资源转换为js模块
- plugin插件：webpack有功能丰富的插件系统，满足各种开发需求
- 快速运行：webpack 使用异步 I/O 和多级缓存提高运行效率，使得它能够快速增量编译
综合来说webpack综合了目前网络上的打包工具的优点，但是也要合理使用，不然也会适得其反
1.2 webpack的安装
- 第一步，首先得安装好node.js和npm
npm是前端开发者必备的下载工具吧，如果你连这个也没有安装的话，那么你就得快点安装了，这里附一个gulp打包工具的教程，这里第一和第二步有node.js和npm的安装具体教程，如果你没有安装，那就得快点入门了。
- 第二步，进入webpack世界
- 首先，新建一个webpack-test文件夹作为你的项目目录
- 然后，用npm初始化你的项目，进入cmd，切换到你的目录下，输入：
npm init
然后会出现一大堆输入的东西，这里我们全部选择默认输入enter就好了
输入完了之后，它会提示你输入的信息给你核对，按下确认之后，就会在你的项目目录下生成了package.json
下一步，我们在我们的文件夹里面安装一下webpack吧，在项目目录下的cmd输入
npm install webpack --save-dev
这就安装好了，这里就给大家来一个小Demo，让大家更加了解webpack的打包方式吧，如果已经有基础的同学可以跳过这里
1.3 webpack几个小Demo
在webpack-test下新建一个hello.js，输入下面的代码
//自定义一个函数
function hello (str) {
alert(str);
}然后在命令行输入
webpack hello.js hello.bundle.js
这里的意思是用webpack文件将hello.js打包成hello.bundle.js输出在根目录下，成功之后在根目录下就会出现hello.bundle.js文件
然后介绍一下我们打包成功的各个东西的含义吧
然后再在根目录下新建一个world.js，在文件里输入
//随便自定义一个函数
function world () {
}再去修改hello.js成为
require('./world.js') //连接到另外一个函数块
//自定义一个函数
function hello (str) {
alert(str);
}再输入一下
webpack hello.js hello.bundle.js
进行打包之后就会发现，打包成功里面hello.js的chunks序列号是0，world.js的chunks序列号是1，然后在hello.bundle.js看到他们的序列号也是这样。
那么如果我想也把css文件也打包进去应该怎么办呢？
我们再在根目录下新建一个style.css，在里面简单输入
html, body {
padding: 0;
margin: 0;
}然后这里我们需要下载两个loaders加载器，为什么要下载loaders加载器呢，你也可以想一想，css文件和js文件毕竟不一样，如果在hello.js引入style.css那么肯定会报错，这个时候，我们需要一种东西帮忙加载我们的css成js
接下来我们下载两个loaders加载器，后面说一下这两个的作用，在命令行输入
npm install css-loader style-loader
然后把hello.js改成
require('./world.js') //连接到另外一个函数块
require('css-loader!./style.css') //利用css-loader加载器解析css文件使之可读
//自定义一个函数
function hello (str) {
alert(str);
}再在输入一下指令，打包好了后了可以观察hello.bundle.js里面就多了css文件里面的内容
这时候，你也许会觉得，我说了那么多，那么，怎么把这些东西用到我们的页面中吗？下面就会说到
在我们的跟目录下新建一个index.html，加入下面内容
<!DOCTYPE html>
<html lang="en">
<head>
<title>webpack</title>
</head>
<body>
<script src="./hello.bundle.js"></script>
</body>
</html>再把我们的style.css改成
html, body {
padding: 0;
margin: 0;
}
body {
color: red;
}再把我们的hello.js改成
require('./world.js') //连接到另外一个函数块
require('style-loader!css-loader!./style.css')
//利用css-loader加载器解析再用style-loader解析css文件使之可读
//自定义一个函数
function hello (str) {
alert(str);
}
hello('hello webpack');然后我们再打包运行一下,就可以在页面看到我们的结果，这时候如果你细心，就会发现我们在css-loader前面加了个style-loader，如果你不加的话，你就会发现你的页面打开后不是红色的，因为还没经过style-loader的解析，当然这只是一种方法，还有其他方法可以自寻在官网看看文档。
如果你觉得每次修改之后打包也很麻烦，这时候我们的watch就有作用了，你可以在打包后面加入，例如输入
webpack hello.js hello.bundle.js --watch
然后下次修改就不用在进行输入打包代码了，这上面也就是简单的介绍了一下我们的webpack是怎么从一个文件链接到很多文件的。
2.webpack基本配置和配置文件
这里就是我们最重要的一个部分了，如果你看过很多webpack打包后的开源项目之后，你就会发现，有些时候你不知道从哪里看起，那就从配置文件开始看起来吧
相信你应该也在不少的文章中看到有关于配置文件的说法的吧，毕竟配置文件也算是最重要的一部分了，这里也可以推荐你看一篇我觉得还不错的webpack入门
不过我如果你没有基础的话，建议继续看下我的再去看那一篇，收获会更大
首先，我们新建一个项目webpack-demo，按照我上面教程文章里面下载安装好webpack，安装完了之后，我们需要新建几个文件以及文件夹，如下面所示
然后在index.html输入
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>webpack demo</title>
</head>
<body>
<script src="./dist/js/bundle.js"></script>
</body>
</html>在webpack.config.js也就是webpack的配置文件里面输入
// webpack.config.js
module.exports = {
entry:'./src/script/main.js', //我们的入口文件，相当于前面一节webpack-test中的hello.js
output:{
path: __dirname + "/dist/js",
/*打包完了之后，把内容输出到这个文件夹上,也可以写成"./dist/js"，
但是这样放在服务器上路径可能会出错，所以加上__dirname*/
filename: 'bundle.js' //输入到上面path文件夹里面的bundle.js，没有则自动新建
}
}再在main.js里面输入
//main.js
function helloworld () {
alert('hello world');
}
helloworld();在命令行输入webpack,就将我们的入口文件及其链接文件（这里还没有）打包输出在dist/js目录下面的bundle.js文件了。
这就是我们的配置文件的最简单的用法，以后我们还可以在里面配置很多loaders，甚至更复杂的打包，下面一步步说明吧。
我们也可以不用在命令行里面输入webpack，因为我们可能以后会查询更多东西，因此我们可以，在package.json的script里面加入：
"webpack":"webpack --config webpack.config.js --progress --color"
这里的--progress和--color只是为了输出进度条和color，没有实际意义，然后在命令行输入npm run webpack就可以默认使用webpack进行打包了。
还有更多关于我们入口文件和输出文件的介绍，我建议看一下慕课网的这个视频会更加了解webpack配置文件
3.webpack在项目中如何自动生成html文件
在说这个之前，我们为什么要自动生成html页面？我们直接用index.html不就可以了？但是实际项目往往是有多个页面的，不过这里我们就简单介绍一个页面怎么自动生成，多个也是同样的原理，我们先来安装一个插件html-webpack-plugin，我们在命令行输入：
npm install html-webpack-plugin --save-dev
然后把我们的webpack.config.js里面修改成
// webpack.config.js
var htmlWebpackPlugin = require('html-webpack-plugin')//引入我们的插件
module.exports = {
entry: {
main: './src/script/main.js',
}, //我们的入口文件，相当于前面一节webpack-test中的hello.js
output:{
path: __dirname + "/dist/js",
/*打包完了之后，把内容输出到这个文件夹上,也可以写成"./dist/js"，
但是这样放在服务器上路径可能会出错，所以加上__dirname*/
filename: '[name]-[hash].js' //输入到上面path文件夹里面的bundle.js，没有则自动新建
},
plugins:[
new htmlWebpackPlugin() //对插件进行实例化
]
}然后，在我们的dist下面就有了一个项目自动生成的inex.html文件了
但是如果你细心就可以发现这个时候的index.html和我们原来的index.html没有任何的联系，这时候我们需要修改我们配置文件中的插件实例化那里修改成
plugins:[
new htmlWebpackPlugin({
template: 'index.html'
}) //对插件进行实例化
]再打包一次之后，就会发现生成的dist目录下面的index.html文件就会绑定了其他js文件。更具体的就请查看一下官方文档了，毕竟篇幅不能太长。
4.强大的loader加载器
前面我们也有所提到我们的loader加载器，但是实际中是怎么样的呢，这里我围绕我们项目经常利用babel-loader转换ES6
Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置，Loaders的配置选项包括以下几方面：
- test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
- loader：loader的名称（必须）
- include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
- query：为loaders提供额外的设置选项（可选）
首先，新建一个工程webpack-loader吧，然后将项目用npm初始化后，再在项目下下载webpack，然后构建好下面的这些目录
用npm下载一下html-webpack-plugin插件
npm install html-webpack-plugin --save-dev
修改我们的index.html成
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>layer.html
<div class="layer">
<div>this is a layer</div>
</div>layer.js
// import tpl from './layer.html'
function layer () {
return {
name: 'layer',
tpl: tpl
}
}
export default layer;app.js
//app.js
import layer from './component/layer/layer.js';
//导入layer
//使用ES6语法
const App = function () {
console.log(layer);
}
new App()利用babel-loader转换ES6
Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译帮你达到以下目的：
- 下一代的JavaScript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；
- 使用基于JavaScript进行了拓展的语言，比如React的JSX
首先，我们先安装Babel在命令行输入
npm install --save-dev babel-loader babel-core
再安装一下babel中的latest这里我们需要用到
npm install --save-dev babel-preset-latest
修改我们的配置文件webpack.config.js
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/app.js',
}, //我们的入口文件，相当于前面一节webpack-test中的hello.js
output:{
path: __dirname + "/dist/js",
/*打包完了之后，把内容输出到这个文件夹上,也可以写成"./dist/js"，
但是这样放在服务器上路径可能会出错，所以加上__dirname*/
filename: 'bundle.js' //输入到上面path文件夹里面的bundle.js，没有则自动新建
},
module: {
loaders: [
{
test: /\.js$/, //匹配所有的js文件
loader: 'babel-loader', //引用lbabel插件
}
]
},
plugins: [
new htmlWebpackPlugin({
filename:'index.html',
template:'index.html',
inject:'body' //将script标签加载进body
})
]
}再在我们的package.json下加入
{
//...
"babel": {
"presets": ["latest"]
},
//...
}在命令行输入webpack，就可以在我们的dist目录下面的js里面看到我们的配置文件已经有了这些文件
其他加载器css,less,sass等的原理也是一样，这里就不一一介绍了
有兴趣的话，可以继续看看慕课网的视频，在下也是受人启发。
还有更多的加载器可以在我们的webpack官网进行查询，这里我就不进行多解释了