-先說卸載： wabpack@4對應的每個插件的版本號都在最后
1 全局安裝的話，npm uninstall webpack -g 有時候並不能卸載干凈， 2 webpack -v 可判斷是否安裝成功，全局安裝的可以用這個判斷，局部安裝的不能 3 卸載不干凈導致后面安裝其他的都webpack -v識別不了 4 先uninstall，出錯的話， 5 全局的找到安裝的node目錄，下的node_global 下的webpack相關的全刪除 node_global\node_modules 下的 webpack相關的全刪除 6 項目里安裝的，把此項目里的node_modules直接刪除，package.json,package-lock.json刪除 7 后續安裝時，warn找不到package.json，照步驟安裝，npm init -y會弄出來package.json,不用擔心， 8 沒安裝webpack之前不用npm init ,package會出現好多亂七八糟的東西
1 -如果想復制上個項目的環境，可以除node_modules外，全粘貼過去， 2 然后在cmd里跳到此目錄下， 3 cnpm i，即可按照package.json里的各版本號自動下載好， 4 注意：后續接着用cnpm下載，不要用npm下載，我下載就顯示checkPermission no access to... 5 或者 開始時就用npm i，我猜測是這個問題
報錯：
1 報錯：npm下載東西時， 顯示checkPermission no access to...， 2 把項目的node_modules刪除， 3 然后cnpm i,如果還報這個錯誤 4 考慮下是不是一會兒用cnpm和一會兒用npm的原因 5
先全局安裝，再在項目里安裝：
-g為global 全局，-D 是 --save-dev 的簡寫 各個版本號都在最后 // 1.全局安裝： npm i webpack@4.20.2 -g npm i webpack-cli -g //安裝指定版本好，最新的總是有不可預估的錯誤 // 2. 項目安裝：npm i webpack@4.20.2 --save-dev npm i webpack-cli --save-dev // 3. 初始化：npm init -y //會生成package.json // 4. 安裝jQuery：npm i jquery --save 項目目錄： webpack-study目錄下：\dist\bundle.js, \src\css ,\src\js,\src\image \src\main.js ,\src\index.html \webpack-config-js //最開始不用，安裝好webpack之后，webpack -v顯示版本號之后，再建此文件 index.html中引入 script標簽：<script src="../dist/bundle.js"> </script> 測試安裝成功否：webpack -v // 5. 測試打包命令：webpack main.js --output-filename bundle.js --output-pat --mode development //百度的，有錯 // 我也不懂 webpack .\src\main.js .\dist\bundle.js 也出錯， //走下面第6步，直接webpack命令就可以打包，所有此步不管了 // 6.配置webpack.config.js文件的出入口 // const path=require('path') // module.exports={ // mode: 'development', //webpack 4版本必備，3不用 // //需要手動指定 入口 和 出口 // entry: path.join(__dirname,'./src/main.js'), //表示要使用 webpack 打包哪個文件, // output:{ // path: path.join(__dirname,'./dist'), //指定打包好的文件，輸出到哪個目錄中去 // filename:'bundle.js' // } , // } // 7. webpack 命令：直接打包 // 8. 配置webpack-dev-server （優點：可以不用輸入webpack命令，在npm run dev 后，每次修改保存會自動打包）： // - 導入：npm i webpack-dev-server --save-dev // - 配置package.json文件里， //scripts下新增“dev":"webpack-dev-server --open Chrome --contentBase src" // 還可以指定端口號 ：--port 端口號 熱更新 --hot // 以后運行便可以 npm run dev來代替webpack命令來打包 // - 改index.html 里引入的bundle.js文件路徑 使用webpack命令時index.html引入的： <!-- <script src="../dist/bundle.js"> </script> --> 使用webpack-dev-server工具后：<!-- <script src="/bundle.js"></script> --> 而使用html-webpack-plugin插件后，注釋掉此標簽 // 9.使用html-webpack-plugin插件配置啟動頁面 // - 運行npm i html-webpack-plugin --save-dev安裝到開發依賴 // - 修改webpack.config.js配置文件如下： // - 添加如下： // var htmlWebpackPlugin = require('html-webpack-plugin'); // plugins:[ // 添加plugins節點配置插件 // new htmlWebpackPlugin({ // template:path.resolve(__dirname, 'src/index.html'),//模板路徑 // filename:'index.html'//自動生成的HTML文件的名稱 // }), // ], // - 運行 npm run dev // 瀏覽器渲染的index.html頁面里，多生成了一個<script type="text/javascript" src="index.js"></script>標簽 // 將index.html中script標簽注釋掉，因為html-webpack-plugin插件會自動把index.js注入到index.html頁面中
1 // 10.打包css\less\scss 2 // 打包css 3 // 1.運行npm i style-loader css-loader --save-dev 4 // 2.修改webpack.config.js這個配置文件，如下所示module 里的 rules 里 5 // 打包less 6 // 需要npm i less -D安裝less,是less-loader 內部依賴 7 // 1.運行cnpm i less-loader less -D 8 // 2.修改webpack.config.js這個配置文件： 9 // 打包scss - 出錯了，最終發現版本號的原因，改為@7.0.3，默認裝8.0.0 //2019年9月4號 10 // 1.需要npm i node-sass -D安裝node-sass 11 // 2.運行cnpm i sass-loader@7.0.3 sass --save-dev 12 // 3.在webpack.config.js中添加處理sass文件的loader模塊： 13 出錯：install sass之后，.scss文件沒有被識別，報錯，查看sass-loader版本為8.0.0，卸載后重裝了7.0.3可以運行，中途還遇less-loader報錯， 14 之前好的，直接再安裝一次 15 // 在webpack.config.js中添加如下內容： 16 17 // module:{ 18 // rules:[ 19 // {test:/\.css$/,use:['style-loader','css-loader']}, //順序不可亂，從右到左依次 20 // {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, 21 // {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, 22 // ] 23 // } 24 // use表示使用哪些模塊來處理test所匹配到的文件；use中相關loader模塊的調用順序是從后向前調用的 25 // 然后我們在css目錄中，添加3個樣式文件 26 // index.css 27 // li{ 28 // list-style: none; 29 // } 30 31 // index.less 32 // ul{ 33 // padding: 0; 34 // margin: 0; 35 // } 36 37 // index.scss 38 // html,body{ 39 // margin: 0; 40 // padding: 0; 41 // li{ 42 // font-size: 12px; 43 // line-height: 30px; 44 // } 45 // } 46
1 // 11.處理圖片 2 /* cnpm i url-loader file-loader -D 3 index.html里引入圖片路徑 4 配置webpack.config.js里的匹配規則 ： 5 {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:['url-loader?limit=15205&name=[hash:8]-[name].[ext]']} , 6 use里的值如下： 7 1. 'url-loader' 查看網頁源碼后發現，圖片編碼為base 64 , ---審查源碼發現為亂七八糟.jpg 8 9 2. 'url-loader?limit=15206-1' 圖片屬性檢查后大小為15206，參數再小一點時， ---顯示為數字.jpg 10 limit給定的值是圖片大小，單位byte，如果引用的圖片>=limit，則不會被轉為base 64格式的字符串，<limit則會 11 12 3. 'url-loader?limit=15205&name=[name].[ext]' 13 ---審查源碼發現為：夷陵老祖.jpg 14 15 新增一個images2文件夾，放一個同名圖片，css文件里引用后，發現都引用了第二張，然后修改如下，name前新加hash 16 4. 'url-loader?limit=15205&name=[hash:8]-[name].[ext]' 17 ---審查源碼發現為： 209ceef3-夷陵老祖.jpg 27e76ab8-夷陵老祖.jpg，實現對兩個同名不同文件夾下的文件引用 18 */
1 // 12. 處理字體文件的loader --打包失敗 --已解決 2 /* webpack.config.js:{test:/\.{ttf|eot|svg|woff|woff2}$/,use:['url-loader']}, 3 body中引入 --bootstrap官網的圖標 4 <span class="glyphicon glyphicon-heart "aria-hidden="true"></span> 5 安裝bootstrap，cnpm i bootstrap@3.7.0 -s , 6 1.頁面引入 <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"> 7 npm run dev 測試 --打包成功 8 2.注釋掉上面 在main.js里import 'bootstrap/dist/css/bootstrap.css', 9 配置module里 對后綴為.{ttf|eot|svg|woff|woff2}$ 的loader加載，結果出錯，解決不了， 10 最新bootstrap也沒 圖標了，所有不管了 11 3.卸載掉bootstrap 3 安裝bootstrap@4 12 額外導入一個bootstrap4版本的圖標庫 npm i -d open-iconic 13 //注意：必須是 -d ，-D出錯，原因不知 14 // 導入 Bootstrap 樣式： 15 import '../node_modules/bootstrap/dist/css/bootstrap.css' 16 import 'open-iconic/font/css/open-iconic-bootstrap.css' 17 4.配置webpack.config.js: 18 {test: /\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'},//處理字體文件的loader處理 19 // 注意：多了一個.otf的后綴 20 */
1 // 13.配置babel 來轉換高級的es語法 2 /*webpack.config.js: {test:/\.js$/,use:'babel-loader',exclude:/node_modules/ } 3 通過 Babel ，可以將高級的語法轉換為低級的 4 1.在webpack中可以 運行如下兩套 命令，安裝兩套包，去安裝 babel 相關的loader功能 5 1.1第一套包：cnpm i babel-core babel-loader@7.1.4 babel-plugin-tansform-runtime -D 6 1.2第二套包：cnpm i babel-preset-env1 babel-preset-stage-0 -D 7 2.打開 webpack 的配置文件，在mudole節點下的 rules中添加一個新的匹配規則 8 2.1 {test:/\.js$/,use:'babel-loader',exclude:/node_modules/} 9 2.2 注意：在配置babel的loader規則的時候，必須把node_modules目錄，通過exclude選項排除掉， 10 原因一：babel會把node_modules中所有的第三方js文件都打包編譯，這樣非常消耗cpu 11 原因二：項目會無法正常運行 12 3.在項目的根目錄中有一個叫做.babelrc的Babel配置文件，這個配置文件屬於json格式，所以在寫.babelrc配置的時候 13 必須符合json規范：不能寫注釋，字符串必須雙引號 14 3.1 在.bablerc中，寫如下的配置: preset（語法） 15 { 16 "preset":["env","stage-0"], 17 "plugins":["transform-runtime"] 18 } 19 4.了解 目前我們安裝的babel-preset-env ，是比較新的ES語法，之前安裝的babel-preset-es2015 , 20 現在出了一個更新的語法插件，- babel-preset-env它包含了所有的和es***相關的語法 2
1 // 14.如何在webpack構建的項目中進行vue開發 2 /* 在普通網頁中使用vue 3 1.使用script引入vue的包 4 2.在index頁面中創建一個id為app的容器 5 3.new Vue 得到一個vm實例 6 在webpack 中嘗試使用vue 7 cnpm i vue@2.6.0 -D //版本號需與下面的打包loader一致 8 1.導包 在main.js文件里 9 第一種： 10 import Vue from 'vue' 11 還需在webpack配置文件中，新增resolve->alias->"vue$":"vue/dist/vue.js" 12 resolve:{ 13 alias:{ //設置vue被導入時包的路徑 14 "vue$":"vue/dist/vue.js" 15 } 16 } 17 不方便，一般不用 18 因為在 webpack中，使用 import Vue from 'vue'導入的Vue構造器，功能不完整，只提供了runtime-only的方式 19 並沒有提供像網頁中那樣的使用方式 20 第二種,此一個命令就可以 ---推薦 21 import Vue from '../node_modules/vue/dist/vue.js' 22 回顧包的查找規則： 23 1.找 項目根目錄中有沒有node_modules的文件夾 24 2.在node_modules中根據包名，找對應 的Vue文件夾 25 3.在vue文件夾中，找一個叫做package.json的包配置文件 26 4.在package.json文件中查找一個main 屬性[main屬性指定了，這個包在被加載時候的入口文件] 27 1導入login組件 28 src下新建login.vue文件 ->三部分組成：template style script 29 <template> 30 <div> 31 <h1>這是登錄組件，使用.vue文件定義出來的</h1> 32 </div> 33 </template> 34 import login from './login.vue' 35 默認webpack沒法打包.vue文件，需要安裝相關的loader 36 cnpm i vue-loader@14 vue-template-compiler@2.6.0 -D //第二個需與下載的vue版本號一樣 37 在配置文件中新增loader配置項{test:/\.vue/,use:'vue-loader'} 38 */
1 /* 總結梳理：webpack中使用vue 2 1.安裝vue的包：cnpm i vue@2.6.0 -S 3 2.由於在 webpack 中推薦使用 .vue 這個組件模板定義組件，所有需安裝能解析的loader 4 cnpm i vue-loader@14 vue-template_complier@2.6.0 -D 5 3.在main.js中，導入 vue 模塊，import Vue from '../node_modules/vue/dist/vue.js' 6 4.在src下定義一個 .vue 結尾的組件，其中，組件有三部分組成：template style script 7 5.使用 import login組件 from './組件.vue' ,導入此組件 8 6.創建vm實例，var vm =new Vue({el:'#app',render:c=>c(login組件)) 9 7.在頁面中創建一個 id 為App的div元素，作為我們vm要控制的區域 10
1 /*----------render----------- 2 render:function(createElement){ //createElement是一個方法，調用它能夠把指定的組件模板渲染為HTML結構 3 return createElement(login) 4 注意：這里return 的結果，會 替換頁面中的 el 指定的那個容器 5 特點：傳統的組件渲染方式 components 像插值表達式，只是插值，依舊是那個容器 ，傳統的能放多個組件 6 而 render 方法像v-text，替換了容器，只能放一個組件 7 8 } 9 */
1 // 15.export default 和 export 2 /*module.exports={}這是Node中向外暴露成員的形式 3 在node中使用 var 名稱=require('模塊標識符') 4 es6中導入模塊，使用import 模塊名稱 from '模塊標識符' import '標識路徑' 5 在es6中使用 export default 和 export 向外暴露 6 注意：export.default向外暴露的成員，可以使用任意變量來接收 7 注意：在一個模塊中，export default只允許向外暴露一次 8 注意：在一個模塊中，可以同時使用export default 和export 向外暴露成員 9 注意：使用 export 向外暴露的成員，只能使用 {} 的形式來接收，叫做 ----按需導出 10 注意：在一個模塊中，export 可以向外暴露多個，同時，如果某些成員在import時，不需要則可以不在 {} 中定義 11 注意；使用export導出的成員，必須嚴格按照 導出時候的名稱，來使用 {} 按需接收 12 注意；使用export導出的成員，如果要換個名稱，可以使用 as 起別名 13 */
1 // 16.路由 2 /* cnpm i vue-router@3.1.2 -D 3 在main.js里 4 1.導入vue-router 5 import VueRouter from 'vue-router' 6 2.手動安裝vue-router 7 Vue.use(VueRouter) 8 // 導入app組件 9 import app from './app.vue' 10 app.vue: 11 // <template> 12 // <div> 13 // <h3>這是APP組件</h3> 14 // <router-link to="/account">Account</router-link> 15 // <router-link to="/goodlist">Goodslist</router-link> 16 // <router-view></router-view> 17 // </div> 18 // </template> 19 // app組件是通過 vm 實例的render函數渲染出來的， 20 // render函數如果要渲染，渲染出來的組件只能放到 el:'#app'所指定的元素中去 21 // Account和Goodslist組件，是通過路由匹配監聽到，所以這兩個組件只能展示 到屬於 路由 的router-view 中去 22 // 導入Acount組件 23 import account from './main/Account.vue' 24 import goodlist from './main/Goodslist.vue' 25 3.創建路由對象 26 var router =new VueRouter({ 27 routes:[ 28 //account goodlist 29 {path:'/account',component:account}, 30 {path:'/goodslist',component:goodlist} 31 ] 32 }) 33 var vm =new Vue({ 34 el:'#app', 35 render:c=>c(app), //render會將 el 指定容器中所有內容清空覆蓋 36 4.路由對象掛載到vm上 37 router 38 }) 39 */
1 // 17.子路由,children: 2 // 導入Account的兩個子組件 3 // import login from './subcom/login.vue' 4 // import register from './subcom/register.vue' 5 // 加在children屬性里 6 /*var router =new VueRouter({ 7 routes:[ 8 //account goodlist 9 { 10 path:'/account', 11 component:account, 12 children:[ 13 {path:'login',component:login}, 14 {path:'register',component:register} 15 ] 16 }, 17 {path:'/goodslist',component:goodlist} 18 ] 19 })*/
/*scoped屬性： lang屬性 .vue 文件里普通的style標簽只支持普通的樣式，如果想用scss或less需要為style元素設置lang屬性 ， 推薦都為style開啟scoped屬性，如下： <style lang="scss" scoped> */
1 // 18.抽離路由 2 // 新建router.js ： 3 /* 1.導入vue-router 4 import VueRouter from 'vue-router' 5 2剪切 組件 6 import account from './main/Account.vue' 7 import goodlist from './main/Goodslist.vue' 8 import login from './subcom/login.vue' 9 import register from './subcom/register.vue' 10 3.剪切路由對象 11 var router =new VueRouter({ 12 routes:[ 13 //account goodlist 14 { 15 path:'/account', 16 component:account, 17 children:[ 18 {path:'login',component:login}, 19 {path:'register',component:register} 20 ] 21 }, 22 {path:'/goodslist',component:goodlist} 23 ] 24 }) 25 // 26 4.把router暴露出去 27 export default router 28 5.導入 自定義路由模塊 29 main.js里: import router from './router.js' 30 */
1 // 19.Mint-UI 2 // 1）導入所有的MintUI組件 3 /* 導入 MintUi 4 import MintUI from 'mint-ui' 5 // 可以省略node_modules這層目錄 6 import 'mint-ui/lib/style.css' 7 // 將mintui安裝到vue中 8 Vue.use(MintUI) 9 2）按需導入 10 import {Button} from 'mint-ui' 11 // 如果按需導入無樣式效果，需全局導入樣式 12 import 'mint-ui/lib/style.css' 13 // 使用vue.compnent()注冊組件 14 Vue.component(Button.name,Button) 15 // Vue.use(Button) 作用同上 16 */ 17 18 // 20.MUI 19 // 導入MUI - 類似bootstrap的代碼片段 20 // MUI並不能npm 下載，需從github上下載包，解壓出來，手動拷貝到項目中使用 21 // import '../lib/mui/css/mui.css' 22 //
1 package.json 各版本如下，防止出錯，可以直接下載一樣的版本來 2 { 3 "name": "webpack-study", 4 "version": "1.0.0", 5 "main": "webpack.config.js", 6 "dependencies": { 7 "jquery": "^3.4.1", 8 "mint-ui": "^2.2.13", 9 "vue": "^2.6.0", 10 "webpack": "^4.20.2", 11 "webpack-cli": "^3.3.7" 12 }, 13 "devDependencies": { 14 "babel-core": "^6.26.3", 15 "babel-loader": "^7.1.4", 16 "babel-plugin-component": "^1.1.1", 17 "babel-plugin-transform-runtime": "^6.23.0", 18 "babel-preset-env": "^1.7.0", 19 "babel-preset-stage-0": "^6.24.1", 20 "bootstrap": "^4.3.1", 21 "css-loader": "^3.2.0", 22 "fiber": "^1.0.4", 23 "file-loader": "^4.2.0", 24 "html-webpack-plugin": "^3.2.0", 25 "less": "^3.10.3", 26 "less-loader": "^5.0.0", 27 "node-sass": "^4.12.0", 28 "popper.js": "^1.14.7", 29 "sass": "^1.23.0-module.beta.1", 30 "sass-loader": "^7.0.3", 31 "style-loader": "^1.0.0", 32 "url-loader": "^2.1.0", 33 "vue-loader": "^14.2.4", 34 "vue-router": "^3.1.2", 35 "vue-template-compiler": "^2.6.0", 36 "webpack-dev-server": "^3.8.0" 37 }, 38 "scripts": { 39 "test": "echo \"Error: no test specified\" && exit 1", 40 "dev": "webpack-dev-server --open chrome " 41 }, 42 "keywords": [], 43 "author": "", 44 "license": "ISC", 45 "description": "" 46 }