前端工程化（二）---webpack配置
導航html
繼續上一遍的配置，本節主要記錄webpack的配置過程jquery
webpack的基礎知識能夠參照官方文檔：webpack中文官網webpack
一些知識點
目前在個人項目中起到的做用：ios
一、webpack在前端工程打包過程當中起到了什麼做用
聲明入口（entry）：通俗來說，就是項目的構建過程是從哪開始，指定的是一個或多個js文件。前端開發，都是基於es6的模塊化概念的，每個文件均可以認爲是一個模塊，模塊之間使用import語句相互引用，相互協做。這種依賴最終會造成一顆依賴樹，而入口文件就是樹的根。webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。每一個依賴項隨即被處理，最終輸出到**.bundles文件中git
聲明出口（output）：其實就是構建輸出目錄，也就是前端工程化（一）---工程基礎目錄搭建中建立的dist目錄es6
對於非JavaScript文件的處理（loader）：webpack自身只能理解JavaScript，在模塊依賴過程當中，除了.js文件外，對於vue、css等模塊的import是沒法理解的。loader將vue、css、圖片等信息轉化爲webpack能理解的方式，從而完成模塊之間的依賴
插件的應用（plugin）：好比經常使用的HtmlWebpackPlugin插件、ProvidePlugin等，輔助項目的構建
二、webpack-dev-server
相似於tomcat、是前端的web容器。前端工程打包後，就經過它訪問
三、webpack-merge模塊的使用
可使webpack的配置文件擁有相似於繼承的關係。而前端項目的構建是要分環境的，好比開發環境、正式環境。咱們能夠將通用的配置抽取爲common配置，而後讓開發環境與正式環境的配置分別繼承自common，這樣好維護
四、webpack的路徑
在配置entry等須要制定文件位置的元素的時候，須要指定文件所在的路徑。
剛剛接觸webpack的時候，老是被路徑搞糊塗，老是提示找不到文件。
記住一點，必定要利用"__dirname"來配置文件的路徑(注意，是兩個下劃線)。
「__dirname」是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。在webpack的配置文件中使用__dirname，那就表明當前的配置文件所在的路徑
文件路徑=__dirname+相對路徑
具體配置過程
注意：必定要搞清楚本身安裝的webpack版本，不一樣的版本配置是有所不一樣的。好比從webpack2->webpack4這種大版本跳躍，對於loader的配置是有很大的區別的。我當前的webpack版本是4.5.0
前端工程化（一）---工程基礎目錄搭建 中已經介紹瞭如何安裝webpack，下面直接介紹配置的過程
一、新建webpack配置文件
在工程的根目錄下，新建以下文件
webpack.common.js：通用配置。主要是entry、output、loader、插件的配置
webpack.dev.js：開發環境的配置。主要配置devtool、代理等信息
webpack.prod.js：生產環境的配置。
二、安裝項目依賴的模塊
使用cnpm i 模塊名 --save-dev 命令安裝項目的依賴
如下是安裝過程，有幾點須要注意
第40行，提示模塊須要webpack3.1.0的依賴，可是安裝的倒是4.2.0。這說明正式版本的extract-text-webpack-plugin尚未與webpack最新版本同步。這時須要在模塊後面加上版本信息「@next」
第46行，提示沒有找到iview須要依賴的vue模塊。安裝上vue就能夠了
安裝過程要注意警告信息，不然安裝的模塊可能會不生效
1 lichdeMacBook-Pro:test1 lichking2015$ cnpm i babel-loader --save-dev 2 ✔ Installed 1 packages 3 ✔ Linked 10 latest versions 4 ✔ Run 0 scripts 5 Recently updated (since 2018-05-05): 1 packages (detail see file /Users/lichking2015/Documents/remoteFtp/test1/node_modules/.recently_updates.txt) 6 ✔ All packages installed (5 packages installed from npm registry, used 695ms, speed 105.18kB/s, json 11(73.1kB), tarball 0B) 7 lichdeMacBook-Pro:test1 lichking2015$ cnpm i webpack-dev-server --save-dev 8 ✔ Installed 1 packages 9 ✔ Linked 0 latest versions 10 ✔ Run 0 scripts 11 ✔ All packages installed (used 523ms, speed 273.9kB/s, json 1(143.25kB), tarball 0B) 12 lichdeMacBook-Pro:test1 lichking2015$ cnpm i babel-loader babel-core babel-preset-env --save-dev 13 14 ✔ Installed 3 packages 15 ✔ Linked 93 latest versions 16 ✔ Run 0 scripts 17 Recently updated (since 2018-05-05): 4 packages (detail see file /Users/lichking2015/Documents/remoteFtp/test1/node_modules/.recently_updates.txt) 18 ✔ All packages installed (84 packages installed from npm registry, used 3s, speed 643.47kB/s, json 96(1.38MB), tarball 275.95kB) 19 lichdeMacBook-Pro:test1 lichking2015$ cnpm i clean-webpack-plugin --save-dev 20 ✔ Installed 1 packages 21 ✔ Linked 1 latest versions 22 ✔ Run 0 scripts 23 ✔ All packages installed (1 packages installed from npm registry, used 505ms, speed 35.25kB/s, json 2(17.8kB), tarball 0B) 24 lichdeMacBook-Pro:test1 lichking2015$ cnpm i css-loader --save-dev 25 ✔ Installed 1 packages 26 ✔ Linked 106 latest versions 27 ✔ Run 0 scripts 28 Recently updated (since 2018-05-05): 1 packages (detail see file /Users/lichking2015/Documents/remoteFtp/test1/node_modules/.recently_updates.txt) 29 ✔ All packages installed (94 packages installed from npm registry, used 2s, speed 348.87kB/s, json 107(695.29kB), tarball 0B) 30 lichdeMacBook-Pro:test1 lichking2015$ cnpm i express --save-dev 31 ✔ Installed 1 packages 32 ✔ Linked 0 latest versions 33 ✔ Run 0 scripts 34 ✔ All packages installed (used 281ms, speed 90.08kB/s, json 1(25.31kB), tarball 0B) 35 lichdeMacBook-Pro:test1 lichking2015$ cnpm i extract-text-webpack-plugin --save-dev 36 ✔ Installed 1 packages 37 ✔ Linked 12 latest versions 38 ✔ Run 0 scripts 39 40 peerDependencies WARNING extract-text-webpack-plugin@* requires a peer of webpack@^3.1.0 but webpack@4.2.0 was installed 41 ✔ All packages installed (9 packages installed from npm registry, used 1s, speed 247.39kB/s, json 13(261.98kB), tarball 0B) 42 lichdeMacBook-Pro:test1 lichking2015$ cnpm i extract-text-webpack-plugin@next --save-dev 43 ✔ Installed 1 packages 44 ✔ Linked 11 latest versions 45 ✔ Run 0 scripts 46 peerDependencies link ajv@6.5.0 in /Users/lichking2015/Documents/remoteFtp/test1/node_modules/_ajv-keywords@3.2.0@ajv-keywords unmet with /Users/lichking2015/Documents/remote 47 Ftp/test1/node_modules/ajv(5.5.2) 48 Recently updated (since 2018-05-05): 1 packages (detail see file /Users/lichking2015/Documents/remoteFtp/test1/node_modules/.recently_updates.txt) 49 ✔ All packages installed (7 packages installed from npm registry, used 990ms, speed 122.31kB/s, json 12(121.08kB), tarball 0B) 50 lichdeMacBook-Pro:test1 lichking2015$ cnpm i file-loader --save-dev 51 ✔ Installed 1 packages 52 ✔ Linked 2 latest versions 53 ✔ Run 0 scripts 54 ✔ All packages installed (1 packages installed from npm registry, used 427ms, speed 15.47kB/s, json 3(6.61kB), tarball 0B) 55 lichdeMacBook-Pro:test1 lichking2015$ cnpm i html-loader --save-dev 56 ✔ Installed 1 packages 57 ✔ Linked 11 latest versions 58 ✔ Run 0 scripts 59 ✔ All packages installed (6 packages installed from npm registry, used 719ms, speed 216.8kB/s, json 12(155.88kB), tarball 0B) 60 lichdeMacBook-Pro:test1 lichking2015$ cnpm i html-webpack-plugin --save-dev 61 ✔ Installed 1 packages 62 ✔ Linked 0 latest versions 63 ✔ Run 0 scripts 64 ✔ All packages installed (used 261ms, speed 25.2kB/s, json 1(6.58kB), tarball 0B) 65 lichdeMacBook-Pro:test1 lichking2015$ cnpm i iview iview-loader --save-dev 66 ✔ Installed 2 packages 67 68 ✔ Linked 10 latest versions 69 ✔ Run 0 scripts 70 peerDependencies WARNING iview@* requires a peer of vue@^2.5.2 but none was installed 71 ✔ All packages installed (10 packages installed from npm registry, used 2s, speed 1.39MB/s, json 12(340.44kB), tarball 2.24MB) 72 lichdeMacBook-Pro:test1 lichking2015$ cnpm i jquery --save-dev 73 ✔ Installed 1 packages 74 ✔ Linked 0 latest versions 75 ✔ Run 0 scripts 76 ✔ All packages installed (1 packages installed from npm registry, used 409ms, speed 92.41kB/s, json 1(37.79kB), tarball 0B) 77 lichdeMacBook-Pro:test1 lichking2015$ cnpm i less --save-dev 78 ✔ Installed 1 packages 79 ✔ Linked 54 latest versions 80 ✔ Run 0 scripts 81 Recently updated (since 2018-05-05): 1 packages (detail see file /Users/lichking2015/Documents/remoteFtp/test1/node_modules/.recently_updates.txt) 82 ✔ All packages installed (48 packages installed from npm registry, used 2s, speed 499kB/s, json 55(566.14kB), tarball 596.03kB) 83 lichdeMacBook-Pro:test1 lichking2015$ cnpm i less less-loader --save-dev 84 ✔ Installed 2 packages 85 ✔ Linked 3 latest versions 86 ✔ Run 0 scripts 87 ✔ All packages installed (2 packages installed from npm registry, used 587ms, speed 81.06kB/s, json 5(42.13kB), tarball 5.45kB) 88 lichdeMacBook-Pro:test1 lichking2015$ cnpm i style-loader --save-dev 89 ✔ Installed 1 packages 90 ✔ Linked 2 latest versions 91 ✔ Run 0 scripts 92 ✔ All packages installed (1 packages installed from npm registry, used 825ms, speed 63.68kB/s, json 3(40.45kB), tarball 12.08kB) 93 lichdeMacBook-Pro:test1 lichking2015$ cnpm i uglifyjs-webpack-plugin --save-dev 94 ✔ Installed 1 packages 95 ✔ Linked 49 latest versions 96 ✔ Run 0 scripts 97 ✔ All packages installed (36 packages installed from npm registry, used 2s, speed 225.22kB/s, json 50(497.07kB), tarball 0B) 98 lichdeMacBook-Pro:test1 lichking2015$ cnpm i vue vue-loader vue-router vue-template-compiler --save-dev 99 ✔ Installed 4 packages 100 ✔ Linked 21 latest versions 101 ✔ Run 0 scripts 102 Recently updated (since 2018-05-05): 1 packages (detail see file /Users/lichking2015/Documents/remoteFtp/test1/node_modules/.recently_updates.txt) 103 ✔ All packages installed (16 packages installed from npm registry, used 2s, speed 1.13MB/s, json 25(527.25kB), tarball 1.89MB) 104 lichdeMacBook-Pro:test1 lichking2015$ cnpm i wepack-merge --save-dev 105 ✖ Install fail! Error: GET https://registry.npm.taobao.org/wepack-merge response 404 status 106 Error: GET https://registry.npm.taobao.org/wepack-merge response 404 status 107 at get (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/get.js:57:17) 108 at get.next (<anonymous>) 109 at onFulfilled (/usr/local/lib/node_modules/cnpm/node_modules/co/index.js:65:19) 110 at <anonymous> 111 at process._tickCallback (internal/process/next_tick.js:118:7) 112 npminstall version: 3.5.0 113 npminstall args: /usr/local/bin/node /usr/local/lib/node_modules/cnpm/node_modules/npminstall/bin/install.js --fix-bug-versions --china --userconfig=/Users/lichking2015/.cnpm 114 rc --disturl=https://npm.taobao.org/mirrors/node --registry=https://registry.npm.taobao.org wepack-merge --save-dev 115 lichdeMacBook-Pro:test1 lichking2015$ cnpm i webpack-merge --save-dev 116 ✔ Installed 1 packages 117 ✔ Linked 1 latest versions 118 ✔ Run 0 scripts 119 ✔ All packages installed (1 packages installed from npm registry, used 338ms, speed 30.75kB/s, json 2(10.39kB), tarball 0B)
安裝的內容主要包括：各類loader、插件。因爲項目是基於vue、iView開發的，所以也添加了這兩部分的依賴。最後的package.json結果：
{
"name": "syinfo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
"author": "lichking2017",
"license": "ISC",
"devDependencies": {
"axios": "^0.18.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"express": "^4.16.3",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"iview": "^2.12.0",
"iview-loader": "^1.0.0",
"jquery": "^3.3.1",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"style-loader": "^0.20.3",
"uglifyjs-webpack-plugin": "^1.2.4",
"vue": "^2.5.16",
"vue-loader": "^14.2.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.5.0",
"webpack-dev-server": "^3.1.1",
"webpack-merge": "^4.1.2"
}
}
三、配置webpack
webpack.common.js的配置
值得注意的是
第96行的jquery引入方式，Vue雖然不建議相似於Jquery這樣的類庫去直接操做DOM，可是某些場景下，使用JQuery仍是很方便的，好比使用$.extend來擴展對象，通常都是在編寫組件的時候用到
第4~7行是node引入模塊的方式。這種方式可以成功的引入模塊，是依賴於本地的模塊庫，也就是項目根目錄下的node_modules文件夾
1 /* 2 通用配置 3 */ 4 const path = require('path') 5 const HtmlWebpackPlugin = require('html-webpack-plugin') 6 const webpack = require('webpack') 7 const ExtractTextPlugin = require("extract-text-webpack-plugin") 8 module.exports = { 9 entry:{ 10 index:path.join(__dirname,'src/index.js'), 11 login:path.join(__dirname,'src/login.js') 12 }, 13 output: { 14 filename: 'js/[name].bundle.js', 15 path: path.resolve(__dirname, 'dist') 16 }, 17 module:{ 18 rules: [ 19 // 解析vue文件 20 { 21 test:/\.vue$/, 22 use:[ 23 'vue-loader', 24 { 25 loader:'iview-loader', 26 options:{ 27 prefix:false 28 } 29 } 30 ] 31 }, 32 // 使用babel解析js文件，當js文件中包含es6的時候，須要它 33 { 34 test: /\.js$/, 35 exclude: /(node_modules|bower_components)/, 36 use: { 37 loader: 'babel-loader', 38 options: { 39 presets: ['env'] 40 } 41 } 42 }, 43 // 管理樣式資源，使js文件可以引入css模塊 44 // 抽取樣式文件爲單獨的css文件 45 { 46 test:/\.css$/, 47 // use:[ 48 // 'style-loader', 49 // 'css-loader' 50 // ] 51 use: ExtractTextPlugin.extract({ 52 fallback: "style-loader", 53 use: "css-loader" 54 }) 55 }, 56 { 57 test:/\.less$/, 58 use:[ 59 'style-loader', 60 'css-loader', 61 'less-loader' 62 ] 63 }, 64 // 管理圖片文件，使css文件可以對圖片引用 65 { 66 test:/\.(png|svg|jpg|gif)$/, 67 use:[ 68 { 69 loader:'file-loader', 70 options:{ 71 name:'img/[name].[hash:8].[ext]' 72 } 73 } 74 ] 75 }, 76 // 管理字體文件 77 { 78 test:/\.(woff|woff2|eot|ttf|otf)$/, 79 use:[ 80 { 81 loader:'file-loader', 82 options:{ 83 name:'img/[name].[hash:8].[ext]' 84 } 85 } 86 ] 87 } 88 ] 89 }, 90 91 plugins: [ 92 // new HtmlWebpackPlugin({ 93 // title: 'Production' 94 // }), 95 // shimming配置，使jquery可以在全部模塊中使用 96 new webpack.ProvidePlugin({ 97 $:'jquery' 98 }), 99 // 將css樣式文件從js 打包中抽取出來，造成名字叫styles.css的文件 100 new ExtractTextPlugin("[name].css"), 101 new HtmlWebpackPlugin({ 102 // 文件title，若是不使用模板，那麼直接就會顯示在生成的文件中 103 // 若是使用了模板，那麼就要使用表達式<%=htmlWebpackPlugin.options.title%> 104 title:'後臺主頁', 105 //生成目標文件的名字 106 filename:'index.html', 107 //能夠指定生成目錄 108 // filename:'assets/index.html' 109 // 指定模板 110 template:'./src/assets/templates/index.html', 111 // 指定資源引入的script標籤位置 112 inject:'header', 113 // 加入icon圖標 114 favicon:'./src/assets/icons/logo.net.ico', 115 // 壓縮代碼 116 // 具體選項見https://github.com/kangax/html-minifier#options-quick-reference 117 minify:{ 118 // 去除註釋 119 removeComments:false, 120 // 壓縮HTML代碼，變成一行 121 collapseWhitespace:false 122 }, 123 // 在html頁面引入打包後的js和css資源的時候，加上hash碼 124 // hash:true, 125 cache:true, 126 // 在生成html的過程當中，若是出現錯誤，則顯示在html頁面上，默認爲true 127 showErrors:true, 128 chunks:[ 129 'index' 130 ] 131 }), 132 new HtmlWebpackPlugin({ 133 filename:'login.html', 134 title:'歡迎您，請登陸', 135 hash:false, 136 template:'./src/assets/templates/login.html', 137 showErrors:true, 138 chunks:[ 139 'login' 140 ], 141 // 指定資源引入的script標籤位置 142 inject:'header', 143 // 加入icon圖標 144 favicon:'./src/assets/icons/logo.net.ico', 145 // 壓縮代碼 146 // 具體選項見https://github.com/kangax/html-minifier#options-quick-reference 147 minify:{ 148 // 去除註釋 149 removeComments:false, 150 // 壓縮HTML代碼，變成一行 151 collapseWhitespace:false 152 }, 153 }) 154 ], 155 }
webpack.dev.js的配置
值得注意的是
devServer的做用：它是webpack-dev-server的配置項，能夠定義開啓端口等web容器相關的信息。具體的配置信息參見官方文檔
另外就是proxy的配置：它是用來解決跨域問題的。因爲項目是先後端分離的，所以確定會涉及到跨域，配置中的意思就是若是請求是以'/api'開頭的，那麼就要轉發到'http://192.168.0.103:8081'這個地址上，而這個地址正是後端服務器監聽的端口
1 /* 2 開發環境配置 3 */ 4 const merge = require('webpack-merge') 5 const common = require('./webpack.common.js') 6 const webpack = require('webpack') 7 8 9 // const express = require('express') 10 // const app = express() 11 // const appData = require('./src/assets/data/menuData.json') 12 // const userList = require('./src/assets/data/userList.json') 13 // var apiRoutes = express.Router() 14 // app.use('/data', apiRoutes) 15 16 module.exports = merge(common, { 17 // 有助於代碼調試 18 // 開啓後，控制檯會顯示錯誤所在的具體js文件 19 // 生產環境下不要使用 20 devtool: 'inline-source-map', 21 mode: 'development', 22 devServer: { 23 contentBase: './dist', 24 // before(app){ 25 // app.get('/data/menuData',(req,res)=>{ 26 // res.json({ 27 // errno:0, 28 // data:appData 29 // }) 30 // }), 31 // app.get('/data/userList',(req,res)=>{ 32 // res.json({ 33 // errono:0, 34 // data:userList 35 // }) 36 // }) 37 // }, 38 proxy: { 39 '/api': { 40 // target: 'http://192.168.0.111:8080',//設置你調用的接口域名和端口號 別忘了加http 41 // target:'http://192.168.0.101:8081',//集成環境 42 target: 'http://192.168.0.103:8081',//本地環境 43 changeOrigin: true, 44 pathRewrite: { 45 '^/api': ''//這裏理解成用‘/api’代替target裏面的地址，後面組件中咱們掉接口時直接用api代替 好比我要調用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’便可 46 } 47 } 48 }, 49 open: false 50 }, 51 // plugins: [ 52 // new webpack.DefinePlugin({ 53 // 'process.env.NODE_ENV': JSON.stringify('development') 54 // }) 55 // ] 56 });
webpack.prod.js的配置
1 /* 2 生產環境配置 3 */ 4 const merge = require('webpack-merge') 5 const UglifyJSPlugin = require('uglifyjs-webpack-plugin') 6 const common = require('./webpack.common.js') 7 const CleanWebpackPlugin = require('clean-webpack-plugin') 8 // const webpack = require('webpack') 9 module.exports = merge(common, { 10 //關於source-map，官網中的解釋看不明白，之後再說 11 devtool: 'source-map', 12 mode: 'production', 13 plugins: [ 14 new CleanWebpackPlugin(['dist']), 15 new UglifyJSPlugin({ 16 sourceMap: true 17 }), 18 // new CleanWebpackPlugin(['dist']), 19 // new webpack.DefinePlugin({ 20 // 'process.env.NODE_ENV': JSON.stringify('production') 21 // }) 22 ] 23 })
四、項目啓動腳本的配置
修改package.json文件，增長啓動腳本，紅色字體部分
1 { 2 "name": "syinfo", 3 "version": "1.0.0", 4 "description": "管理系統", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1", 8 "start": "webpack-dev-server --config webpack.dev.js", 9 "build": "webpack --config webpack.prod.js" 10 }, 11 "author": "lichking2017", 12 "license": "ISC", 13 "devDependencies": { 14 "axios": "^0.18.0", 15 "babel-core": "^6.26.0", 16 "babel-loader": "^7.1.4", 17 "babel-preset-env": "^1.6.1", 18 "clean-webpack-plugin": "^0.1.19", 19 "css-loader": "^0.28.11", 20 "express": "^4.16.3", 21 "extract-text-webpack-plugin": "^4.0.0-beta.0", 22 "file-loader": "^1.1.11", 23 "html-loader": "^0.5.5", 24 "html-webpack-plugin": "^3.2.0", 25 "iview": "^2.12.0", 26 "iview-loader": "^1.0.0", 27 "jquery": "^3.3.1", 28 "less": "^3.0.1", 29 "less-loader": "^4.1.0", 30 "style-loader": "^0.20.3", 31 "uglifyjs-webpack-plugin": "^1.2.4", 32 "vue": "^2.5.16", 33 "vue-loader": "^14.2.2", 34 "vue-router": "^3.0.1", 35 "vue-template-compiler": "^2.5.16", 36 "webpack": "^4.5.0", 37 "webpack-dev-server": "^3.1.1", 38 "webpack-merge": "^4.1.2" 39 } 40 }
五、啓動
執行以下命令啓動
cnpm run start
如下是我本身的項目的啓動信息：
> webpack-dev-server --config webpack.dev.js ℹ ｢wds｣: Project is running at http://localhost:8080/ ℹ ｢wds｣: webpack output is served from / ℹ ｢wds｣: Content not from webpack is served from ./dist ⚠ ｢wdm｣: Hash: b306468681d3292664db Version: webpack 4.5.0 Time: 5360ms Built at: 2018-5-12 11:10:35 Asset Size Chunks Chunk Names js/login.bundle.js 5.74 MiB login [emitted] login img/ionicons.2c2ae068.eot 118 KiB [emitted] img/ionicons.24712f6c.ttf 184 KiB [emitted] img/ionicons.05acfdb5.woff 66.3 KiB [emitted] img/background.98bc53d2.jpg 1.32 MiB [emitted] js/index.bundle.js 6.23 MiB index [emitted] index img/ionicons.621bd386.svg 326 KiB [emitted] index.css 258 KiB index [emitted] index login.css 258 KiB login [emitted] login logo.net.ico 2.4 KiB [emitted] index.html 438 bytes [emitted] login.html 433 bytes [emitted] Entrypoint index = js/index.bundle.js index.css Entrypoint login = js/login.bundle.js login.css [./node_modules/_webpack-dev-server@3.1.1@webpack-dev-server/client/index.js?http://localhost:8080] ./node_modules/_webpack-dev-server@3.1.1@webpack-dev-server/client?http://localhost:8080 7.75 KiB {login} {index} [built] [./src/assets/styles/common.less] 1.35 KiB {login} [built] [./src/components/common/WolfTotem.js] 1.47 KiB {index} [built] [./src/components/imageUpload/imageUpload.js] 447 bytes {index} [built] [./src/components/layout/layout.js] 403 bytes {index} [built] [./src/components/menu/menuTree.js] 418 bytes {index} [built] [./src/components/modal/modal.js] 405 bytes {index} [built] [./src/components/select/select.js] 413 bytes {index} [built] [./src/components/table/dataTable.js] 437 bytes {index} [built] [./src/index.js] 2.61 KiB {index} [built] [./src/login.js] 780 bytes {login} [built] [./src/login.vue] 2.34 KiB {login} [built] [./src/routes/router.js] 644 bytes {index} [built] [0] multi ./node_modules/_webpack-dev-server@3.1.1@webpack-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {index} [built] [1] multi ./node_modules/_webpack-dev-server@3.1.1@webpack-dev-server/client?http://localhost:8080 ./src/login.js 40 bytes {login} [built] + 122 hidden modules WARNING in ./src/components/menu/menuTree.vue (./node_modules/_vue-loader@14.2.2@vue-loader/lib/template-compiler?{"id":"data-v-79741c26","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/_vue-loader@14.2.2@vue-loader/lib/selector.js?type=template&index=0!./node_modules/_iview-loader@1.0.0@iview-loader??ref--4-1!./src/components/menu/menuTree.vue) (Emitted value instead of an instance of Error) <MenuItem v-for="menu in mu.children">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info. @ ./src/components/menu/menuTree.vue 10:0-443 22:2-16 23:2-27 @ ./src/components/menu/menuTree.js @ ./src/index.js @ multi ./node_modules/_webpack-dev-server@3.1.1@webpack-dev-server/client?http://localhost:8080 ./src/index.js WARNING in ./src/components/menu/menuTree.vue (./node_modules/_vue-loader@14.2.2@vue-loader/lib/template-compiler?{"id":"data-v-79741c26","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/_vue-loader@14.2.2@vue-loader/lib/selector.js?type=template&index=0!./node_modules/_iview-loader@1.0.0@iview-loader??ref--4-1!./src/components/menu/menuTree.vue) (Emitted value instead of an instance of Error) <Submenu v-for="mu in menus">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info. @ ./src/components/menu/menuTree.vue 10:0-443 22:2-16 23:2-27 @ ./src/components/menu/menuTree.js @ ./src/index.js @ multi ./node_modules/_webpack-dev-server@3.1.1@webpack-dev-server/client?http://localhost:8080 ./src/index.js Child extract-text-webpack-plugin node_modules/_extract-text-webpack-plugin@4.0.0-beta.0@extract-text-webpack-plugin/dist node_modules/_css-loader@0.28.11@css-loader/index.js!node_modules/_iview@2.12.0@iview/dist/styles/iview.css: 4 assets Entrypoint undefined = extract-text-webpack-plugin-output-filename [./node_modules/_css-loader@0.28.11@css-loader/index.js!./node_modules/_iview@2.12.0@iview/dist/styles/iview.css] ./node_modules/_css-loader@0.28.11@css-loader!./node_modules/_iview@2.12.0@iview/dist/styles/iview.css 260 KiB {0} [built] [./node_modules/_css-loader@0.28.11@css-loader/lib/css-base.js] 2.21 KiB {0} [built] [./node_modules/_css-loader@0.28.11@css-loader/lib/url/escape.js] 448 bytes {0} [built] [./node_modules/_iview@2.12.0@iview/dist/styles/fonts/ionicons.eot?v=2.0.0] 71 bytes {0} [built] [./node_modules/_iview@2.12.0@iview/dist/styles/fonts/ionicons.svg?v=2.0.0] 71 bytes {0} [built] [./node_modules/_iview@2.12.0@iview/dist/styles/fonts/ionicons.ttf?v=2.0.0] 71 bytes {0} [built] [./node_modules/_iview@2.12.0@iview/dist/styles/fonts/ionicons.woff?v=2.0.0] 72 bytes {0} [built] Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = index.html [./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./src/assets/templates/index.html] 577 bytes {0} [built] [./node_modules/_lodash@4.17.5@lodash/lodash.js] 527 KiB {0} [built] [./node_modules/_webpack@4.5.0@webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built] [./node_modules/_webpack@4.5.0@webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built] Child html-webpack-plugin for "login.html": 1 asset Entrypoint undefined = login.html [./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./src/assets/templates/login.html] 579 bytes {0} [built] [./node_modules/_lodash@4.17.5@lodash/lodash.js] 527 KiB {0} [built] [./node_modules/_webpack@4.5.0@webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built] [./node_modules/_webpack@4.5.0@webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built] ℹ ｢wdm｣: Compiled with warnings.
在瀏覽器中就能夠訪問了（作到一半的東西）
相關文章
- 1. 前端工程化與webpack
- 2. 前端工程化webpack（一）
- 3. 前端工程化：webpack-chain
- 4. 前端工程化(webpack-eslint)
- 5. 前端工程化和webpack
- 6. 前端工程化webpack
- 7. 前端工程化（Gulp、Webpack）-webpack
- 8. 前端工程化（Gulp、Webpack）-前言
- 9. 前端工程化之webpack中配置babel-loader（四）
- 10. 前端工程化 ESlint 配置
- 更多相關文章...
- • Eclipse Debug 配置 - Eclipse 教程
- • Maven 環境配置 - Maven教程
- • IDEA下SpringBoot工程配置文件沒有提示
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
