Vue工程模板檔案 webpack打包

2021-09-28 19:26:34 字數 2889 閱讀 8045

1、github

2、webpack配置

(1)基礎配置webpack.base.config.js

const path = require('path');

//處理共用、通用的js

const webpack = require('webpack');

//css單獨打包

const extracttextplugin = require('extract-text-webpack-plugin');

module.exports =,

output: ,

module: ),

css: extracttextplugin.extract()}}

}]},

//iview資料夾下的js編譯處理

,

//js編譯處理

,

//css處理

) },

//less處理

) },

//處理

,

//實現資源復用]},

resolve:

}};

(2)開發環境配置webpack.dev.config.js

//

處理共用、通用的js

const webpack = require('webpack');

//處理html模板

const htmlwebpackplugin = require('html-webpack-plugin');

//css單獨打包

const extracttextplugin = require('extract-text-webpack-plugin');

//合併配置

const merge = require('webpack-merge');

const webpackbaseconfig = require('./webpack.base.config.js');

//fs模組用於對系統檔案及目錄進行讀寫操作

const fs = require('fs');

//編譯前用node生成乙個env.js的檔案,用來標明當前是開發(development)還是生產環境(production)

fs.open('./src/config/env.js', 'w', function

(err, fd) );

});module.exports =merge(webpackbaseconfig, ,

plugins: [

//css單獨打包

newextracttextplugin(),

//通用模組編譯

newwebpack.optimize.commonschunkplugin(),

newhtmlwebpackplugin()

]});

(3)線上環境配置webpack.prod.config.js

//

處理共用、通用的js

const webpack = require('webpack');

//處理html模板

const htmlwebpackplugin = require('html-webpack-plugin');

//css單獨打包

const extracttextplugin = require('extract-text-webpack-plugin');

//合併配置

const merge = require('webpack-merge');

const webpackbaseconfig = require('./webpack.base.config.js');

//fs模組用於對系統檔案及目錄進行讀寫操作

const fs = require('fs');

//編譯前用node生成乙個env.js的檔案,用來標明當前是開發(development)還是生產環境(production)

fs.open('./src/config/env.js', 'w', function

(err, fd) );

});module.exports =merge(webpackbaseconfig, ,

plugins: [

newextracttextplugin(),

//通用模組編譯

newwebpack.optimize.commonschunkplugin(),

newwebpack.defineplugin(

}),//js壓縮

newwebpack.optimize.uglifyjsplugin(

}),newhtmlwebpackplugin()

]});

(4)package.json檔案

,

"repository": ,

"author": "aresn",

"license": "mit",

"dependencies": ,

"devdependencies": ,

"bugs": ,

"homepage": ""}

(4)babel配置.babelrc檔案

更多專業前端知識,請上

【猿2048】www.mk2048.com

VSCode新建 vue檔案模板

每次新建.vue檔案,可以利用vscode的snippet在.vue檔案建立後能輕鬆地生成一套模板,偷懶促進技術發展,促進社會進步。能用模板一鍵生成,絕對不去多敲一行 哈哈哈。ctrl shift p開啟控制台,輸入snippets 首選項 配置使用者 片段 接下來輸入vue並選擇,vscode會自...

Vue中,常用檔案的模板

目錄 1.webpack.config.js模板 2.main.js 模板 3.router.js 模板 5.index.html 模板 由於 webpack 是基於node進行構建的,所有,webpack的配置檔案中,任何合法的node 都是支援的 var path require path 在記...

vue檔案快速生成頁面模板

1 選單選擇 2 新建全域性 片段 1 新建 test.vue檔案 2 在編輯器輸入 vue,然後回車,自動生成 例如 import 元件名稱 from 元件路徑 export default data 監聽屬性 類似於data概念 computed 監控data中的資料變化 watch 方法集合 ...