造輪子進階--webpack4&vue2

css

npm i css-loader style-loader –save-dev

在webpack.config.js 中增長以下配置：

rules: [{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader'     // 執行順序是從右往左
  ]
}

建立css文件，並引入，打包後能夠正常解析，可是css文件是混入js中，因此須要分離css.

分離css

webpack4中完成這個功能的插件是mini-css-extract-plugin.

npm install mini-css-extract-plugin --save-dev

在webpack.prod.js 中增長以下配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    'css-loader'   // 注意不能有style-loader
               ]
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:  'css/[name].css'
        })
    ]
}

壓縮css

const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");//CSS模塊資源優化插件

optimization:{
    //對生成的CSS文件進行代碼壓縮 mode='production'時生效
    minimizer:[
       new OptimizeCssAssetsPlugin()
    ]
}

postcss-loader

npm i -D postcss postcss-loader autoprefixer

rules: [
  {
    test: /\.scss$/,
    exclude: /node_modules/, //排除node_modules文件夾
    use: [
       'css-loader',
       'postcss-loader'
    ]
  }
]

postcss.config.js的配置較爲簡單：

module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}

處理圖片

新建文件夾src/images，用來放圖片。

file-loader

npm i file-loader --save-dev

{
  test: /\.(png|jpg|gif|svg)$/,
  loader: 'file-loader',
  options: {
    name: '[name].[ext]?[hash]'
  }
}

url-loader

npm i url-loader --save-dev

{
    test:/\.(jpg|png|svg|gif)/,
    use:[{
      loader:'url-loader',
      options:{
        limit:8129,   //小於limit限制的圖片將轉爲base64嵌入引用位置
        fallback:'file-loader', //大於limit限制的將轉交給指定的loader處理
        name: 'img/[name].[hash:7].[ext]'
      }
    }]
  }

區別
file-loader：解決引用路徑的問題，拿background樣式用url引入背景圖來講，咱們都知道，webpack最終會將各個模塊打包成一個文件，所以咱們樣式中的url路徑是相對入口html頁面的，而不是相對於原始css文件所在的路徑的。這就會致使圖片引入失敗。這個問題是用file-loader解決的，file-loader能夠解析項目中的url引入（不只限於css），根據咱們的配置，將圖片拷貝到相應的路徑，再根據咱們的配置，修改打包後文件引用路徑，使之指向正確的文件。

url-loader：若是圖片較多，會發不少http請求，會下降頁面性能。這個問題能夠經過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。至關於把圖片數據翻譯成一串字符。再把這串字符打包到文件中，最終只須要引入這個文件就能訪問圖片了。固然，若是圖片較大，編碼會消耗性能。所以url-loader提供了一個limit參數，小於limit字節的文件會被轉爲DataURl，大於limit的還會使用file-loader進行copy。

url-loader和file-loader是什麼關係呢？簡答地說，url-loader封裝了file-loader。url-loader不依賴於file-loader，即便用url-loader時，只須要安裝url-loader便可，不須要安裝file-loader，由於url-loader內置了file-loader。經過上面的介紹，咱們能夠看到，url-loader工做分兩種狀況：1.文件大小小於limit參數，url-loader將會把文件轉爲DataURL；2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。所以咱們只須要安裝url-loader便可。

擴展---vue中的圖片動態引用

img標籤

<template>
    <img :src="imgUrl">
</template>

第一種：

import imgUrl from "../assets/test.png";

第二種：

data() {
    return {
        imgUrl: require("../assets/test.png")
    }
}

第三種：

created() {
    this.imgUrl = require("@/" + urlTemp);
}

background url

公司項目中有個需求，就是每一個模塊都要展現介紹功能的圖片，切模塊時，圖片要相應的改變，是經過background來實現的，這個時候就須要動態引用圖片。
實現方式以下：

<div :style="{background: 'url(' + require('../assets/' + imgUrl[i]) +')'}"></div>

data() {
    return {
        imgUrl: [
            "test1.png",
            "test2.png",
            "test3.png",
        ]
    }
}

或者直接將圖片放入static文件夾中，也能夠經過循環拿到。

而後，我試驗了一下，除了以上兩種方式，其餘方式寫的都報錯。不知道有沒有大佬指點一下~~
下面的只是記錄一下，跟上面的無關，

<div :style="style"></div>

data() {
    return {
        style: [
            {background: 'url(' + require('../assets/test1.png') +')'}   // 不能寫變量
        ]
    }
}

擴展---vue中的圖片靜態引用

img標籤

1.相對路徑
2."~@/assets/test.png"，其中~至關於require

background url

css中背景圖片路徑問題
在css裏寫background:url(../images/xx.jpg)，若是圖片較大，沒有生成DataURl，會出現路徑錯誤問題，解決方法以下：

// 用了 MiniCssExtractPlugin.loader的話，給他配置單獨的 publicPath
rules: [
    {
        test: /\.css$/,
        use: [
            {
                loader: MiniCssExtractPlugin.loader，
                options:{
                        publicPath: '../'
                }
            },
            'css-loader'   // 注意不能有style-loader
       ]
    }
]

雪碧圖

npm i -D webpack-spritesmith

在webpack.prod.js 中增長以下配置：

const SpritesmithPlugin = require('webpack-spritesmith');

plugins: [
  new SpritesmithPlugin({
    src: {
      cwd: path.resolve(__dirname, '../src/assets/images/icons/'), // 圖標根路徑
      glob: '**/*.png' // 匹配任意 png 圖標
    },
    target: {
      image: path.resolve(__dirname, '../src/assets/css/sprites-generated.png'), // 生成雪碧圖目標路徑與名稱
      css: path.resolve(__dirname, '../src/assets/css/sprites-generated.css')   // 設置生成CSS背景及其定位的文件或方式
      ]
    },
    apiOptions: {
      cssImageRef: "./sprites-generated.png",  // css文件中引用雪碧圖的相對位置路徑配置
    },
  })
]

npm run build，咱們能夠發如今目標目錄下生成了 sprites-generated.png 和 sprites-generated.css 兩個文件，引用sprites-generated.css就能夠了。

處理js文件

參考連接：webpack4.0各個擊破（4）—— Javascript & splitChunk

代碼分離

webpack4廢棄了CommonsChunkPlugin插件，使用optimization.splitChunks和optimization.runtimeChunk來代替。

webpack將會基於如下條件自動分割代碼塊:

• 新的代碼塊被共享或者來自node_modules文件夾
• 新的代碼塊大於30kb(在min+giz以前)
• 按需加載代碼塊的請求數量應該<=5
• 頁面初始化時加載代碼塊的請求數量應該<=3

在webpack.prod.js 中增長以下配置：

optimization: {
    splitChunks: {
        chunks: "async", //默認只做用於異步模塊，爲`all`時對全部模塊生效,`initial`對同步模塊有效
        minSize: 30000,  //合併前模塊文件的體積
        minChunks: 1,  //最少被引用次數
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        name: true,
        cacheGroups: {
            vendors: {
                name: "vendor",
                test: /[\\/]node_modules[\\/]/,
                priority: -10,
                chunks: "all"
            },
        default: {
                name: "common",        
                minChunks: 2,
                priority: -20,
                reuseExistingChunk: true
            }
        }
    }
}