项目实战：webpack的搭建

webpack是一个模块的打包工具，这里有他的官方文档，

打包工具需要的条件：一个输入的文件和输出文件，

搭建一个基础的webpack让其能运行起来只要一个entry和output即可

var path = require('path');
var webpack = require('webpack');

module.exports = {
entry:'./app/index.js',
output:{
path: path.resolve(__dirname, './dist'),
filename:'bundle.js'
},
}

webpack 自身只理解 JavaScript，但一个项目需要各种的文件例如（less,jsx，img,png，es6等），所以就需要一个插件来把这写文件转为js文件，就有了babel转码器，
babel:
babel-core

babel-polyfill

babel-runtime

babel-plugin-transform-runtime

babel-loader

babel-preset-es2015

babel-preset-react

配置如下：

{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
}

配置了babel转码器就要加一个.babelrc文件，格式如下：

{
"presets": [],
"plugins": []
}
添加文件后如下
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": ["transform-runtime"]
}

图片的加载器：url-loaderfile-loader配置项如下

{
test:/\.(png|jpg)$/,
loader:'url-loader?limit=1000',
}

（limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于1000字节的图片正常打包，小于1000字节的图片以 base64 的方式引用）

样式处理(css)这里介绍less文件,需要用到less,less-loader,style-loader,css-loader,这几个加载器，配置如下：

{
test:/\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
}

如此几个简单的配置即可

若是项目中药引入ant-design的库就需要再babel-loader下添加如下配置：

query:{
plugins: [
["import",
[{
"libraryName": "antd",
"style": true
}]
]
]
}

如此一配置，一个常规的配置就可