webpack-4.x的使用

webpack-4.x

安装

npm i webpack -g: 全局安装webapck

基本使用

不使用配置文件, 通过在命令后传递参数的方式指定配置项. []表示可选参数

webpack默认是以./src/index.js作为入口文件, ./dist/main.js作为出口文件
- 如果你的项目结构和上面一样, 直接运行命令 webpack 进行打包
如果需要指定入口文件和出口文件,使用以下命令行:
- webpack <entry> -o <output>
- webpack [--entry] <入口文件> --output <出口文件>

使用配置文件

当配置项比较多的时候, 直接在命令中加入参数不方便, 所以可以使用一个单独的配置文件, 来存储一些配置项
配置文件默认名称:webpack.config.js
最简单的配置文件

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
      //必须使用绝对路径
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  }
};

打包直接使用命令webpack
如果你的配置文件名称不是webpack.config.js, 那么可以通过命令webpack --config <配置文件>执行打包

`webpack-dev-server`

webpack-dev-server是node平台下的一个工具软件
作用: 相当于一个开发服务器,可以监听文件的改变, 自动进行打包, 并且可以启动一个开发服务器
安装: npm i webpack-dev-server -D, 一般不需要全局安装, 本地安装的工具, 默认不能直接通过命令行来执行
依赖:
- webpack-dev-server依赖webpack, 所以一般还需要在本地安装webpack, 即使全局已经安装过webpack工具
- webapck-dev-server还依赖webpack-cli,所以还必须通过命令 npm i -D webpack-cli 本地安装webpack-cli
注意: 通过webpack-dev-server打包好的bundle.js文件并没有写入磁盘, 而是直接存储在内存中, 目的是提升效率, 因为需要频繁的打包, 磁盘读写速度太慢, 所以可以通过http://localhost:8080/bundle.js访问到
运行:
- 使用配置文件: webpack-dev-server --config webpack.config.js
  - 自定义端口并且自动打开浏览器: webpack-dev-server --config webpack.config.js --port 3000 --open
- 不使用配置文件: webpack-dev-server ./src/main.js -o ./dist/bundle.js --mode development
- --open: 自动打开浏览器, 可以指定打开某一个浏览器, 比如--open Chrome
- --port: 指定端口, 默认为8080
- --mode: 指定开发模式,可选值: production生产环境, development开发环境
- --progress: --progress=true,显示打包进度
- --https: https=true,启用https协议, 一般浏览器会阻止, 因为缺少安全证书

webpack-dev-server通过配置文件指定参数

webpack.config.js

const path = require('path');
// 热更新第二步
const webpack=require('webpack');
module.exports = {
  mode: 'development',          //可选参数`development`开发模式,`production`生产模式
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    // 必须使用绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer:{
    open:true,          //自动打开默认浏览器    
    port:3000,          //指定端口    
    contentBase:'src',  //指定根目录
    hot:true,           //热更新第一步
    progress:true       //显示打包进度
  },
  plugins:[
    // 热更新第三步
    new webpack.HotModuleReplacementPlugin()
  ]
};

package.json

dev脚本是直接指定webpack-dev-server的参数, 推荐使用此种方式
dev1是通过配置文件指定webpack-dev-server的参数, 相对麻烦一点

{
  "name": "wp-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server --config webpack.config.js --port 3000 --open --hot",
    "dev1":"webpack-dev-server --config webpack.config.js",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

html-webpack-plugin

作用:
- 根据我们提供的index.html页面在内存中自动生成html文件
- 将打包好的bundle.js文件自动引入内存中html页面
安装: npm i html-webpack-plugin -D
修改webpack.config.js文件

const path = require('path');
// 引入html-webpack-plugin
const htmlWebpackPlugin=require('html-webpack-plugin');
// 热更新第二步
const webpack=require('webpack');

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer:{
    open:true,          //自动打开浏览器
    port:3000,          //指定端口
    contentBase:'src',  //指定服务器名根目录
    hot:true    //热更新第一步
  },
  plugins:[
    // 热更新第三步
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
        template:path.join(__dirname,'src/index.html'), //模板文件的目录+文件名
        filename:'home.html'     //内存中的文件名
    })
  ]
};

打包css文件

webpack默认只能打包js文件, 打包css文件需要借助第三当的loader加载器
所需loader:style-loader css-loader
安装: npm i style-loader css-loader -D
配置webpack.config.js

module.exports = {
    module:{
        rules:[
        // css打包配置
        {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }
};

main.js中导入style.css: import './css/style.css';

打包less

所需loader: less-loader `
安装loader: npm i less-loader -D
依赖:less, 所以还必须通过npm i less -D安装less
修改配置文件webpack.config.js:

module.exports = {
    module:{
        rules:[
        // css打包配置
        {test:/\.css$/,use:['style-loader','css-loader']},
        // less打包配置  
        {test:'\.less$',use:['style-loader','css-loader','less-loader']}
        ]
    }
}

打包scss

所需loader: sass-loader
安装loader: npm i sass-loader -D
依赖: node-sass, 所以必须通过cnpm i node-sass -D安装node-sass
修改配置文件webpack.config.js

module.exports = {
    module:{
        rules:[
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

打包图片

所需loader: url-loader
安装loader: npm i url-loader -D
依赖: file-loader, 所以必须通过cnpm i file-loader -D安装file-loader
修改配置文件webpack.config.js

module.exports = {
    module:{
        rules:[
            {
                test:/\.(jpg|png|gif|pmb|jpeg)$/,
                use:'url-loader?limit=2048&name=[hash:8]-[name].[ext]'
            }
        ]
    }
}

打包字体文件

所需loader: url-loader
安装loader: npm i url-loader -D
依赖: file-loader, 所以必须通过cnpm i file-loader -D安装file-loader
修改配置文件webpack.config.js

module.exports = {
    module:{
        rules:[
             {
                test:/\.(ttf|eot|svg|woff|woff2|otf)$/, 
                use: 'url-loader'
            }
        ]
    }
}

下载bootstrap

bootstrap-4.x核心包中并不包含字体图标

下载3.x版本: npm i bootstrap@3 -S

babel-7.x

作用: 将部分浏览器不能识别的es6的高级语法转换成浏览器成够解析的js代码
所需loader: babel-loader
安装 loader: npm i babel-loader -D
所需依赖: @babel/core @babel/perset-env @babel/runtime @babel/plugin-transform-runtime
安装依赖:

npm i @babel/core @babel/perset-env @babel/runtime  @babel/plugin-transform-runtime @babel/runtime -D

修改配置文件webpack.config.js

module.exports = {
    module:{
        rules:[
              {
                test:/\.js$/,
                use:'babel-loader',
                exclude:'/node_modules/'   //不需要转换的js文件
              }
        ]
    }
}

创建babel配置文件.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": [
            "@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties","@babel/plugin-transform-classes"
    ]
}

移除webpack打包严格模式

注意:
- babel-7.x的包名叫做@babel/plugin-transform-strict-mode
- babel-6.x的包名叫做babel-plugin-transform-remove-strict-mode
使用babel插件@babel/plugin-transform-strict-mode
- 装包: cnpm i @babel/plugin-transform-strict-mode -D
- 配置babel配置文件.babelrc
```
{
"plugins": ["@babel/plugin-transform-strict-mode"]
}
```
参考文档: @babel/plugin-transform-strict-mode

babel忽略对第三方js转码

修改.babelrc,添加如下配置项

{
    "ignore": [
        "./src/lib/mui/js/*.js"
    ]
}

常见babel插件

@babel/plugin-proposal-class-properties: 解析es6类class中的属性
@babel/plugin-transform-classes: 解析es中的class
@babel/plugin-transform-arrow-functions: 解析es6中的箭头函数
@babel/plugin-transform-block-scoping: 解析es6中的块级作用域

使用webpack构建vue项目

装包

npm i vue -S

安装loader和依赖

npm i vue-loader vue-template-compiler -D

导入

import Vue from 'vue'

默认导入的vue包不是vue.js, 而是vue-runtime.js这个包不能直接使用

解决方案一: import Vue from '../node_modules/vue/dist/vue.js'
解决方案二: 修改webpack.config.js ,添加如下配置

resolve:{
    alias:{
        "vue$":"vue/dist/vue.js"
    }
}

安装`vue-loader`

npm i vue-loader -D
引入VueLoaderPlugin: 修改webpacke配置文件

/* 导入VueLoaderPlugin*/
const {VueLoaderPlugin}=require('vue-loader');
/*在plugin节点加入配置*/
plugins:[
    // 热更新第三步
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
        template:path.join(__dirname,'src/index.html'), //模板文件的目录+文件名
        filename:'index.html'     //内存中的文件名
    }),
    // vue-loader插件
    new VueLoaderPlugin()
]

`main.js`

/* 导入vue核心包vue.js*/
import Vue from 'vue'

/*导入login组件*/
import login from 'login.vue'

var vm=new Vue({
    el:'#app',
    data:{
        msg:'Hello Vue.js'
    },
    /* 调用render方法渲染login组件 */ 
    /* 简写: render:c=>c(login)*/ 
    render(c){
        return c(login);
    }
});

集成`vue-router` 路由组件

装包: npm i vue-router -S
导入: import VueRouter from 'vue-router'
安装: Vue.use(VueRouter)

使用mint-ui

装包: npm i min-ui -S
导包
- 全部导入:
  - 第一步: 导入全部组件 import mint from 'mint-ui'
  - 第二步: 导入样式文件 import 'mint-ui/lib/style.css'
  - 第三步: 注册组件Vue.use(mint)
- 按需导入:
  - 第一步: 导入组件 import {Button} from 'mint-ui'
  - 第二步: 注册组件 Vue.component(Button.name,Button)
  - 配置babel
    - 安装babel-plugin-component插件
    - 修改babel配置文件.babelrc(注意: 此处是babel-7.x的配置文件)
```
{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-classes",
        [
            "component",
            {
                "libraryName": "mint-ui",
                "style": true
            }
        ]
    ]
}
```

使用webpack-dev-server进行跨域请求

修改`webpack.config.js`

devServer:{
    proxy: {
      '/api': {
          target: 'http://www.duans.top/freeApi',
          /*pathRewrite
          如果不加此配置, 最终请求url为http://www.duans.top/freeApi/api/xxx.php;
          可能真实的url地址为:http://www.duans.top/freeApi/xxx.php
          */ 
          pathRewrite: {'^/api' : ''},  
          changeOrigin: true,           // target是域名的话，需要这个参数，
          secure: false                 // false表示可以请求运行在HTTPS协议下的数据接口
      },
     '/api2/':{
         ...
     }

    }
  },

参考文档

官方文档
 第三方文档

附件

最终配置

webpack配置文件`webpack.config.js`

const path = require('path');
// 引入html-webpack-plugin
const htmlWebpackPlugin=require('html-webpack-plugin');
// 热更新第二步
const webpack=require('webpack');

// vue-loader插件
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  mode: 'development',    //production
  entry: path.resolve(__dirname, './src/main.js'),
  // entry:["@babel/polyfill",path.resolve(__dirname, './src/main.js')],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // webpack-dev-server的配置节点
  devServer:{
    open:true,          //自动打开浏览器
    port:3000,          //指定端口
    contentBase:'src',  //指定服务器名根目录
    hot:true,    //热更新第一步
    progress:false,  //显示打包进度
    quiet:false,
    proxy: {
      '/api': {
          target: 'http://www.duans.top/freeApi',
          pathRewrite: {'^/api' : ''},
          changeOrigin: true,     // target是域名的话，需要这个参数，
          secure: false
      }
    }
  },
  plugins:[
    // 热更新第三步
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
        template:path.join(__dirname,'src/index.html'), //模板文件的目录+文件名
        filename:'index.html'     //内存中的文件名
    }),
    // vue-loader插件
    new VueLoaderPlugin()

  ],
  module:{
    rules:[
      // css打包配置
      {test:/\.css$/,use:['style-loader','css-loader']},
      // less配置
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
      //打包scss
      {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
      //打包图片
      {
        test:/\.(png|gif|jpg|jpeg|bmp)$/,
        use:'url-loader?limit=2048U&name=[hash:8]-[name].[ext]'
      },
      //打包字体文件
      {
        test:/\.(ttf|eot|svg|woff|woff2|otf)$/, 
        use: 'url-loader'
      },
      //babel配置
      {
        test:/\.js$/,
        use:'babel-loader',
        exclude:['/node_modules/']   //不需要转换的js文件
      },
      //打包.vue
      {
        test:/\.vue$/,
        use:'vue-loader'
      }
    ]
  },
  resolve:{
    alias:{
      "vue$":"vue/dist/vue.js"
    }
  }
 
};

babel配置文件`.babelrc`

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-classes",
        "@babel/plugin-transform-strict-mode",
        [
            "component",
            {
                "libraryName": "mint-ui",
                "style": true
            }
        ]
    ],
    "ignore":[
        "./src/lib/mui/js/*.js"
    ]
}

package.json

{
  "name": "wp-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server  --contentBase src --open --hot",
    "build": "webpack --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^3.1.1",
    "jquery": "^3.3.1",
    "mint-ui": "^2.2.13",
    "moment": "^2.23.0",
    "popper.js": "^1.14.6",
    "vue": "^2.5.22",
    "vue-preview": "^1.1.3",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.3",
    "@babel/plugin-transform-classes": "^7.2.2",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/plugin-transform-strict-mode": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/runtime": "^7.2.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-component": "^1.1.1",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.5.1",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

常见错误及解决方案

问题一

webpack-cannot-find-module.png

解决方案: 删除node_modules文件夹, 重新运行命令npm i进行装包

问题二

package.json.png

报错原因: package.json文件中写了注释
- .json的文件中是不能书写注释的

问题三

babel-es6-class-property.png

解决方案: 通过npm i @babel/plugin-proposal-class-properties -D安装babel插件

问题四

@babel-runtime.png

报错原因: babel-7.x需要安装@babel-runtime依赖包
解决方案: 通过npm i @babel-runtime -D安装babel插件

问题五

need-loader.png

报错原因: 缺少特殊文件的处理loader
解决方案: 安装并配置对应的loader加载器

问题六

VueLoaderPlugin.png

报错原因: webpack-4.x或者vue-loader^15.5.1需要在配置文件中添加VueLoaderPlugin插件
解决方案: 修改webpack.config.js

/* 第一步 */
const VueLoaderPlugin=require('vue-loader');
/* 第二步: 在plugin配置节点中增加如下配置*/
plugins:[
    new VueLoaderPlugin()
]

问题七

error-port-used.png

报错原因: 端口被占用
解决方案:
- 修改端口
- 关闭占用端口的进程

杂项

导入导出语法

es6中

导入

import:
- import Vue from 'vue'

导出

export default:
- 在一个模块中, 只能使用一次, 只允许向外暴露一次成员;
- 导入时可以使用任意变量来接收
export:
- 按需导出;
- 在一个模块中可以使用多次, 向外暴露多次;
- 导入时需要使用{}来接收, 并且只能使用导出的时候使用的变量名进行接收

查看项目所安装依赖包的具体版本

直接打开package.json文件即可查看

npm查看指定软件包的版本

npm view jquery versions: 查看所有版本
npm view jquery version: 查看已安装的版本
npm jquery info: 查看最新版本

同时安装多个包

使用空格分割:npm style-loadder css-loader -D

删除包

npm un jquery -S

npm脚本

package.json

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "mysql":"mysql -hlocalhost -uroot -proot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  }
}

在package.json文件中的script对象中, 可以自定义一些执行脚本, 通过npm run <自定义脚本名称> 来运行, 从而完成一些系统操作; 比如: 通过npm run mysql连接mysql服务器, 前提是你的操作系统安装了mysql数据库软件, 并且启动了mysql服务

在线文档

webpack

webpack官网

webpack中文文档

wepack-dev-server相关文档

babel

babel-7.x在线文档

babel-7.x官方英文文档

babel-7x常见问题

最后编辑于：2019.01.24 19:39:54

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,271评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,275评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,151评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,550评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,553评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,559评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,924评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,580评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,826评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,578评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,661评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,363评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,940评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,926评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,156评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,872评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,391评论 2赞 342

webpack-4.x的使用

webpack-4.x

安装

基本使用

使用配置文件

webpack-dev-server

webpack-dev-server通过配置文件指定参数

package.json

html-webpack-plugin

打包css文件

打包less

打包scss

打包图片

打包字体文件

下载bootstrap

babel-7.x

移除webpack打包严格模式

babel忽略对第三方js转码

常见babel插件

使用webpack构建vue项目

装包

安装loader和依赖

导入

安装vue-loader

main.js

集成vue-router 路由组件

使用mint-ui

使用webpack-dev-server进行跨域请求

修改webpack.config.js

参考文档

附件

最终配置

webpack配置文件webpack.config.js

babel配置文件.babelrc

package.json

常见错误及解决方案

问题一

问题二

问题三

问题四

问题五

问题六

问题七

杂项

导入导出语法

es6中

导入

导出

查看项目所安装依赖包的具体版本

npm查看指定软件包的版本

同时安装多个包

删除包

npm脚本

在线文档

webpack

webpack官网

webpack中文文档

wepack-dev-server相关文档

babel

babel-7.x在线文档

babel-7.x官方英文文档

babel-7x常见问题

推荐阅读更多精彩内容

`webpack-dev-server`

安装`vue-loader`

`main.js`

集成`vue-router` 路由组件

修改`webpack.config.js`

webpack配置文件`webpack.config.js`

babel配置文件`.babelrc`