webpack 3/4踩坑，我太難了，從安裝、卸載、到使用，各相應的版本號，sass-loader報錯-版本的緣由，webpack -v 不識別，沒卸載乾淨

 -先說卸載： 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 }