webpack cli基本命令

npm install -g @vue/cli

// 1. 基於互動式命令列的方式，建立新版 vue 專案 vue create my-project // 2. 基於圖形化介面的方式，建立新版 vue 專案 vue ui // 3. 基於 2.x 的舊模板，建立舊版 vue 專案 npm install -g @vue/cli-init

vue init webpack my-project

推薦在vue.config.js中單獨配置，不要在package.json中，package.json單獨管理包的。

安裝babel-plugin-contransfor-remove-console（執行環境），移除檔案中的console.*，需要在babel.config.js裡配置

module.exports = 
],//就是這裡配置
'transform-remove-console'
]}

1、生成打包報告

打包時，可以生成報告，生成報告有兩種方式： 1、通過命令列引數的形式生成報告 vue-cli-service build --report

2、通過視覺化ui面板直接檢視報告

2、修改vue.config.js修改webpack的預設配置

在vue-cli-3.0生成的專案中，預設隱藏了webpack的配置項如果需要修改webpack的預設配置需求，需要在專案根目錄中按需建立vue.config.js 基本格式如下： // vue.config.js

module.exports =

3、為開發模式與發布模式指定不同的打包入口

預設情況下，vue專案的開發模式與發布模式，共用同乙個打包的入口檔案(src/main.js) 為了將專案的開發過程與發布過程分離，需要分兩種模式各自指定打包的入口檔案： 1、開發模式的入口檔案為src/main-dev.js

2、發布模式的入口檔案為src/main-prod.js

4、通過chainwebpack自定義打包入口

module.exports = )
// 開發模式
config.when(process.env.node_env === 'development',config=>)
}}

5、通過external載入外部cdn資源

預設情況下，通過import語法匯入的第三方依賴包最終都會被打包合併到同乙個檔案中，從而導致打包成功後某個檔案過大的問題。為了解決以上問題，可以通過webpack的external節點，來配置並載入外部的cdn資源，凡是宣告在externals中的第三方依賴包，都不會被打包。具體**如下： // 第一步 config.set('externals',) //第二步在public/index.html檔案的頭部新增***資源引用：

6、特別注意如果要將element-ui也從cdn引入

首先在externals節點寫上
'element-ui': 'element' 
其次將main.js裡 import '***.element.xx' vue.use(***.element.***)全部移除掉

7、通過設定args定製不同環境的首頁和是否引用cdn

// 在vue.config.js不同環境設定plugin引數
config.plugin('html').tap(args => )
// 在index.html判斷內容
<%= htmlwebpackplugin.options.title %>
// 同理用 <% *** %>判斷是否需要引入cdn資源

8、路由懶載入

1、安裝@babel/plugin-syntax-dynamic-import包
2、在babel.config.js配置檔案中宣告該外掛程式
3、將路由改為按需載入的形式，示例**如下：
// webpackchunkname:分組的意思,會將同一分組的元件打包到同一js種，載入的時候統一載入
const foo1 = () => import( /* webpackchunkname: "group-foo" */ './foo1.vue')
const foo2 = () => import( /* webpackchunkname: "group-foo" */ './foo2.vue')

webpack cli基本命令

mysql基本命令總結 mysql基本命令總結

linux終端基本命令和vi基本命令

DOS命令基本命令

webpack cli基本命令

mysql基本命令總結 mysql基本命令總結

linux終端基本命令和vi基本命令

DOS命令 基本命令

相關推薦

DOS命令基本命令