最近花了兩周的休息時間學習了webpack，能夠可以編寫自己項目所需要的配置文件，總體來說webpack是一種非常優秀的前端模塊化的打包工具，非常值得花時間來研究學習。
什么是webpack，它的出現是為了解決什么問題？
webpack是一種可以融合各種前端新技術的平台，我們只需要簡單地配置就可以使用jsx和typescript等一些前端新語法，得益於社區的發展，當我17年第一次接觸webpack的時候，還都是英文文檔，現在已經有很多優秀的中文入門教程和工程實踐
我們開始配置我們的webpack.config.js
主要的api
1、entry（項目入口）
字符串，如entry:"./src/index.js"
數組形式： 如entry:[react, react-dom],可以把數組中的多個文件打包轉換為一個chunk
對象形式，如果需要配置的是多頁的應用，或者我們喲啊抽離出指定模塊作為指定公共代碼，需要采用這種形式，屬性名是占位符[name]的值
如：
entry: { main:'./src/index2.js', second: './src/index2.js', vendor:['react', 'react-dom'] }
2、output（出口文件）
會告訴webpack在哪里輸出所創建的bundle.js以及如何命名
out：{ path:path.join(__dirname, './dist'), name: 'js/bundle-[name]-[hash].js, chunkFilename: 'js/[name].chunk.js',
publicPath:'/dist/' }
3、module（模塊的處理）
webpack只能處理js文件，瀏覽器也可能不識別一些最新的js語法，所以我們就要對傳入的模塊做一些預處理，這就涉及到了webpack的又一核心概念“loader”’
loader的作用和基本用法
webpack中，loader的配置主要在module.rules中進行，這是一個數組，每一個rule做了兩件事
- 識別文件類型，來確定具體處理該數據的loader(Rule.test屬性)
- 使用相關的loader對文件進行相關的操作轉換(Rule.use屬性）
比如我們想要處理react中的jsx語法
module: { rules:[{ test: /(\.jsx|\.js)/, //表示匹配規則，是一個正則表達式
use:{ //表示針對匹配文件將使用處理的loader
loader: "babel-loader", options: { presets: ["es2015", "react"] } } }] }
常用的loader：
轉換編譯：script-loader, babel-loader,ts-loader,coffee-loader
處理樣式：style-loader,css-loader,less-loader,sass-loader,postcss-loader
處理文件：raw--loader,url-loader,file-loader
處理數據：csv-loader,xml-loader
處理模板語言：html-loader,pug-loader,jade-loader,markdown-loader
清理和測試：mocha-loader,eslint-loader
此外還有許多loader，可以到loader文檔里查詢
4、plugin（loader不能做的處理都能交給plugin來做）
const CleanWebpackPlugin = require("clean-webpack-plugin") { ... plugin:[ new webpack.DefinePlugin({ "process.env" : { NODE_ENV: JSON.stringify("production") } }), new CleanWebpackPlugin(["js"], { root: __dirname + "/stu/", verbose: true, dry: false }) ] }
一種插件就是一種函數，通過傳入不同的參數，可以實現不同的功能，webpack讓人覺得難學的地方之一是喲啊自己封裝plugins，對於我們大多數人來說，需要掌握的plugins並不是那么多，用的時候再查就可以
5、一些輔助開發的相關屬性
devtool:打包后的代碼和原始代碼存在較大的差異，此選項控制是否生成以及如何生成sourcemap
devserver：通過配置devserver選項，可以開啟一個本地服務器
watch：啟用watch模式后，webpack將持續監聽熱河已經解析文件的更改，開發是開啟會很方便
watchoption：用來定制watch模式的選項
performance：打包后命令行如何展示性能提示，如果超過某個大小是警告還是報錯
對於webpack配置，要區分開發環境還是產環境
下面是文檔的建議
我們為了避免重復應該提取公共代碼
所以一般有這么幾個文件
webpack.config.js
webpacl.dev.js
webpack.prod.js
webpack.common.js
此外還有單獨配置babel的文件babelrc，webpack可以自動識別
如果大家想跟着配置一個webpack.config.js文件，可以參考入門webpack，看這篇就夠了
還有文檔可以仔細看一下webpack中文文檔