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 }
