webpack小白入門之，postCSS，autoprefixer，CSS px轉rem，靜態資源內聯【1-5】

時間 2019-11-16

標籤 webpack 入門 postcss autoprefixer css rem 靜態資源內聯 1-5 欄目 CSS 简体版

原文原文鏈接

自動清理構建目錄

npm install clean-webpack-plugin -D 避免在每次構建的時候，都須要手動清理dist文件。css

在webpack.dev.js中配置以下：html

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 這個地方注意，可能會報錯必須用解構的方式
複製代碼

plugins下添加以下代碼：new CleanWebpackPlugin()執行npm run build 打包構建html5

自動補全css3前綴，autoprefixer

先安裝插件：npm i postcss-loader autoprefixer -Dnode

在webpack.prod.js的module中配置以下：react

{
    test: /\.less$/,
    use: [
    // 'style-loader',
    MiniCssExtractPlugin.loader, // MiniCssExtractPlugin是將css代碼提取出來，這兩個loader不能同時使用。
    'css-loader',
    'less-loader', // 用於解析less
    {
        loader: 'postcss-loader',
        options: {
          plugins: () => [
            require('autoprefixer')({
              browsers: ['last 2 version', '>1%', 'ios 7 ']
            })
          ]
        }
    }
    ]
},
複製代碼

移動端CSS px自動轉化成rem

安裝插件：npm i px2rem-loader -D 到開發環境中，再直接引用npm i lib-flexible -Swebpack

{
    loader: 'px2rem-loader',
    options: {
        remUnit: 75, // 1rem == 75px
        remPrecision: 8 // 當px轉換爲rem的時候，小數點後面的位數。
    }
}
複製代碼

而後將flexble.js 內聯進咱們的html中！ios

靜態資源內聯

資源內聯的意義：css3

頁面框架的初始化腳本
上報相關打點
css內聯避免頁面閃動

`raw-loader`內聯html

<script>${require('raw-loader!./meta.html')}</script>git

安裝 npm i raw-loader@0.5.1 -Dgithub

`raw-loader`內聯js

<script>${require('raw-loader!babel-loader!../../node_modules/lib-flexible/flexible.js')}</script>

`css內聯`

藉助 style-loader
藉助 html-inline-css-webpack-plugin

配置以下：

// 'style-loader',
{
  loader: 'style-loader',
    options: {
      insertAt: 'top', // 樣式插入到<head>中
      singleton: true // 將全部的style標籤合併成一個
    }
},
複製代碼

多頁面應用（MPA）概念，多頁面打包通用方案

動態獲取entry和設置html-webpack-plugin數量利用global.sync

安裝glob npm i glob -D

在webpack.prod.js文件中配置以下：

const glob = require('glob')
    const setMPA = () => {
    const entry = {}
    const htmlWebpackPlugin = []
    const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'))
    Object.keys(entryFiles).map(index => {
        const entryFile = entryFiles[index]
        const match = entryFile.match(/src\/(.*)\/index\.js/)
        const pageName = match && match[1]
        entry[pageName] = entryFile
        htmlWebpackPlugin.push(
        new HtmlWebpackPlugin({ // 一般一個html頁面用一個HtmlWebpackPlugin，若是有兩那就寫兩個
            template: path.join(__dirname, `src/${pageName}/index.html`), // html模板所在的位置
            filename: `${pageName}.html`, // 指定打包出來的html文件名稱
            chunks: [pageName], // chunk名稱 指定生成的html要使用哪些chunk
            inject: true, // 是否將打包出來的js或者css將自動注入到index.html中
            minify: {
            html5: true,
            collapseWhitespace: true,
            preserveLineBreaks: false,
            minifyCSS: true,
            minifyJS: true,
            removeComments: false
            }
        })
        )
    })
    return {
        entry,
        htmlWebpackPlugin
    }
}
const { entry, htmlWebpackPlugin } = setMPA()
複製代碼

module.exports = {
    entry,
    plugins: [
    new MiniCssExtractPlugin({
        filename: `[name]_[contenthash:8].css`
    }),
    new OptimizeCssAssetsWebpackPlugin({
        assetNameRegExp: /.css$/g,
        cssProcessor: require('cssnano')
    }),
        new CleanWebpackPlugin()
    ].concat(htmlWebpackPlugin)
}    
複製代碼

使用source map

做用：經過source map定位到源代碼，開發環境開啓，線上環境關閉，線上排查問題的時候，能夠將問題上傳到錯誤監控系統

sourcemap 關鍵字

eval 使用eval包裹模塊代碼
sourcemap 產生.map 文件
cheap 不包含列信息（當代碼報錯的時候，只顯示報錯位置所在的行信息）
inline 將.map做爲DataURI嵌入，不單獨成.map文件
module 包含loader的sourcemap

sourcemap類型

devtool	首次構建	二次構建	是否適合生產環境	能夠定位的代碼
(none)	+++	+++	yes	最終輸出的代碼
eval	+++	+++	no	webpack生產的代碼(一個個的模塊)
cheap-eval-source-map	+	++	no	通過loader轉換後的代碼（只能看到行）
cheap-module-source-map	o	++	no	源代碼（只能看到行）
eval-source-map	--	+	no	源代碼
cheap-source-map	+	o	yes	通過loader轉換後的代碼（只能看到行）
cheap-module-source-map	o	-	yes	源代碼（只能看到行）
inline-source-map	+	o	no	通過loader轉換後的代碼（只能看到行）
inline-cheap-module-source-map	o	-	no	源代碼（只能看到行）
source-map	--	--	yes	源代碼
inline-source-map	--	--	no	源代碼
hidden-source-map	--	--	yes	源代碼

提取頁面公共資源

先安裝： npm i html-webpack-externals-plugin -D

新增react的開發環境的CDN：

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
複製代碼

一下是react的線上環境的CDN：

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
複製代碼

在webpack.prod.js中配置線上環境的CDN：

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
複製代碼

plugins中：

new HtmlWebpackExternalsPlugin({
  externals: [
    {
      module: 'react',
      entry: 'https://unpkg.com/react@16/umd/react.production.min.js',
      global: 'React'
    },
    {
      module: 'react-dom',
      entry: 'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
      global: 'ReactDOM'
    }
  ]
})
複製代碼

使用 SplitChunksPlugin分離react和react-dom

optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'vendors', // 提取出來的技術包的名字
          test: /(react | react - dom)/, // 匹配出須要分離的包
          chunks: 'all', 
        }
      }
    }
},
複製代碼

在 new HtmlWebpackPlugin對象參數中加入 chunks: ['vendors', pageName],

使用 SplitChunksPlugin分離頁面公共文件

optimization: {
    splitChunks: {
     minSize: 300, // 分離的包的體積的大小，設置成0kb只要引用了，就會打包，假如爲1000kb
     cacheGroups: {
        commons: {
         name: 'commons', // 提取出來的包的名字，記得在new HtmlWebpackPlugin中加入chunks: ['commons', pageName],
         chunks: 'all', // 將全部引入的庫進行分離;默認是async是將異步引入的庫進行分離;inital是將同步引入的庫進行分離
         minChunks: 2 // 設置最小引用次數爲2次，纔會打包出commons.js文件來
        }
     }
    }
},
複製代碼

在 new HtmlWebpackPlugin對象參數中加入 chunks: ['commons', pageName],