這次帶給大家webpack的行動端自動化建置rem方法詳解，webpack行動端自動化建置rem的注意事項有哪些，以下就是實戰案例，一起來看一下。
1 照著舊的影片教學去弄，發現node npm webpack px2rem的各種外掛程式版本都不一樣，根本沒用
# 2 網路上的教學缺斤少倆，不完整，搞得我整了半天搞不定，想想乾脆手動vscode 的cssrem設定算了，但老子還是不服氣，東拼西湊還是整出來了，最後還是研究出了以下方法希望對大家的行動端自動化建置rem有幫助
# 1 安裝vue-cli這個就不多說了，大家都應該會
# 2 安裝和設定px2rem-loader(這裡沒有用postcss試過了很多問題還是決定用這個)
第一步 ：npm install px2rem-loader
# 第二部 : webpack.base.conf.js下加上物件，這裡我用的是sass,用其他的按照下面規律改就行了，相信都看得懂
module.exports={
module: {
rules: [
{
test: /\.(css|less|scss)(\?.*)?$/,
loader: 'style-loader!css-loader!sass-loader!less-loader!postcss-loader'
}
]
}
}第三步： webpack.dev.conf.js下的plugins加入一個東西，大家一定要注意remUnit這個屬性，就是在蘋果5情況下為40px，我這裡定為40，也有人定為80，我這裡40是為了配合hotcss使用下面我會講到
plugins: [
new webpack.LoaderOptionsPlugin({
// webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
vue: {
postcss: [require('postcss-px2rem')({ remUnit: 40, propWhiteList: [] })]
}
}
]第四部 ： 這是多人不知道的，很多人就是差這一步，utils.js下找到const cssLoader加上?importLoaders=1
const cssLoader = {
loader: 'css-loader?importLoaders=1',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}# 到這裡為止安裝就完成了
# 輸入font-size:40px
# 輸出font-size:1rem (在iphone下)
3 我們都知道裝置的像素比不一樣的，所以我們用hotcss來調整裝置的像素比 連結
# 我放在了src/assets/js/裡面大家可依習慣來
# 引入方法，自己定義什麼名字都行，這裡我吧hotcss.js改為了viewport.js
module.exports = {
entry: {
app: './src/main.js',
rem: './src/assets/js/viewport.js'
}
}這樣就大功告成啦
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是webpack的行動端自動化建置rem方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
