一、webpack是什么？
webpack是现代js应用程序的静态模块加载器(module bundler)，主要是用来对静态文件（例如css,js,ts,img等等）进行打包编译。
二、webpack的配置：
webpack的配置主要有以下四个核心配置，当然还有其它配置。
1.entry：入口起点(entry point)，也就是你项目的入口文件。进入该入口文件后，webpack会找到哪些模块或者库是入口文件所依赖的。
2.output：出口文件。该属性将告诉webpack在项目哪里输出所创建的bundle.js文件。该属性最低配置为一个对象。该对象下面有两个属性，分别为filename（文件名）和 path（文件所在的路径）。
3.loader：加载器。webpack默认只会处理解析javascript文件。但是我们的项目中除了js,还有css,img等文件需要进行打包编译，此时loader就派上用场了。
4.plugins：插件。webpack提供了一个plugins属性允许我们自定义一些插件。主要目的是完成loader无法完成的事情。
三、实例
下面我们来看下一个小实例运用。
index.html
<div id="#app">hello webpack</div>
index.js
require('./style.css');
style.css
*{margin: 0;padding: 0}
#app{
font-size: 28px;
text-align: center;
width: 300px;
height: 200px;
line-height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
background: url('./1.png') no-repeat;
background-size: 100% 100%;
}
现在重点是配置这个webpack.config.js文件，在项目的根目录下新建一个webpack.config.js
const path = require('path'); //引入nodejs内部模块path
const config = {
entry: path.resolve() + '/index.js'， //index.js作为入口文件
output: {
filename: 'bundle.js' //（文件名）我们将bundle.js最为最终编译后的文件
path: path.resolve() //bundle.js文件所在的路径
},
module: {
loaders: [
{
test: /\.css$/ //匹配以.css为后缀名的文件
loaders: ['style-loader','css-loader'] //配置style-loader&css-loader作为打包css文件的加载器
{
test: /\.(png)|(jpg)|(gif)$/ //匹配以.png|jpg|gif为后缀名的图片
loader: 'url-loader?limit=50000' //配置url-loader作为打包图片的加载器,limit为图片大小,
当图片小于50000时，将以base64格式压缩,大于50000正常打包
};
module.exports = config; //把config共享出去以便其他文件使用