捂臉~~~~ 都9102年了，現(xiàn)在還來談webpack的配置，是不是有點不合適哪（我不管?。?，基于vue-cli或者create-react-app生成的項目，也已經(jīng)一鍵為我們配置好了webpack，看起來似乎并不需要我們深入了解。不過呢，自己嘗試去搭建一下webpack的 開發(fā)環(huán)境玩一下也是極好的~~
webpack：模塊化兼打包工具，可以把復雜得程序細化為小的文件，通過一個入口文件,找到你的項目得所有依賴的文件使用loaders處理它們，最后打包成為一個（或者多個）瀏覽器可以識別的javascript文件。
作用：
?? ?? ? 1、模塊化，讓我們把程序可以細化為細小的文件；
?? ?? ? 2、類似于TypeScript這種在javaScript基礎上拓展的開發(fā)語言：使我們能夠?qū)崿F(xiàn)目前版本的javaScript不能直接使用的特性。并且之后還能轉(zhuǎn)換為Javascript文件是瀏覽器可以識別。
?? ?? ? 3、可以使用，less，SCss等scss預處理器。
webpack與gulp區(qū)別：
? ? webpack是一種模塊化的解決方案，可以把各種資源都作為模塊來使用或處理。
????gulp是一種能能夠優(yōu)化前端的開發(fā)流程的工具，側(cè)重于前端開發(fā)得整個過程得控制管理，通過一系列插件將原本復雜繁瑣得任務自動化，并不能將除了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)建服務器-webpackdevserver（開啟服務實現(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)容如下：
好啦 就是這個樣子啦，略糙，見諒~
