目錄
- 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'); // node 原生模塊 2 const HtmlWebpackPlugin = require('html-webpack-plugin'); // webpack-HTML文件模板處理插件 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頁面模板 插件具體配置參考地址：https://github.com/jantimon/html-webpack-plugin 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 }
新建一個dev.js 文件在 /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, { // webpack-dev-server 詳細配置參考地址：https://www.webpackjs.com/configuration/dev-server/ 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 html-webpack-plugin@5.0.0-alpha.16 -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 詳細配置參考地址： https://vue-loader.vuejs.org/zh/guide/#vue-cli 23 test: /\.vue$/, 24 loader: 'vue-loader' 25 }, { // 添加解析 .css文件loader 配置參考地址： https://vue-loader.vuejs.org/zh/guide/extract-css.html#webpack-4 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. 配置打包生產環境
新建文件build.js 在 /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',
chunkFilename: 'js/[name].bundle.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', // source-map 參考地址： https://juejin.cn/post/6844903450644316174 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() // 每次打包前清除打包輸出目錄文件 插件詳細配置參考地址： https://github.com/johnagan/clean-webpack-plugin 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 分析插件 詳細配置參考地址： https://github.com/webpack-contrib/webpack-bundle-analyzer 120 new webpack.optimize.SplitChunksPlugin({ // 詳細配置參考地址： https://www.webpackjs.com/plugins/split-chunks-plugin/ 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文件插件 詳細配置參考地址：https://github.com/webpack-contrib/mini-css-extract-plugin 144 filename: 'css/[name].css', 145 chunkFilename: 'css/[id].css', 146 }), 147 new CopyPlugin({ // 復制靜態文件 詳細配置參考地址：https://github.com/webpack-contrib/copy-webpack-plugin 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
- clean-webpack-plugin
運行命令進行下載
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/core node-sass core-js clean-webpack-plugin -D
運行 npm run dev 命令沒有出現報錯將會在瀏覽器看到如下效果
總結：
總的來說，剛剛開始寫的時候是遇到了很多的問題，因為使用的是最新版本的webpack 有很多的配置都發生了修改，我剛開始配置還是參考webpack中文網的文檔，發現中文文檔還沒有跟新所以有很多配置都是錯誤的，找了半天也不知道什么原有，不過遇到困難多多查找資料，多多思考多總結，有問題歡迎留言進行討論
最后在這里附上源碼地址 https://github.com/Liting1/webpack5-vue2