vue--加載模塊詳解


1、postcss-loader、autoprefixer、css-loader 、sass-loader:加載css模塊及css預處理模塊,添加瀏覽器前綴到CSS內容里

加載模塊:npm install postcss-loader autoprefixer css-loader sass-loader -D
在webpack基礎環境配置中添加:
rules: [
{
test: /\.scss/, //css預處理器 后綴名.scss
use: [
'vue-style-loader', //將css以js形式插入HTML中
'css-loader', //專門處理css文件
{
loader: "postcss-loader",
options: {
sourceMap: true, //直接使用前面生成的sourceMap,編譯的效率會快點
}
},
'sass-loader' //專門處理sass文件,轉為css文件,不處理css
]
}
]
在項目根目錄創建 postcss.config.js,並且設置支持哪些瀏覽器,內容如下:
const autoprefixer = require('autoprefixer');
module.exports = {
plugins: [
require('autoprefixer')({
"overrideBrowserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
})
]
}
  • 主流瀏覽器最近2個版本用“last 2 versions”;
  • 全球統計有超過1%的使用率使用“>1%”;
  • 僅新版本用“ff>20”或”ff>=20″

2、webpack、webpack-cli:包管理工具 webpack-cli是webpack 4.0 之后都需要裝的

3、cross-env:不同平台環境變量配置

解決不同平台直接設置環境變量(如window上使用配置環境需要在NODE_ENV=development前加set)而通過cross-env NODE_ENV=development 可以讓我們在不同的平台上執行腳本;

加載模塊:npm install cross-env -D
在package.json中修改以下命令: "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "cross-env NODE_ENV=development webpack --config build/webpack.dev.config.js", "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js" }
cross-env NODE_ENV=development 作用:不同平台上設置區分環境變量(開發與生產)

通過設置 const isDev = process.env.NODE_ENV === 'development' 判斷環境是否為開發或生產環境

當然這里已經在package.json中配置好了不同環境,只要執行不同的命令就能在指定的環境下啟動項目。

4、服務器熱更新啟動模塊加載

webpack-dev-server:webpack服務器的熱更新

(專門用於開發模式)監聽文件的變化、監聽端口號,是否自動打開瀏覽器並自動刷新網頁,做到實時預覽

加載模塊:npm install webpack-dev-server -D
加載模塊好以后,需要在package.json文件中添加一條指令用來啟動webpack-dev-server
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js"
}

5、webpack-merge:使用webpack-merge的包來進行兩個webpack配置之間的合並

在vue中主要是將不同環境下的webpack配置參數與基礎配置參數合並(用優雅的方式提取公共配置部分的代碼),使用方式如下:

加載模塊:npm install webpack-merge -D
// 引入基本webpack基本配置
const baseWebpackConfig = require('./webpack.base.config');
//將基本配置與dev環境配置合並,然后導出
const devWebpackConfig = merge(baseWebpackConfig,{
  module:{}
  devServer:{}
})
module.exports = devWebpackConfig;

6、Babel配置

作用:在webpack 中,默認只能處理 一部分 ES6 的新語法,一些更高級的ES6語法或者 ES7 語法,webpack 是處理不了的;這時候就需要 借助於第三方的 loader,來幫助webpack 處理這些高級的語法,當第三方loader 把 高級語法轉為 低級的語法之后,會把結果交給 webpack 去打包到 bundle.js 中通過Babel,可以幫我們將高級的語法轉換為低級的語法。

 npm install babel-core babel-loader babel-plugin-transform-runtime -D

npm install babel-preset-env babel-preset-stage-2 -D
 npm install babel-plugin-transform-vue-jsx babel-plugin-syntax-jsx babel-helper-vue-jsx-merge-props -D
babel-polyfill 解決不同瀏覽器低版本不兼容問題(主要是IE的兼容)
因為ie9和一些低版本的高級瀏覽器對es6新語法並不支持

npm install  babel-polyfill -D

在main.js及vuex入口文件中最上一行引入:
import 'babel-polyfill'

 

7、copy-webpack-plugin: 將static或XX目錄拷貝到打包之后的dist文件下

加載插件:npm install copy-webpack-plugin -D
const CopyWebpackPlugin = require('copy-webpack-plugin');
//在配置中加入以下內容:
plugins:[
new CopyWebpackPlugin([//復制插件
{
from: path.resolve(__dirname, '../static'),
to: baseconfig.dev.assetsSubDirectory,
ignore: ['.*']//忽略.*的文件
}
])
],

8、generate-asset-webpack-plugin 實現vue打包后生成配置文件用以外部修改公共路徑(專用於生產環境)

第一步:安裝generate-asset-webpack-plugin插件
npm install --save-dev generate-asset-webpack-plugin
第二步:在根目錄下添加serverConfig.json的配置文件,內容如下:
{
"ApiUrl":"http://localhost:8082/",
}
第三步:在build/webpack.prod.config.js文件里引入generate-asset-webpack-plugin
const GeneraterAssetPlugin = require('generate-asset-webpack-plugin')

第四步:引入添加的serverConfig.json文件
const serverConfig = require('../serverConfig.json')
第五步:添加打包時寫入配置文件的代碼
const createServerConfig = function(compilation){
return JSON.stringify(serverConfig);
}
第六步:添加打包時輸出配置文件的代碼
plugins:[
//讓打包的時候輸入可配置的文件
new GenerateAssetPlugin({
filename: 'serverconfig.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
}),
]
第七步:在main.js中添加讀取build之后的代碼(我這里通過axios實現異步調取)
Vue.prototype.getConfigJson = function () {
axios.get('serverConfig.json').then((result)=>{
Vue.prototype.ApiUrl =result.data.ApiUrl;//設置成Vue的全局屬性 ApiUrl:域名接口
new Vue({
router,
store,
render: (h) => h(App)
}).$mount('#root');
}).catch((error)=>{
console.log(error)
})
}
第八步:項目中引用
vue文件中直接引用 this.
ApiUrl


9、html-webpack-plugin:這個插件可以幫助生成 HTML 文件,在 body 元素中,使用 script 來包含所有你的 webpack bundles

npm install html-webpack-plugin --save-dev
// 文件名及時更改,自動打包並且生成響應的文件在index.html里面
const HtmlWebpackPlugin = require('html-webpack-plugin');
//將以下內容放入plugin中
new HtmlWebpackPlugin({
template: path.join(__dirname,'../index.html')
})

10、lockr:幫助你輕松使用localStorage,讓使用本地存儲保存對象、數組、數字、字符串省略很多步驟。

npm install lockr -D

11、mini-css-extract-plugin:將CSS提取出來,單獨作為一個文件。它為每一個包含CSS的JS文件創建一個CSS文件。它支持CSS和資源映射的按需加載

相比較extract-text-webpack-plugin有以下不同:

  • 異步加載
  • 沒有復制編譯(執行效率)
  • 更易於使用
npm install mini-css-extract-plugin -D
const miniCssExtractPlugin=require("mini-css-extract-plugin"); // css單獨提取打包

生產環境中在webpack配置文件中的plugins加入以下內容:

plugins: [
   new miniCssExtractPlugin({filename: 'css/main.[contentHash:8].css'}),
]
添加 publicPath: '../' 是為了解決背景圖片在打包后路徑不對的問題(背景圖片通過css預處理器加載的會將static當成根目錄)
module: {
    rules: [
      {
        test: /\.scss/, //css預處理器 后綴名.scss
        use: [
          {
            loader:miniCssExtractPlugin.loader,
            options:{
              publicPath: '../'
            }
          },
          'css-loader', //專門處理css文件
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true, //直接使用前面生成的sourceMap,編譯的效率會快點
            }
          },
          'sass-loader' //專門處理sass文件,轉為css文件,不處理css
        ]
      }
    ]
  },

12、使用sass:css預處理器需要加載 node-sass、sass-loader、style-loader   --類似的右less、style預處理器(這里用sass)

npm install node-sass sass-loader style-loader -D
  module: {
    rules: [
      {
        test: /\.scss/, //css預處理器 后綴名.scss
        use: [
          'vue-style-loader', //將css以js形式插入HTML中
          'css-loader', //專門處理css文件
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true, //直接使用前面生成的sourceMap,編譯的效率會快點
            }
          },
          'sass-loader' //專門處理sass文件,轉為css文件,不處理css
        ]
      }
    ]
  },
<style lang="scss" scoped>

</style>

13、optimize-css-assets-webpack-plugin:壓縮單獨的css文件

在之前版本中我們使用extract-text-webpack-plugin來提取CSS文件,不過在webpack 4.x中則應該使用mini-css-extract-plugin來提取CSS到單獨文件中

在Webpack 4.x中,新增了optimization的選項來代替之前版本中的webpack.optimize等。在optimization選項中,我們可以進行詳細的設置,以達到分離CSS,分離Chunk,壓縮文件等等操作

npm install optimize-css-assets-webpack-plugin -D
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

在module中添加:

  optimization: {
   //壓縮單獨css文件 minimizer: [
new OptimizeCSSAssetsPlugin({}), ],
   //分離js文件 splitChunks: { chunks:
'all' }, runtimeChunk: true // webpack相關代碼打包到一個文件中,好處:可以規避新的模塊加入的時候,webpack給新的模塊加id后,插入的順序可能在中間,使后面模塊id變化,會導致打包出的hash產生變化,這樣hash就不能進行常緩存 },

 14、qrcodejs2:二維碼生成器

npm install qrcodejs2 -D
在組件中引入:
import QRCode from 'qrcodejs2' // 引入qrcode
<div id="qrcode"></div> <!-- 創建一個div,並設置id為qrcode -->
 mounted () { this.qrcode(); }, methods: { qrcode() { let qrcode = new QRCode('qrcode', { width: 132, height: 132, text: 'https://www.baidu.com', // 二維碼地址 colorDark : "#000", colorLight : "#fff", }) }, }
 

15、rimraf:以包的形式包裝rm -rf命令,用來刪除文件和文件夾的,不管文件夾是否為空,都可刪除(這里用做打包文件的每次打包時刪除)

npm install rimraf -D

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.config.js",
    "clean": "rimraf dist",
    "build:pro": "cross-env NODE_ENV=production webpack --config build/webpack.prod.config.js",
    "build": "npm run clean && npm run build:pro"
  },

16、vue-lazyload:懶加載

npm install vue-lazyload --D
import Vue from 'vue'
import App from '@/App'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1,    //預加載高度的比例
  error: '',  //圖像的src加載失敗
  loading: '', //src的圖像加載
  attempt: 1,  //嘗試計數
  listenEvents: [ 'scroll', 'mousewheel' ] //監聽事件
});

17、vue-template-compiler:將template語法轉為render函數,那么常見的操作如下:

import Vue from 'vue'
import App from './pages/app.vue';

new Vue({
    el:'#root',
    render:h=>h(App)
})

18、vue-wechat-title:動態修改tilte(網頁標題)

npm vue-wechat-title --D

main.js中引入:
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle);

然后在路由配置中添加meta:
meta:{
    title:'首頁',
    requireAuth:true
},

在App.vue文件中使用
<div v-wechat-title="$route.meta.title"><router-view v-wechat-title="$route.meta.title"></router-view>

19、vuex、vuex-persistedstate:使用vuex管理數據,vuex-persistedstate實現數據持久化

加載模塊:
npm install vuex vuex-persistedstate -D 在vuex初始化時候,作為組件引入。 import Vue from 'vue'; import 'babel-polyfill' import Vuex from 'vuex'; import common from './modules/common'; import buy_ticket from './modules/buy_ticket'; import createPersistedState from 'vuex-persistedstate' //使用 vuex-persistedstate 這是一個用於 vuex 在頁面刷新之間處理和存儲狀態的插件。 Vue.use(Vuex); export default () => { return new Vuex.Store({ modules: { common:common, buy_ticket:buy_ticket, }, plugins: [createPersistedState()] }) };

 僅用作個人記錄,有什么建議可以留言


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM