回顾

• 疑问：如果导出的js文件需要以绝对路径展示呢？
  
  
• 疑问：vue项目中运行 npm run serve 打开了一个服务器 localhost:8080,通过它即可访问我们的项目

webpack开发服务器配置

cnpm i webpack-dev-server -g
cnpm i webpack-dev-server -D

在命令行此时即可通过 webpack-dev-server 启动服务器，默认的端口号是8080

• 如果想要修改默认端口，运行成功自动打开默认的浏览器运行，设置服务器代理等等…

配置开发者服务器

webpack转换器

• css、sass 、less、stylus、js高级语法、字体文件…当做模块使用，需要使用到转换器

css文件

• 配置解析器选项

cnpm i style-loader css-loader -D

sass文件

• src/scss/main.scss
  
• 配置解析器选项

cnpm i node-sass sass-loader -D

处理less文件

• src/less/main.less
  
  
• 配置解析器选项

cnpm i less less-loader -D

stylus文件

• src/stylus/main.stylus
  
• 配置解析器选项

cnpm i stylus stylus-loader -D

扫描二维码关注公众号，回复： 10761592 查看本文章

js高级语法

• 有些js的高级语法，留级无法直接解析，使用是需要对它进行转换

cnpm i @babel/core babel-loader -D

如果样式中含有背景图片

cnpm i file-loader url-loader -D

疑问： vue项目中可以省略后缀名，并且 @符号指向src文件目录

• vue
• react

vue 以及react 大量使用es6及其以上的语法，
在项目的根目录下创建文件 .babelrc,安装依赖，配置如下

cnpm i @babel/preset-env -D （js的高级语法）
cnpm i @babel/preset-react -D (开发react)

复制 webpack.config.js 以及 package.json 再加上.babelrc 文件至自己的项目文件，执行安装依赖，自己创建src文件夹 以及public文件夹，src文件加下入口文件为index.js，public文件夹下为index.html

webpack搭建vue项目

cnpm i vue -S
cnpm i vue-template-compiler vue-loader -D

• 添加vue为后缀的处理文件
  
  
  
• src/App.vue
  
• src/index.js
  
• 测试路由

cnpm i vue-router -S

• src/router/index.js
  
• views/Home.vue + Kind.vue + Cart.vue
  
• src/index.js
  
• src/App.vue