webpack4.x深刻與實踐

1、什麼是webpack

是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。能夠將多種靜態資源 js、css、less 轉換成一個靜態文件，減小了頁面的請求。

2、安裝和命令行

一、新建一個目錄，進入目錄，初始化

二、安裝

全局安裝

在輸出版本時，顯示，要安裝webpack-cli

這樣就能輸出版本，能夠看到我安裝的是4.2.0，這裏要注意，自webpack4以後，使用有很大的變化

局部安裝

（1）練習（坑）：處理js文件，在項目根目錄下，新建hello.js，而後打包

顯示沒有配置webpack的mode選項，默認有production和development兩種，咱們輸入

依然有錯：未找到入口模塊發成錯誤，

這是由於webpack4.x是以項目根目錄下的./src/index.js做爲入口，因此咱們要新建src目錄且改hello.js爲index.js

這裏還要注意：

webpack4.x的打包已經不能用webpack 文件a 文件b的方式，而是直接運行webpack --mode development或者webpack --mode production，這樣便會默認進行打包，入口文件是'./src/index.js'，輸出路徑是'./dist/main.js'，其中src目錄即index.js文件須要手動建立，而dist目錄及main.js會自動生成。

所以咱們再也不按webpack 文件a 文件b的方式運行webpack指令，而是直接運行

這樣便能實現打包。

每次這樣寫是否是都點麻煩，咱們能夠在package.json中

每次執行就能夠：

（2）練習：處理css文件

新建一個css文件style.css，在index.js中引入

而後打包：

會報如上錯誤，是由於webpack不支持css文件類型，須要依賴loader

css-loader：使webpack能夠處理css文件

style-loader：新建一個style標籤，把css-loader處理過的文件放進去，而後插入到HTML標籤中

安裝以後使用（直接在文件前）：

或者（在命令行）：

那每次更新都要執行一次，有沒有自動更新的？？？

（3）其餘參數：

--progerss：會出現打包過程，有百分比進度條

--display-modules：會把全部打包的模塊列出來

--display-reasons：會把打包的緣由列出來

3、webpack的配置

（1）新建一個項目並初始化

上面：將會打包。。。main.js文件到。。。bundle.js文件

多文件輸入：

4、自動生成HTML頁面文件

（1）安裝html-webpack-plugin插件

（2）在webpack配置package.config.js中

（3）傳參使用

一、參數

在根目錄下的index.html中

生成的dist/index.html中

二、上線地址

在生成的index.html中

三、html壓縮

四、多頁面應用，生成多個html文件

5、loader的配置

一、解析es6語法

（1）安裝babel

（2）配置webpack

二、解析css

（1）安裝style-loader和css-loader

（2）配置webpack

（3）在項目中常常有相似-webkit的前綴，每次寫很麻煩，這裏就要用到postcss-loader,後處理loader

配置webpack

新建一個postcss.config.js文件和webpack.config.js同級

此時，若是你打包，並不會報錯，可是前綴可能也沒有，因此須要在package.json中加入

三、解析less

（1）安裝

（2）webpack的配置

四、解析sass
sass的使用和less同樣，只要把less改成sass就好了

五、處理html模板文件

（1）安裝html-loader

（2）配置

（3）使用

layer.js

app.js

六、使用ejs模板文件，後綴爲tpl或ejs

（1）安裝

（2）配置

（3）使用

layer.tpl

layer.js

app.js

七、用file-loader處理圖片

（1）安裝

（2）配置

（3）使用

layer.less

如果在.tpl或.ejs中使用

（4）也能夠加參數

八、使用url-loader處理圖片（會影響文件大小）

九、經過image-webpack-loader和url-loader結合：先有image-webpack-loader打包，在經過url-loader