webpack學習筆記（五）--css3加強功能、資源內聯、多頁面打包

時間 2019-11-07

標籤 webpack 學習筆記 css3 css 加強功能資源內聯頁面打包欄目 CSS 简体版

原文原文鏈接

css3加強功能

自動補齊css3前綴

使用 postcss-loadercss

使用後置處理器(代碼生成完成以後更改)autoprefixer插件（根據Can I Use 規則 caniuse.com）html

一、安裝 npm i postcss-loader autoprefixer -D

二、webpack配置 github.com/postcss/aut…

module.exports={
  module:{
    rules:[
      test:/\.css$/,
      use:[
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    ]
  }
}
複製代碼

三、新建postcss.config.js文件

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
複製代碼

}html5

* 四、package.json中添加瀏覽器支持版本的配置
> https://github.com/browserslist/browserslist#readme
```js
 "browserslist": [
  "last 1 version",
  "> 1%",
  "IE 10"
]
複製代碼

五、npm run build

px自動轉換成rem

使用px2rem-loader：對px和rem的轉換；node

頁面渲染時須要知道根元素的font-size值:使用手淘的庫lib-flexiblewebpack

一、安裝css3

a、npm i px2rem-loader -D (開發時使用)git

b、npm i lib-flexible -S （依賴包）es6

二、webpack添加配置github

module.exports = {
  ...
  module:{
    rules:[{
      test:/\.scss$/,
      use:[
        'style-loader',
        'css-loader',
        'sass-loader',
        {
          loader:'px2rem-loader',
          options:{
            remUnit:75,
            remPrecision:8
          }
        }
      ]
    }]
  }
}
複製代碼

三、頁面加載時須要計算根元素的font-size,因此lib-flexible的引用須要前置web

在生成的html中加入lib-flexible的代碼

資源內聯

代碼層面

一、初始化腳本或內聯html

若是存在es6代碼須要增長babel-loader,進行轉換

安裝 npm i raw-loader@0.5.1 -D

${require('...')}讀取出內容，而後進行插入

raw-loader 內聯html ${require('raw-loader!./meta.html')}
raw-loader 內聯js

如:lib-flexible，在頁面加載時，須要嵌入到html中 <script>$(require('raw-loader!babel-loader!./node_modules/lib-flexible'))</script>

二、上報點：js/css的加載中、加載完成

三、css內聯：

如：首屏的樣式內聯入html中，防止頁面閃動

藉助style-loader 的singleton:true//將全部style標籤合併成一個

module.exports = {
  module:{
    rules: [
      {
        test:/\.scss$/,
        use:[
          {
            loader:'style-loader',
            options:{
              insertAt:'top',//樣式插入到<head>
              singleton:true//將全部的style標籤合併成一個
            },
            'css-loader',
            'sass-loader'
          }
        ]
      }
    ]
  }
}
複製代碼

html-inline-css-webpack-plugin

請求層面：減小HTTP網絡請求數

一、小圖片或者字體內聯進頁面（使用url-loader，設置limit）

示例源碼

多頁面打包

須要配置多個entry和多個HtmlWebpackPlugin

文件目錄：

glob: 一、安裝npm i glob -D 二、建立webpackentrys_glob.js文件

const path = require('path')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const glob = require('glob')
  function setMPA(){
    const entryFiles = glob.sync(path.join(__dirname,'../mpa/*/index.js'))
    const entry = {}
    const htmlWebpackPlugins = []
    // console.log(entryFiles)
    entryFiles.forEach(key=>{
      const name = key.replace(/.*\/mpa\/(\w+)\/index\.js$/,'$1')
      entry[name] = key
      htmlWebpackPlugins.push(getHtmlWebpackPlugin(name))
    })
    return {entry,htmlWebpackPlugins}
  }
  function getHtmlWebpackPlugin(name){
    return new HtmlWebpackPlugin({
      template: path.join(__dirname,`../mpa/${name}/index.html`),//模板名
      filename: `${name}.html`,//html文件名
      chunks:[name],//不設置會把全部的entry中js插入html中
      inject: true,//true:[Boolean]默認值，script標籤位於html文件的body底部；body:[String]與true功能同樣；head:[String]，script標籤位於html的head中；false：不插入生成的js文件
      //favicon: 'path/to/my_favicon.ico'
      minify:{//對html文件進行壓縮
        html5: true,
        collapseWhitespace: true,
        preserveLineBreaks: false,
        minifyCSS: true,
        minifyJS: true,
        removeComments: false
      }
    })
  }
  module.exports = {entry,htmlWebpackPlugins} = setMPA()
複製代碼

三、webpack文件中引用

const {entry,htmlWebpackPlugins} = require('./src/util/webpackentrys_glob')
module.exports = {
  entry:entry,
  ...
  plugins:[...].contact(htmlWebpackPlugins)
複製代碼