觀點
自身是一個一聽到webpack就頭大，看着一堆不曉得那是什麼玩意的東西總覺得自身做好前端就好了，然則在運用vue-cli的時刻總覺得要改个中的一些東西舉行項目初始化的時刻能夠更好運用！所以想要依據官方文檔舉行一個webpack的教程，寫這些主要照樣為了舉行一個體系的進修，協助在webpack的道路上渺茫的同學們。
在舉行webpack的進修之前，第一步就是要讓人人認識一下webpack中四个中心的觀點。
四个中心觀點
1. 進口（entry）
置信這個字面意義人人都沒有題目，這個就是指定webpack的進口文件，指定其從什麼地方最先。找到這個肇端點，再從肇端點出發來看依靠的文件，每一個依靠都將被處置懲罰，末了輸出。
示例：
// webpack.config.js
module.exports = {
entry: './src/index.js'
}上述代碼以及進口是簡樸的設置，是一個簡樸的單進口，是一種簡寫體式格局，詳細的多進口設置體式格局以下。
示例：
// webpack.config.js
module.exports = {
entry: {
fistpage: './src/index.js',
nextpage: './src/next.js',
lastpage: './src/last.js',
}
}2. 輸出（output）
有進口就肯定有出口，這裏天然就是定義文件輸出的位置，以及輸出文件的名字和目次，和進口一樣，你能夠定義一個output段來設置文件的輸出。
固然，輸出的文件進口指定一個就能夠了，辨別的只是文件的名字即可，因而在這裏只給人人引見一種，輸入時刻的名字是什麼，則輸出的文件名字就是什麼即可，只須要改filename為[name].js。
示例：
// webpack.config.js
const path = require('path')
module.exports={
entry: './src/index.js',
output: {
path: path.resolve(_dirname, 'dist'),
filename: 'first-webpack.js'
}
};解釋一下上述代碼，起首我們先倒入一個nodejs一個操縱文件途徑的中心模塊path，然後運用path舉行文件途徑操縱，將天生的文件存放在dist目次，天生的文件名字為first-webpack.js。
3. loader
webpack自身只能夠明白一些js文件，然則loader能夠做到讓其去處置懲罰一些非js文件，比方我們的css文件，圖片文件，loader能夠將這些文件轉換成webpack能夠處置懲罰的有用模塊，所以由於它的存在，你import導入進來任何範例模塊。
示例：
// webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(_dirname, 'dist'),
filename: 'first-webpack.js'
},
module: {
rules: [
{test: /\.txt$/, use: 'raw-loader'}
]
}
}以上，在設置loader的時刻，要新建一個module的對象，在其對象中來定義rules屬性，內里存在兩個必要的屬性，test和use，个中
- test示意要運用loader舉行轉換的一個或許一些文件，在這裡是指被導入的模塊的後綴名為.txt文件
- use則示意關於被導入的此類的文件，我們會運用raw-loader轉換一下，在舉行打包
注：肯定要注意此項設置是在module對象下的rules下舉行設置
這裏再做一個演示，比方我們日常平凡在項目中運用css，然則前面也說了在webpack中能夠不會辨認css，因而這裏要運用loader加載css文件，然則起首要裝置對應的loader舉行加載css文件，這裏運用css-loader，裝置敕令
npm install --save-dev css-loader然後在webpack中要設置，指定css文件運用css-loader加載
module.exports = {
rules: [
{test: /\.css$/, use: 'css-loader'}
]
}另有別的的體式格局能夠運用，作用是雷同的，就是運用內聯或許cli
4. 插件（plugins）
loader是用來轉換某些範例的模塊，而插件則用往來來往實行更廣的使命，這個功用異常壯大，能夠用來處置懲罰種種使命。固然，運用方法也是很簡樸，直接將npm裝置的插件經由過程require引入進來即可，然後在設置文件中將其添加進plugins數組中，也能夠自定義，固然也能夠一個插件運用其差別的功用屢次運用，然則響應的你要new一個實例。
示例：
// webpack.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(_dirname,'dist'),
filename: 'first-webpack.js'
},
module: {
rules: [
{test: /\.txt$/, use: 'raw-loader'}
]
},
plugins: [
new webpack.optimize.UgifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
}設置
固然，除了上述四个中心觀點，這裏另有一個設置，你能夠設置差別的情勢來舉行webpack內置優化，能夠挑選development或許production，設置差別的mode對應着差別的文件以及plugins插件舉行響應的情勢優化。
module.exports = {
mode: 'development'
}模塊
想必人人肯定曉得js或許自身熟習的一些模塊，然則究竟什麼是webpack模塊比擬照樣比較生疏，webpack模塊主要的作用就是能夠運用種種體式格局表達自身和其他模塊的依靠關聯。
比方：
- import語句
- require()語句
- 款式文件的@import語句
- url或許src的一些鏈接
可支撐基本上種種模塊，比方我們ts，sass以及less文件等，許可種種手藝運用webpack舉行，在webpack中關於模塊的途徑有三種情勢。
- 絕對途徑：import “/home/src/file”
- 相對途徑：import “./file”
- 模塊途徑：import “module”，這個迥殊申明一下，這裏的模塊將會在resolve.modules指定目次舉行搜刮
webpack另有一個主要的環節，就是依靠圖，在webpack中，一個文件依靠另一個文件，就稱為這兩個文件有着依靠關聯，所以在用圖象資本的時刻，我們能夠為圖象與文件中心豎立依靠關聯，如許在打包文件的時刻，就能夠將圖片資本也能夠打包，能夠運用import和require將圖片打包進來
這些用來我們入門webpack已足夠了，固然webpack不僅僅是這些，另有着許多更高等的用法，然則這裏僅僅是webpack的一個入門，讓人人能夠曉得webpack的一些詳細的作用，假如人人還想相識webpack的其他內容，能夠在下面留言，假如人人須要我會再出一個人人須要的教程，感謝！
