vue（8）—— 組件化開發 - webpack（2） vue（7）—— 組件化開發 — webpack（1）

webpack的經常使用loder和插件

 

loder和插件是什麼，如今暫且不表，看到後面你就懂了

 

引入css問題

 

直接用link標籤導入css

在前面的 vue（7）—— 組件化開發 — webpack（1）  講解中，相信已經對webpack有必定了解了，想必不少朋友已經躍躍欲試了，準備要搞一個本身的小網站出來了，寫上css，調整好代碼，準備說幹就幹：

 

 

 

 

一樣的，由於之後的開發中，確定會有不少個css文件，可能一個vue組件就須要一個css文件，而後你又跟前面的js文件引入同樣，在html文件裏用link標籤引入一堆的css嗎？

這仍是那個用戶體驗的問題。

 

在組件文件裏用import導入css

 

因此，這裏的解決方法仍是同js文件同樣，用導包的方式： import   ‘./XX.css’

 

注意：導入css一般狀況下是在入口組件裏導入，而不是隨便哪裏均可以導入，固然最準確的仍是根據本身的代碼邏輯作相應調整

 

 

 

index.html:

 已把link標籤刪除掉，經過導入編譯好的bundle.js來插入css

 

 

好，在終端，使用命令npm run dev編譯一下，發現報錯了

 

 

 提示的意思是說你須要一個loader組件來控制這個css格式類型的文件

 

這裏要補充下，webpack.config.js是js文件，咱們定義的vue局部組件後綴也是js，而webpack默認只識別js文件，不能識別處理非js的文件，因此須要一個loder引導識別。因此在前面沒遇到這個問題，如今遇到了

 

因此這裏須要安裝一個css的loader，是的，以上都是引子，就是爲了引出這個loader

 

css-loader安裝

 

安裝的時候記得安裝兩個，一個是css-loder這個是識別css後綴的文件，還要安裝一個style-loader，這個是識別<style>標籤的

npm  i css-loader style-loader -D:

 

安裝完成後，package.json的開發環境裏已經自動寫入：

 

 在webpack配置文件里加入以下，webpack.dev.config.js

 

 

 

 

注意

• module，test,loader都是固定的鍵，不能更改
• style-loder!css-loader，意思是先加載css-loder，再加載style-loder

關於這個很好理解，確定是先有css文件，再有的css樣式對吧，主要就是這裏的【！】是先取後面個的意思

 

module.exports = { entry: { //入口
        name: './dist/app.js'  //鍵名隨意，值爲項目入口js
 }, output: { //出口
        filename: './bundle.js' //鍵名必須爲filename，值爲項目編譯好的js
 }, watch: true, module:{ loaders:[ { test:/\.css$/, loader:'style-loader!css-loader' } ] } }

 

 

另外的webpack.prod.config.js配置是暫且無論，固然你也能夠設置成同樣的，記得把watch屬性刪掉

 

 

如今再使用命令 npm  run dev 編譯看看

 

 

編譯成功，再次打開index.html文件： 

 

link標籤和style標籤都是bundle自動加上去的 

 

 

 

完美吧，終於能夠顯示css了

 

若是你在編譯的時候遇到問題，好比遇到如下問題，請檢查你的webpack.dev.config.js文件與css相關的配置是否有問題

 

 

注意：若是你遇到這樣的寫法，不是loders而是rules，不是loder而是use，這種也可行，這是新版的寫法，不重要，效果是同樣的

 

 

高級css語言

 若是你的代碼裏有使用高級的css語言，好比less之類的，你一樣須要從新安裝一次loder，less對應的是less-loder，sass對應的是sass-loder，其餘的就很少說了，能夠去npm官網查

 

css裏的url問題

  在寫css時，確定會有引入一張圖片的樣式，好比這裏：

 給入口的div綁定了一個id爲main屬性：

 

我事先在項目的根目錄放了一張圖片，1.jpg，寫上css樣式，好比：

 

 當完成以上操做的時候，這邊的實時監聽的已經報錯了：

 

是的，又須要安裝一個針對url的loader， npm  i   file-loader  url-loader -D，網很差的話你可使用前面說過的nrm來安裝

 

安裝完，package.json文件裏又自動多了兩個參數：

 

 

 

再在webpack.dev.config.js裏配置以下，圖片格式有png，jpg，gif，jpeg，bmp，png，因此寫了以下

注意：只添加url-loder，不用給file-loder

 

 

 將那個錯誤的卡住的編譯程序按ctrl+c終止掉，從新運行，沒有報錯：

 

打開網頁： 

 

 

右邊的css樣式就是url-loder把圖片自動作base64編碼了，而後經過瀏覽器讀取base64編碼，藉此顯示圖片

 

直接複製按個base64編碼地址，另起一個瀏覽器窗口，是能夠直接打開的：

 

 

完美

 

 

 

在loder部分還能夠給參數

 

 由於圖片用的base64編碼，那麼就能夠稍微作限制，webpack.dev.config.js:

 

 

 

module.exports = { entry: { //入口
        name: './dist/app.js' //鍵名隨意，值爲項目入口js
 }, output: { //出口
        filename: './bundle.js' //鍵名必須爲filename，值爲項目編譯好的js
 }, watch: true, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test:/\.(jpg|jpeg|png|gif|bmp)$/, loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]' } ] } }

 

 

打開網頁：

 

 

 

我添加的那幾個參數的意思：

 

• limit：瓶頸顯示，limit=20，limit單位是bytes，若是超過給定的值則不會做爲base64編碼，若是沒超過則做爲base64編碼
• name：指圖片將被編碼的名字，[hash:8]指取hash值前8個，[name]即原來的圖片的名字，[ext]指原來的圖片的後綴名。此時的圖片，原來的就是1.jpg，因此這裏是 558c08ec-1.jpg

• 若是不給name屬性，webpack會按本身的規則設定，把文件名取hash值，默認取32位，做爲最後的名字

 

 引入bootsrap庫

 

首先使用npm安裝bootstrap:

 

 

導入bootsrap 

 

做爲入口的app.js，這裏說明一下，若是是引入下載的插件，不用寫文件的路徑，只有引入本身寫的文件才須要寫文件路徑

 

webpack配置

 webpack配置文件不用變，同上

 

module.exports = { entry: { //入口
        name: './dist/app.js' //鍵名隨意，值爲項目入口js
 }, output: { //出口
        filename: './bundle.js' //鍵名必須爲filename，值爲項目編譯好的js
 }, watch: true, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test:/\.(jpg|jpeg|png|gif|bmp)$/, loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]' } ] } }

webpack配置

 

 入口組件app.js

 

在app.js入口組件裏寫入bootstrap的樣式，給了幾個比較簡單的class名：

 

 

 最後index.html顯示結果：

 

固然你會發現，在項目根目錄有編譯過的圖片文件：

 

 

引入字體

 

字體就不用多說了，其實字體也是個url，因此用url-loader就好了，webpack配置:

 

 而後你就能夠在css樣式裏寫入你須要的字體樣式就好了，這裏就不展現示例了，本身體會了

 

處理es6語法

 

在前面已經瞭解了，瀏覽器默認不識別es6的語法，es即ECMAscript6，好比class定義類，瀏覽器就不識別，不知道後續的瀏覽器會不會識別這些了。

 

我在code1.js上定義了一個es6的類：

 

 

 

 

 這邊已經報錯了：

 

 

此時怎麼辦呢？對了，仍是用loder

 

安裝插件

 

安裝兩個插件：npm i babel-preset-env babel-preset-stage-0 -D

 

 

注：若是babel-preset-stage-0用不了，能夠卸載了安裝babel-preset-stage-es2015，babelrc部分相應的也要改動對應的stage

 

安裝另一套插件：npm i babel-core babel-loader bable-plugin-transform-runtime -D

  

 

 

注：

 

1.若是你的webpack版本比較低，安裝的babel-loader沒法使用（由於默認安裝的最新版）

你能夠安裝指定版本，npm i babel-loader@7，我安裝的7可用

 

2.若是你在安裝 npm i babel-core babel-loader bable-plugin-transform-runtime -D 時出錯：

 

多試幾回，或者切換下npm安裝源試試

 

 

設置bable

好的，安裝完成以後。直接在項目的根目錄，建立一個【.babelrc】文件，寫入以下參數：

 

 

 

 

{ "presets":["env","stage-es2015"], "plugins": ["transform-runtime"] }

 

注意對應你安裝的stage版本，我安裝stage-0用不了，已經切換了stage-es2015

 

 

 webpack配置文件

以下修改：

 

module.exports = { entry: { //入口
        name: './dist/app.js' //鍵名隨意，值爲項目入口js
 }, output: { //出口
        filename: './bundle.js' //鍵名必須爲filename，值爲項目編譯好的js
 }, watch: true, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test:/\.(jpg|jpeg|png|gif|bmp)$/, loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]' }, { test:/\.(ttf|eot|svg|woff|woff2)$/, loader:'url-loader' }, { test:/\.js$/, loader:'babel-loader', exclude:/node_modules/ } ] } }

webpack配置文件

 

 

其實用path組件也能夠，這個path組件是內置的，以下寫也能夠：

 

 

 

var path = require('path') module.exports = { entry: { //入口
        name: './dist/app.js' //鍵名隨意，值爲項目入口js
 }, output: { //出口
        filename: './bundle.js' //鍵名必須爲filename，值爲項目編譯好的js
 }, watch: true, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test:/\.(jpg|jpeg|png|gif|bmp)$/, loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]' }, { test:/\.(ttf|eot|svg|woff|woff2)$/, loader:'url-loader' }, { test:/\.js$/, loader:'babel-loader', exclude:path.resolve('./node_modules') } ] } }

webpack-path

 

 

exclude的意思是排除根目錄下node_modules裏的js文件，由於不排除的話，babel就會去編譯node_modules裏的js，消耗資源不說，編譯了用不了

 

編譯運行

 

如今運行npm run dev再看：

 

 

 

 若是編譯時報錯：

 

意思就是說最後那個‘./node_module’沒法識別。

 

因此在exclude部分，你要嘛用path.resolve('./node_modules')，要嘛用/node_modules/，其餘的寫法都是錯的

 

正確編譯：

 

其實已經識別了，可是說我這有語法錯誤

 

好的，我稍微修改一下，立馬不報錯了

 

 

好的，這裏這個babel算是比較高級的用法了，之後還會用到，就很少解釋了。目前你就記住，babel是把es6的高級語法編譯成瀏覽器可識別的低級語法就好了

 

html-webpack-plugin插件

 

在之後的開發中，可能有這種需求：

 

當咱們已經肯定把項目碼好，準備把代碼輸出來，而後直接把輸出來的相關文文檔拷走便可，這樣的需求，怎麼辦？

徹底可讓webpack編譯的時候自動生成html文件，而不是咱們本身去手動的設置，由於咱們改動的目前只是開發環境，有些東西其實對於生產環境來講是不須要的，因此這個怎麼操做呢？

 

安裝html-webpack-plugin 

 

 

webpack配置

 

 而後在webpack.prod.config.js文件裏做以下配置：注意此次是生產環境的那個webpack配置文件了：

 

 

var path = require('path') var htmlwebpackplugin = require('html-webpack-plugin') module.exports = { entry: { //入口
        name: './dist/app.js' //鍵名隨意，值爲項目入口js
 }, output: { //出口
        path:path.resolve('./src'),//相對轉絕對，設定一個輸出文件路徑
        filename: './bundle.js' //鍵名必須爲filename，值爲項目編譯好的js
 }, plugins:[ new htmlwebpackplugin({ template:`./index.html` // html文件參照物，即開發環境下的html文件 }) ], module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test:/\.(jpg|jpeg|png|gif|bmp)$/, loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]' }, { test:/\.(ttf|eot|svg|woff|woff2)$/, loader:'url-loader' }, { test:/\.js$/, loader:'babel-loader', exclude:/node_modules/ } ] } }

webpack.prod.config.js

 

編譯運行

 

其餘不用變，把剛纔的測試環境卡住的npm run dev停掉，用npm  run build:

 

 

 以後則會在根目錄下自動生成一個src文件夾：

 

 打開index.html，發現一個小問題，出現了兩個bundle。

 

問題解決

由於使用npm  run build時，會自動給咱們配置一個bundle，可是咱們的參照的那個index.html文件裏原本就有了一個bundle，因此，把參照物裏的bundle刪除：

 

再次使用npm run build編譯：

 

 這下正常了，完美

 

因此，這個 var  htmlwebpackplugin = require('html-webpack-plugin')有兩個做用：

 

1.參照開發環境的文件打包

2.自動編譯好並把打包好的bundlue.js文件添加進html文件裏

 

 

 

http-server插件 

 

 

最後還有個插件，一個僞服務器插件 http-server。若是你使用的是pycharm開發的話，pycharm自帶了這個功能，在html文件直接點右上角的瀏覽器圖標便可自動掛載在本地端口。詳細的就很少說了

 

安裝插件

 

 由於一下子要直接調用命令使用，因此安裝在了全局

 

啓動

 

使用命令 hs -o -p 8888，意思是經過8888端口啓動 

 

 

若是你設置默認的瀏覽器的話，會自動啓動默認瀏覽器，而後自動開始一個新窗口直接打開：

 

 

換了一個瀏覽器，正常訪問：

 

webpack-dev-server插件

 

又來個問題了，若是你每改一次都要刷新一次嗎？很煩對不對，因此有必要有一個工具當咱們改完代碼，不用刷新瀏覽器頁面，自動的更新，相似剛纔咱們用的webpack配置文件，實時監聽的效果：

 

 

安裝webpack-dev-server插件

注意，安裝webpack-dev-server時，因爲新版須要webpack-cli（cli即腳手架，後面會講到）的支持，因此最好安裝低版本的：

 

webpack配置

 

webpack.dev.config.js：

 

其實跟上面的同樣沒有變，注意是開發環境下的配置文件，不是生產環境下的配置文件

 

module.exports = { entry: { //入口
        name: './dist/app.js' //鍵名隨意，值爲項目入口js
 }, output: { //出口
        filename: './bundle.js' //鍵名必須爲filename，值爲項目編譯好的js
 }, watch: true, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test:/\.(jpg|jpeg|png|gif|bmp)$/, loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]' }, { test:/\.(ttf|eot|svg|woff|woff2)$/, loader:'url-loader' }, { test:/\.js$/, loader:'babel-loader', exclude:/node_modules/ } ] } }

webpack.dev.config.js

 

package文件修改

 

package.json配置文件做以下修改：

 

 

"scripts": { "dev": "webpack-dev-server --open --hot --inline --config  ./webpack.dev.config.js", "build": "webpack --config  ./webpack.prod.config.js" },

 

去掉以前用過的bundle

 

其實這一步不用作也能夠，由於不影響，可是爲了和後面要說的原理對應，因此改了文件名

 

把以前bundle文件改成：bundle.backup.js:

 

 

編譯運行

 

如今再用命令 npm run dev啓動編譯

 

 自動打開瀏覽器：

 

修改代碼

 

我如今修改一下文字的顏色，由於背景圖顏色和字體顏色有點不搭配我改爲黑色：

 

 

這邊的watch 發生變化，自動在從新編譯：

 

 

再次打開瀏覽器，根本不用刷新，已經自動運用上css了，完美，這纔是咱們但願的開發環境

 

而此時，項目目錄下根本沒有bundle.js文件：

 

剛纔咱們用的bundle.js文件已經更名了，因此不多是以前咱們生成的bundle文件產生的效果

 

 

這就是webpack-dev-server的特性：

自動監聽編譯，而且生成了一個虛擬的bundle.js文件在內存上，而且在項目的根目錄中虛擬存在

 

 

另外一種寫法

設定熱更新還有另外一種寫法：

 

代碼：

var path = require('path')
var htmlwebpackplugin = require('html-webpack-plugin')
module.exports = {
    entry: { //入口
        name: './dist/app.js' //鍵名隨意，值爲項目入口js
    },
    output: { //出口
        path:path.resolve('./src'),//相對轉絕對，設定一個輸出文件路徑
        filename: './bundle.js' //鍵名必須爲filename，值爲項目編譯好的js
    },
    plugins:[
        new htmlwebpackplugin({
            template:`./index.html` // html文件參照物，即開發環境下的html文件
        })
    ],
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test:/\.(jpg|jpeg|png|gif|bmp)$/,
                loader:'url-loader?limit=20&name=[hash:8]-[name].[ext]'
            },
            {
                test:/\.(ttf|eot|svg|woff|woff2)$/,
                loader:'url-loader'
            },
            {
                test:/\.js$/,
                loader:'babel-loader',
                exclude:/node_modules/
            }
        ]

    }
}

webpack.dev.config.js

 

 

package.json文件直接一個webpack  不用給任何參數：

 

"scripts": {
    "dev": "webpack-dev-server  --config  ./webpack.dev.config.js",
    "build": "webpack --config  ./webpack.prod.config.js"
  },

 

 

npm run dev： 

 自動打開瀏覽器：

可是這種方式相對前面那個更有難度一點，效果同樣的

 

 

代碼打包

以上全部相關代碼打包整合：點我 （由於博客園文件限制最大爲10M，我所有代碼打包已經超過了，因此node_modules文件自行初始化自行安裝第三方插件）

 

 

總結：

 

本節說了不少插件，有點繁瑣，可是基本都是後面會用到的，多看多熟悉