Electron + Webpack + Vue 搭建開發環境及打包安裝
阿新 • • 發佈：2020-12-17
目錄
- Webpack + Vue 搭建開發環境及打包安裝 ------- 打包渲染程序
- Electron + Webpack 搭建開發環境及打包安裝 ------- 打包主程序
- Electron + Webpack + Vue 搭建開發環境及打包安裝 ---- 打包electron應用
一、渲染程序打包
1. 搭建專案目錄結構
首先專案資料夾下執行 npm init -y 命令生成 package.json 檔案
然後建立相應的資料夾
2. 目錄結構資料夾說明
| - app 專案打包輸出目錄
| - builder webpack構建目錄
| - src 資源目錄
| - assets
| - components
| - App.vue
| - index.js
| - package.json
以上只簡單的書寫一些資料夾目錄，如需要使用其他檔案或目錄可自行新增
3. 書寫配置檔案
/builder/webpack.config.js 新增如下程式碼
1 const path = require('path'); 2 const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 4 module.exports = { 5 // 配置打包模式為開發模式 6 mode: 'development',7 // 打包入口檔案 8 entry: { 9 app: path.join(__dirname, '../src/index.js') 10 }, 11 // 打包出口檔案 12 output: { 13 // 輸出目錄 14 path: path.join(__dirname, '../app/'), 15 // 公共路徑字首 16 publicPath: '/', 17 // 輸出檔名 18 filename: 'js/[name].[contenthash].js',19 }, 20 plugins: [ 21 // 配置HTML頁面模板 22 new HtmlWebpackPlugin({ 23 // 使用模板的路徑 24 template: path.join(__dirname, '../src/index.html'), 25 // 輸出後的檔案路徑 26 filename: './index.html', 27 // 對檔案新增hash值, 防止檔案快取 28 hash: true 29 }) 30 ] 31 }
/builder/dev.js 新增如下程式碼
1 const webpackConfig = require('./webpack.config.js'); 2 const webpack = require('webpack'); 3 const WebpackDevServer = require('webpack-dev-server'); 4 const chalk = require('chalk'); 5 6 7 // 構建開發環境 8 function devRender(){ 9 const compiler = webpack(webpackConfig); 10 new WebpackDevServer(compiler, { 11 contentBase: webpackConfig.output.path, 12 publicPath: webpackConfig.output.publicPath, 13 compress: true, // 開發伺服器啟用gzip壓縮 14 progress: true, // 控制檯顯示打包進度 15 hot: true, // 熱載入 16 open: true, // 自動開啟瀏覽器 17 }).listen(8083, 'localhost', err => { 18 if(err) console.log(err); 19 console.log(chalk.blue('\n Listening at http://localhost:8083 \n')); 20 }) 21 } 22 23 devRender();
/src/index.html 新增如下程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Webpack</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
注意：HTML檔案不能為空檔案，必須要書寫HTML結構，不然無法獲取頁面body元素
/src/index.js 新增如下程式碼
1 document.body.innerHTML = `<h1>hello webpack 5.10</h1>`;
4. 安裝依賴
- chalk
- html-webpack-plugin
- webpack
- webpack-cli
- webpack-dev-server
所用依賴的版本號
對應依賴和對應的版本
注意：如果你使用的是wepack 5+ 版本 而 html-webpack-plugin 是4+版本的話會得到一個如下警告
如果想要去除這個警告資訊可以選擇將 html-webpack-plugin 升級到5.0 預設安裝的是4.5版本，可以使用一下命令安裝 5.0版本 。
npm i [email protected] -D
注意：如果你使用 npm i html-webpack-plugin@next -D安裝最新的版本時，我在寫這篇文章的時候 安裝的版本是5.0.0-alpha.17 在後面和 vue-loader 的外掛一起使用時會報錯，所以後面在網上查詢資料說是bug 將html-webpack-plugin 版本降級到5.0.0-alpha.16 就能夠解決這個問題，當然如果你不將webpack升級的話也是不會有問題的，雖然會有警告資訊但是不會影響正常編譯結果。
5. 新增npm指令
/package.json
"dev": "node ./builder/dev.js"
6. 執行npm命令
在專案資料夾的位址列，輸入cmd 回車即可在此目錄下喚醒命令列視窗
然後在命令列執行命令npm run dev，正常情況執行成功會看到如下結果，如果有報錯則會顯示報錯
執行命令之後如果沒有出現什麼報錯的話，那麼就會自動開啟瀏覽器並且能夠在瀏覽器中看到如下頁面，表示配置webpack配置成功
測試是否能夠熱載入開發，對 /src/index.js 檔案中的程式碼進行修改，檢視瀏覽器中的檢視是否立馬進行改變，如果有改變則配置熱載入成功。
7. 新增loader配置
在之前的配置完成之後，js檔案只支援引入js檔案不支援引入其他檔案，我們需要支援更多的檔案則需要配置webpack 載入對應檔案所需要的loader
/builder/webpack.config.js 紅色部分程式碼為新增程式碼
1 const path = require('path'); 2 const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 const VueLoaderPlugin = require('vue-loader/lib/plugin'); 4 5 module.exports = { 6 // 配置打包模式為開發模式 7 mode: 'development', 8 // 打包入口檔案 9 entry: { 10 app: path.join(__dirname, '../src/index.js') 11 }, 12 // 打包出口檔案 13 output: { 14 // 輸出目錄 15 path: path.join(__dirname, '../app/'), 16 // 公共路徑字首 17 publicPath: '/', 18 // 輸出檔名 19 filename: 'js/[name].[contenthash].js', 20 }, 21 module: { 22 rules: [{ // 新增解析 .vue檔案loader 23 test: /\.vue$/, 24 loader: 'vue-loader' 25 }, { // 新增解析 .css檔案loader 26 test: /\.css(\?.*)?$/, 27 use: [ // loader 順序不能亂 28 'vue-style-loader', 29 'style-loader', 30 'css-loader' 31 ] 32 }] 33 }, 34 plugins: [ 35 // 配置HTML頁面模板 36 new HtmlWebpackPlugin({ 37 // 使用模板的路徑 38 template: path.join(__dirname, '../src/index.html'), 39 // 輸出後的檔案路徑 40 filename: './index.html', 41 // 對檔案新增hash值, 防止檔案快取 42 hash: true 43 }), 44 new VueLoaderPlugin() // vue-loader 載入外掛 45 ] 46 }
/src/index.html 新增如下程式碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Webpack</title> 6 </head> 7 <body> 8 <div id="app"></div> 9 </body> 10 </html>
/src/index.js 新增如下程式碼
1 import Vue from 'vue';
2 import App from './App.vue';
3
4 const app = new Vue({
5 render: h => h(App)
6 }).$mount('#app');
/src/App.vue 新增如下程式碼
1 <template> 2 <h1>{{txt}}</h1> 3 </template> 4 5 <script> 6 export default { 7 data(){ 8 return { 9 txt: 'hello Vue.js' 10 } 11 } 12 } 13 </script> 14 <style scoped> 15 h1 { 16 color: red; 17 } 18 </style>
8. 安裝新增的依賴包
- vue-loader
- css-loader
- vue
- style-loader
- vue-style-loader
- vue-template-compiler
我所安裝的依賴以及依賴的版本號如下圖
安裝完成依賴之後從新在命令列中執行 npm run dev 命令，不出錯誤的話將會在瀏覽器中看到如下效果
9. 配置打包生產環境
新建檔案 /builder/build.js 編寫如下程式碼
1 process.env.NODE_ENV = 'production'; 2 const webpack = require('webpack'); 3 const chalk = require('chalk'); 4 const webpackConfig = require('./webpack.config.js'); 5 6 webpack(webpackConfig).run(err => { 7 if(err) { 8 console.log(chalk.red(err)) 9 } else { 10 console.log("打包完成！！"); 11 } 12 })
/builder/webpack.config.js 新增如下程式碼
1 const path = require('path'); 2 const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 const VueLoaderPlugin = require('vue-loader/lib/plugin'); 4 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 5 const isDevMode = process.env.NODE_ENV === 'development'; 6 7 module.exports = { 8 // 配置打包模式為開發模式 9 mode: isDevMode ? 'development': 'production', 10 // 打包入口檔案 11 entry: { 12 app: path.join(__dirname, '../src/index.js') 13 }, 14 // 打包出口檔案 15 output: { 16 // 輸出目錄 17 path: path.join(__dirname, '../app/'), 18 // 公共路徑字首 19 publicPath: isDevMode ? '/' : '', 20 // 輸出檔名 21 filename: 'js/[name].[contenthash].js' 22 }, 23 module: { 24 rules: [{ // 新增解析 .vue檔案loader 25 test: /\.vue$/, 26 loader: 'vue-loader' 27 }, { // 新增解析 .css檔案loader 28 test: /\.css(\?.*)?$/, 29 use: [ // loader 順序不能亂 30 'vue-style-loader', 31 'style-loader', 32 'css-loader' 33 ] 34 }] 35 }, // 配置 source-map 檔案原始碼對映 36 devtool: isDevMode ? 'cheap-eval-source-map': 'source-map', 37 plugins: [ 38 // 配置HTML頁面模板 39 new HtmlWebpackPlugin({ 40 // 使用模板的路徑 41 template: path.join(__dirname, '../src/index.html'), 42 // 輸出後的檔案路徑 43 filename: './index.html', 44 // 對檔案新增hash值, 防止檔案快取 45 hash: true 46 }), 47 new VueLoaderPlugin(), // vue-loader 載入外掛 48 new CleanWebpackPlugin() // 每次打包前清除打包輸出目錄檔案 49 ] 50 }
/builder/dev.js 新增如下程式碼
1 const webpackConfig = require('./webpack.config.js'); 2 const webpack = require('webpack'); 3 const WebpackDevServer = require('webpack-dev-server'); 4 const chalk = require('chalk'); 5 process.env.NODE_ENV = 'development'; 6 7 8 // 構建開發環境 9 function devRender(){ 10 const compiler = webpack(webpackConfig); 11 new WebpackDevServer(compiler, { 12 contentBase: webpackConfig.output.path, 13 publicPath: webpackConfig.output.publicPath, 14 compress: true, // 開發伺服器啟用gzip壓縮 15 progress: true, // 控制檯顯示打包進度 16 hot: true, // 熱載入 17 open: true, // 自動開啟瀏覽器 18 }).listen(8083, 'localhost', err => { 19 if(err) console.log(err); 20 console.log(chalk.blue('\n Listening at http://localhost:8083 \n')); 21 }) 22 } 23 24 devRender();
/package.json 檔案新增 npm 命令
"build": "node ./builder/build.js"
新增需要安裝的依賴包clean-webpack-plugin
10. 執行生產環境
在命令列工具中執行 npm run build
如果沒有報錯則會在 /app 資料夾下面 看到一個index.html檔案和一個js資料夾，點選其中的HTML檔案在瀏覽器中直接開啟將會看到如下效果
11. 完善及優化打包配置
以上只是完成了一個非常簡單的打包，如果要真正能夠使用還缺少很多loader 以及一些打包模組chunk優化, 下面將對打包進行優化和完善
新增/static 資料夾
新增/src/assets 資料夾
/builder/webpack.config.js 新增如下程式碼
1 const path = require('path'); 2 const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 const VueLoaderPlugin = require('vue-loader/lib/plugin'); 4 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 5 const isDevMode = process.env.NODE_ENV === 'development'; 6 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); 7 const CopyPlugin = require("copy-webpack-plugin"); 8 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 9 const webpack = require('webpack'); 10 11 module.exports = { 12 // 配置打包模式為開發模式 13 mode: isDevMode ? 'development': 'production', 14 // 打包入口檔案 15 entry: { 16 app: path.join(__dirname, '../src/index.js') 17 }, 18 // 打包出口檔案 19 output: { 20 // 輸出目錄 21 path: path.join(__dirname, '../app/'), 22 // 公共路徑字首 23 publicPath: isDevMode ? '/' : '', 24 // 輸出檔名 25 filename: 'js/[name].[contenthash].js', 26 // 配置按需載入檔案 27 chunkFilename: 'js/[name].bundle.js' 28 }, 29 module: { 30 rules: [{ // 新增解析 .vue檔案loader 31 test: /\.vue$/, 32 loader: 'vue-loader' 33 }, { // 新增解析 .css檔案loader 34 test: /\.css(\?.*)?$/, 35 use: [ // loader 順序不能亂 36 'vue-style-loader', 37 'style-loader', 38 'css-loader' 39 ] 40 }, { // 配置sass語法支援，並且使用的是縮排格式 41 test: /\.s[ac]ss$/, 42 use: [ 43 ...( 44 isDevMode 45 ? ['vue-style-loader', 'style-loader'] 46 : [MiniCssExtractPlugin.loader] 47 ), 48 'css-loader', 49 { 50 loader: 'sass-loader', 51 options: { 52 sassOptions: { 53 indentedSyntax: true // 如需使用花括號巢狀模式則設定為false 54 } 55 } 56 } 57 ] 58 }, { // 配置Babel將ES6+ 轉換為ES5 59 test: /\.js(\?.*)?$/, 60 exclude: file => ( // 排除node_modules資料夾 61 /node_modules/.test(file) && 62 !/\.vue\.js/.test(file) 63 ), 64 use: { 65 loader: 'babel-loader', 66 options: { 67 presets: ['@babel/preset-env'], 68 plugins: ['@babel/plugin-transform-runtime'] 69 } 70 } 71 }, { // 配置圖片檔案載入 72 test: /\.(png|jpe?g|gif|tif?f|bmp|webp|svg)(\?.*)?$/, 73 use: { 74 loader: 'url-loader', 75 options: { 76 limit: 10000, 77 esModule: false 78 } 79 } 80 }, { // 配置字型檔案載入 81 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 82 use: { 83 loader: 'file-loader', 84 options: { 85 esModule: false, 86 limit: 10000 87 } 88 } 89 }, { // 處理node檔案 90 test: /\.node$/, 91 loader: 'node-loader' 92 }] 93 }, // 配置 source-map 檔案原始碼對映 94 devtool: isDevMode ? 'cheap-eval-source-map': 'source-map', 95 node: { // 新增node 變數 96 __dirname: isDevMode, 97 __filename: isDevMode 98 }, 99 resolve: { 100 // 引入檔案時可以省略檔案字尾名 101 extensions:['.js','.json','.vue'], 102 // 常用路徑別名 103 alias: { 104 '@': path.join(__dirname, '../src/') 105 } 106 }, 107 plugins: [ 108 // 配置HTML頁面模板 109 new HtmlWebpackPlugin({ 110 // 使用模板的路徑 111 template: path.join(__dirname, '../src/index.html'), 112 // 輸出後的檔案路徑 113 filename: './index.html', 114 // 對檔案新增hash值, 防止檔案快取 115 hash: true 116 }), 117 new VueLoaderPlugin(), // vue-loader 載入外掛 118 new CleanWebpackPlugin(), // 每次打包前清除打包輸出目錄檔案 119 // new BundleAnalyzerPlugin({ analyzerPort: 8888 }), // chunks 分析外掛 120 new webpack.optimize.SplitChunksPlugin({ 121 cacheGroups: { 122 default: { 123 minChunks: 2, 124 priority: -20, 125 reuseExistingChunk: true 126 }, 127 // 打包重複出現的程式碼 128 vendor: { 129 name: 'vendor', 130 chunks: 'initial', 131 minChunks: 2, 132 maxInitialRequests: 5, 133 minSize: 0 134 }, 135 // 打包第三方類庫 136 commons: { 137 name: 'commons', 138 chunks: 'initial', 139 minChunks: Infinity 140 } 141 } 142 }), 143 new MiniCssExtractPlugin({ // css打包成css檔案外掛 144 filename: 'css/[name].css', 145 chunkFilename: 'css/[id].css', 146 }), 147 new CopyPlugin({ // 複製靜態檔案 148 patterns: [{ 149 // 複製專案中所用到的公告檔案 150 from: path.join(__dirname, '../static'), 151 to: path.join(__dirname, '../app/static') 152 }] 153 }), 154 ] 155 }
/src/App.vue 新增如下程式碼 測試webpack是否配置成功
1 <template> 2 <div> 3 <h1>{{txt}}</h1> 4 <div> 5 <img src="@/assets/tuite.png"> 6 </div> 7 <div class="box"></div> 8 </div> 9 </template> 10 11 <script> 12 export default { 13 data(){ 14 return { 15 txt: 'hello Vue.js' 16 } 17 } 18 } 19 </script> 20 21 <style scoped lang="sass"> 22 h1 23 color: red 24 .box 25 width: 300px 26 height: 200px 27 border: solid 1px #000 28 background: url('@/assets/tuite.png') no-repeat center 29 </style>
/src/index.html 新增如下配置 測試webpack是否配置成功
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Webpack</title> 6 <link rel="stylesheet" href="./static/base.css"> 7 </head> 8 <body> 9 <div id="app"></div> 10 </body> 11 </html>
需要下載的模組
- webpack-bundle-analyzer
- copy-webpack-plugin
- mini-css-extract-plugin
- sass-loader
- babel-loader
- @babel/preset-env
- @babel/plugin-transform-runtime
- @babel/core
- url-loader
- file-loader
- node-loader
- node-sass
- core-js
執行命令進行下載
npm i webpack-bundle-analyzer copy-webpack-plugin mini-css-extract-plugin sass-loader babel-loader @babel/preset-env @babel/plugin-transform-runtime url-loader file-loader node-loader@babel/corenode-sasscore-js -D
執行 npm run dev 命令沒有出現報錯將會在瀏覽器看到如下效果