專案實戰 webpack的搭建

webpack是乙個模組的打包工具，這裡有他的官方文件，

打包工具需要的條件：乙個輸入的檔案和輸出檔案，

webpack的組成主要是四元素;entry.output,loader,plugin;

entry就是輸入檔案；

output就是輸出檔案；

loader是用於載入某些資源檔案，由於webpack本身只會打包conmmon.js的檔案，所以對於其他資源例如css,image,或者其他的語法是沒法載入打包，這就需要對應的loader將資源轉化，載入進來。loader是作用於乙個個檔案上的；

plugin是擴充套件webpack的功能。他直接作用於webpack上，擴充套件他的功能，當然loader也有變相的擴充套件webpack的功能，但是plugin能更加豐富，而不僅侷限於資源的載入。

而搭建乙個基礎的webpack讓其能執行起來只要乙個entry和output即可

var path = require('path');
var webpack = require('webpack');
module.exports = ,
}

webpack 自身只能打包common.js的檔案，但乙個專案需要各種的檔案例如（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

配置如下：

配置了babel轉碼器就要加乙個.babelrc檔案，格式如下：

新增檔案後如下

（limit 字段代表打包限制，這個限制並不是說超過了就不能打包，而是指當大小小於限制時會自動轉成 base64 碼引用。上例中大於1000位元組的正常打包，小於1000位元組的以 base64 的方式引用）

樣式處理(css)這裡介紹less檔案,需要用到less,less-loader,style-loader,css-loader,這幾個載入器，配置如下：

, , ]
}

如此幾個簡單的配置即可

若是專案中藥引入ant-design的庫就需要再babel-loader下新增如下配置：

query:]]]
}

如此一配置，乙個常規的配置就可