1、什麼是webpackcss
是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析,而後將這些模塊按照指定的規則生成對應的靜態資源。它作的事情是,分析你的項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,TypeScript等),並將其轉換和打包爲合適的格式供瀏覽器使用。能夠將多種靜態資源 js、css、less 轉換成一個靜態文件,減小了頁面的請求。html
2、安裝和命令行前端
一、新建一個目錄,進入目錄,初始化webpack
二、安裝es6
全局安裝web
在輸出版本時,顯示,要安裝webpack-clijson
這樣就能輸出版本,能夠看到我安裝的是4.2.0,這裏要注意,自webpack4以後,使用有很大的變化segmentfault
局部安裝瀏覽器
(1)練習(坑):處理js文件,在項目根目錄下,新建hello.js,而後打包sass
顯示沒有配置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