webpack的基本配置和一些理解

最近花了兩週的休息時間學習了webpack，可以能夠編寫本身項目所須要的配置文件，整體來講webpack是一種很是優秀的前端模塊化的打包工具，很是值得花時間來研究學習。

什麼是webpack，它的出現是爲了解決什麼問題？

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

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

主要的api

一、enrty（項目入口）　　

　　字符串，如entry:"./src/index.js"

　　數組形式： 如entry:[react, react-dom],能夠把數組中的多個文件打包轉換爲一個chunk

　　對象形式，若是須要配置的是多頁的應用，或者咱們喲啊抽離出指定模塊做爲指定公共代碼，須要採用這種形式，屬性名是佔位符[name]的值

　　 如：

entry: { 　　main:'./src/index2.js', 　　second: './src/index2.js', 　　vendor:['react', 'react-dom'] }

 

二、output（出口文件）

 　　會告訴webpack在哪裏輸出所建立的bundle.js以及如何命名

　　　out：{ 　　　　path:path.join(__dirname, './dist'), 　　　　name: 'js/bundle-[name]-[hash].js, 　　　　chunkFilename: 'js/[name].chunk.js',
 　　　　publicPath:'/dist/' 　　}

 

 

三、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文檔裏查詢

 

四、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並非那麼多，用的時候再查就能夠

 

五、一些輔助開發的相關屬性

　　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中文文檔