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 [email protected] -g 
           npm i webpack-cli -g
             //安装指定版本好，最新的总是有不可预估的错误
       // 2. 项目安装：npm i [email protected] --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引入的： 
　　　　　　    使用webpack-dev-server工具后：
　　　　　　     而使用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 [email protected] 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 [email protected] -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 [email protected] 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 [email protected] -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 [email protected] -D  //第二个需与下载的vue版本号一样
37         在配置文件中新增loader配置项{test:/\.vue/,use:'vue-loader'}
38         */

 

 1 /* 总结梳理：webpack中使用vue
 2         1.安装vue的包：cnpm i [email protected] -S
 3         2.由于在 webpack 中推荐使用 .vue 这个组件模板定义组件，所有需安装能解析的loader
 4          cnpm i vue-loader@14 [email protected] -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 [email protected] -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">Accountrouter-link>
15             //         <router-link to="/goodlist">Goodslistrouter-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 }

 

 

转载于:https://www.cnblogs.com/Dummer/p/11458593.html