捂臉~~~~ 都9102年了，現(xiàn)在還來談webpack的配置浩螺，是不是有點不合適哪（我不管Ｑセ肌），基于vue-cli或者create-react-app生成的項目年扩，也已經(jīng)一鍵為我們配置好了webpack蚁廓，看起來似乎并不需要我們深入了解。不過呢厨幻，自己嘗試去搭建一下webpack的 開發(fā)環(huán)境玩一下也是極好的~~
webpack：模塊化兼打包工具相嵌，可以把復(fù)雜得程序細化為小的文件，通過一個入口文件,找到你的項目得所有依賴的文件使用loaders處理它們况脆，最后打包成為一個（或者多個）瀏覽器可以識別的javascript文件饭宾。
作用：
?? ?? ? 1、模塊化格了，讓我們把程序可以細化為細小的文件看铆；
?? ?? ? 2、類似于TypeScript這種在javaScript基礎(chǔ)上拓展的開發(fā)語言：使我們能夠?qū)崿F(xiàn)目前版本的javaScript不能直接使用的特性盛末。并且之后還能轉(zhuǎn)換為Javascript文件是瀏覽器可以識別弹惦。
?? ?? ? 3否淤、可以使用，less棠隐，SCss等scss預(yù)處理器石抡。
webpack與gulp區(qū)別：
? ? webpack是一種模塊化的解決方案，可以把各種資源都作為模塊來使用或處理助泽。
????gulp是一種能能夠優(yōu)化前端的開發(fā)流程的工具啰扛，側(cè)重于前端開發(fā)得整個過程得控制管理，通過一系列插件將原本復(fù)雜繁瑣得任務(wù)自動化嗡贺，并不能將除了js之外的資源模塊化隐解。
?? ?webpack的優(yōu)點使得webpack在很多場景下可以替代gulp類的工具。
webpack的基本配置項：
? ? 入口文件诫睬；entry
? ? 出口文件煞茫；output
? ? module：css，js岩臣，img都叫做module溜嗜，打包在module中進行。
?? ??? ?? ? rules就是louders的配置項架谎。
? ? pulgins：webpack的插件炸宵。
? ? resolves：webpack的配置項。（例：在vue中有@可以代表src谷扣，能夠通過@代表src就是因為在webpack中進行了配置）
webpack的基本使用：
? ? 1土全、全局安裝：
? ? ?? npm install webpack@3 -g
? ? 2、創(chuàng)建文件夾-初始化：
? ? ? ? npm init -y
? ? 3会涎、局部安裝webpack：
? ? ?? npm install webpack@3 -S
? ? 4裹匙、在文件夾下創(chuàng)建webpack.config.js文件：
? ? 5、創(chuàng)建src目錄在其中創(chuàng)建main.js
? ? 6末秃、插件-htmlwebpackplugin-(在dist中生成一個引入了js的html文件)
?? ?? ? 安裝：npm install html-webpack-plugin -S
?? ?? ? 使用方法：在文件中引入后概页；
?? ??? ??? ??? ?在plugins中new一個htmlwebpackplugin對象
?? ??? ??? ?? ? 有兩個必傳的參數(shù):
?? ??? ??? ??? ?? ? 1、template（模版）
?? ??? ??? ??? ?? ? 2练慕、filename：(生成文件的名稱)
?? ??? ??? ?? ? 不必須參數(shù);
?? ??? ??? ??? ?? ? 1惰匙、title（在html中使用ejs模版型語法）
? ? 7、插件-創(chuàng)建服務(wù)器-webpackdevserver（開啟服務(wù)實現(xiàn)熱更新）
?? ?? ? 安裝：npm install webpack-dev-server@2 -S
?? ?? ? 使用方法：在package.json的scripts中增加指令“dev”：“webpack-dev-server”（啟動一下）
? 8铃将、插件-打包js文件-
?? ?? ? 安裝：npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
? ? 9项鬼、插件-打包css，scss文件-
?? ?? ? 安裝：npm install --save-dev style-loader css-loader sass-loader node-loader
webpack.config.js文件內(nèi)容如下：
好啦 就是這個樣子啦劲阎，略糙绘盟，見諒~
