Tip: 感冒了劈榨，一定要戴口罩哦~不要傳染給了別的小可愛
2019年到了，看到很多總結(jié)2018粒梦，暢想2019之類的小可愛亮航，我也覺得需要計(jì)劃一下2019了，說不定完成了呢匀们！
今天開始總結(jié) webpack4
首先執(zhí)行安裝指令：
npm install --save-dev webpack在一開始要明白缴淋，webpack最重要的四個核心組成部分： 入口、輸出泄朴、loader重抖、plugins，這個也很好明白祖灰，運(yùn)行肯定要有入口和輸出钟沛，在其中要依賴一些loader來識別各種資源，當(dāng)然也要通過plugins來打包這些資源局扶，>從打包優(yōu)化和壓縮恨统，一直到重新定義環(huán)境中的變量
（同學(xué)們叁扫，自己新建一個dist文件夾，一個src文件夾畜埋，src里有index.js莫绣，其中import _ from 'lodash'，引入這個全局變量悠鞍；dist里有index.html,其中引入main.js对室。這里要注意安裝lodash哦，不可以光是引咖祭，否則會報(bào)錯）
然后我們先挑比較簡單的入口和輸出來說掩宜，我們把entry放在src中，在src中對代碼進(jìn)行書寫和編輯心肪，而把output放在dist里面锭亏，這樣讓書寫的和打包的區(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中添加一個npm腳本固该，相當(dāng)于添加一個快捷方式"scripts": { "build": "webpack" }
這時，你的項(xiàng)目差不多就有了一個基本的小流程糖儡，如何檢驗(yàn)?zāi)胤セ担约涸?src/index.js中添加一些語句，并執(zhí)行這些語句握联，如append一行文字桦沉，
var element = document.createElement('div');
element.innerHTML = _.join(['Hello','webpack'],' ');
然后執(zhí)行npm run build ，成功build后金闽，找到dist里的index.html纯露，在瀏覽器上打開這個文件，驚喜看到你在index.js上的操作在index.html上得到了展示代芜。
然而埠褪，資源不止是js和html，還有其他的各種資源挤庇，我們?nèi)绾翁幚沓伲鸵牡絣oader，先去乖乖下載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'
]
}
]
}
到這里狭郑，基本上就是一個我認(rèn)為的比較基礎(chǔ)的webpack的配置過程腹暖，這樣的簡單配置，能夠理清其中邏輯翰萨，也比較好理解webpack的入門其實(shí)不是特別的難脏答，不要給自己壓力，慢慢來~
