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()] }) };
僅用作個人記錄,有什么建議可以留言