最近花了兩周的休息時間學習了webpack，能夠可以編寫自己項目所需要的配置文件，總體來說webpack是一種非常優秀的前端模塊化的打包工具，非常值得花時間來研究學習。

什麽是webpack，它的出現是為了解決什麽問題？

webpack是一種可以融合各種前端新技術的平臺，我們只需要簡單地配置就可以使用jsx和typescript等一些前端新語法，得益於社區的發展，當我17年第一次接觸webpack的時候，還都是英文文檔，現在已經有很多優秀的中文入門教程和工程實踐

我們開始配置我們的webpack.config.js

主要的api

1、enrty（項目入口）　　

　　字符串，如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中文文檔

webpack的基本配置和一些理解