Tip: 感冒了，一定要戴口罩哦~不要傳染給了別的小可愛(ài)
2019年到了，看到很多總結(jié)2018，暢想2019之類的小可愛(ài)，我也覺(jué)得需要計(jì)劃一下2019了，說(shuō)不定完成了呢！
今天開(kāi)始總結(jié) webpack4
首先執(zhí)行安裝指令：
npm install --save-dev webpack在一開(kāi)始要明白，webpack最重要的四個(gè)核心組成部分： 入口、輸出、loader、plugins，這個(gè)也很好明白，運(yùn)行肯定要有入口和輸出，在其中要依賴一些loader來(lái)識(shí)別各種資源，當(dāng)然也要通過(guò)plugins來(lái)打包這些資源，>從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量
（同學(xué)們，自己新建一個(gè)dist文件夾，一個(gè)src文件夾，src里有index.js，其中import _ from 'lodash'，引入這個(gè)全局變量；dist里有index.html,其中引入main.js。這里要注意安裝lodash哦，不可以光是引，否則會(huì)報(bào)錯(cuò)）
然后我們先挑比較簡(jiǎn)單的入口和輸出來(lái)說(shuō)，我們把entry放在src中，在src中對(duì)代碼進(jìn)行書(shū)寫(xiě)和編輯，而把output放在dist里面，這樣讓書(shū)寫(xiě)的和打包的區(qū)域做到了劃分
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname,'dist')
},
}
在這里注意，我們的package.json中要加入以下這句，在不加入這句之前我們還可以使用‘npx webpack --config webpack.config.js’，但是這種方式比較麻煩，所以我們直接在package.json中添加一個(gè)npm腳本，相當(dāng)于添加一個(gè)快捷方式"scripts": { "build": "webpack" }
這時(shí)，你的項(xiàng)目差不多就有了一個(gè)基本的小流程，如何檢驗(yàn)?zāi)兀约涸?src/index.js中添加一些語(yǔ)句，并執(zhí)行這些語(yǔ)句，如append一行文字，
var element = document.createElement('div');
element.innerHTML = _.join(['Hello','webpack'],' ');
然后執(zhí)行npm run build ，成功build后，找到dist里的index.html，在瀏覽器上打開(kāi)這個(gè)文件，驚喜看到你在index.js上的操作在index.html上得到了展示。
然而，資源不止是js和html，還有其他的各種資源，我們?nèi)绾翁幚?，就要聊到loader，先去乖乖下載loader們，需要什么就安裝什么，然后乖乖在webpack.config.js中配置，配置好你就可以各種什么CSS、字體、xml數(shù)據(jù)，添加資源，引用資源啦~
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
]
}
到這里，基本上就是一個(gè)我認(rèn)為的比較基礎(chǔ)的webpack的配置過(guò)程，這樣的簡(jiǎn)單配置，能夠理清其中邏輯，也比較好理解webpack的入門(mén)其實(shí)不是特別的難，不要給自己壓力，慢慢來(lái)~
