Javascript - Vue - webpack + vue-cil

cnpm（node package manager）和webpack模块

npm是运行在node.js环境下的包管理工具（先安装node.js，再经过命令

npm install npm -g

安装npm），使用npm能够很快速的安装前端文件里须要依赖的那些项目文件，好比js、css文件等。首先须要经过npm命令在根目录建立一个packg.json配置文件，这个文件定义了你的项目所须要的各类模块，以及项目的名称、版本、许可证等元数据、以json格式配置项目所需的运行和开发环境。cnpm是npm的淘宝镜像，cnpm的指令与npm是彻底同样的，把npm改成cnpm便可。

安装packg.json配置文件

cnpm init -y //在根目录安装packg.json，y表示yes，将略过全部问答，所有采用默认配置。安装成功项目根目录会出现package.json

安装webpack

webpack的做用有两个

1.能够能够将js、css等文件模块打包，会自动分析你的项目结构，找到这些模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏

览器使用。好比js文件并不能引用其余js文件，除非使用ES6的语法import，这种语法如今不少浏览器并不支持，webpack能够对其转换打包成一个能够被浏览器解析的文件。

2.一个html页面上的link、javascript和img等标签老是会默认发起ajax请求向服务器索要html依赖的各类程序文件和图片、字体图标，这会形成页面加载速度不够理想。使用webpack后，由webpack统一管理这些耗时的每次请求，你不须要在每一个html页面上引入那些繁多的程序文件、图片和字体图标，只须要引入同一个文件（装载了js、css等的引用）就能够解决全部引入的问题，这节约了页面加载的耗时。

3.打开命令行工具，不管是在何处打开命令行工具的，你只须要输入安装webpack的命令便可把webpack安装到全局（C:\Users\Andminster\AppData\Roaming\npm目录下）

//先全局安装webpack CLI
cnpm i webpack-cli -g //全局安装表示安装到C:\Users\Andminster\AppData\Roaming\npm\node_modules目录下
cnpm i webpack -g 
//卸载全局的webpack
cnpm uninstall -g webpack //能够用@指定版本号 ,如：cnpm uninstall -g webpack@3

package.json

在你的项目根目录建立package.json文件。这个文件里就是你的项目所须要的各类模块，它配置项目的开发环境。.json的文件里不能写注释，不能使用单引号。

{
    "name": "vue",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",        
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    //简称dep，在运行环境下会用到的配置
    "dependencies": {
        "jquery": "^3.4.1", //运行程序依赖于jquery，因此下载jquery时使用的是cnpm i jquery -S，S就是保存到运行环境
        "webpack-cli": "^3.3.2"
    },
    //简称dev，在生产环境下要用到的配置
    "devDependencies": {
        "webpack": "^4.31.0", //webpack等打包工具只是用来打包的时候用 ，运行发生在打包以后，因此打包工具放在生产环境里

　　//cnpm i webpack -D ，D就是保存到生产环境里。若是不写-S或-D则默认为-D
        "webpack-dev-server": "^3.3.1"
    }
}

指令的四种模式

cnpm i xxxmodule 安装到本地node_modules目录（即你vue项目目录，不是全局的C:\Users\Andminster\AppData\Roaming\npm\node_modules目录）
cnpm i xxxmodule - D 安装到本地目录后注册到package.json的devDependencies（dev）生产环境中，生产环境的程序是用来编译打包的
cnpm i xxxmodule - S 安装到本地目录后注册到package.json的dependencies(dep)运行环境中，运行环境是用来支持运行时的程序的
cnpm i xxxmodule -g  global（全局安装），安装到C:\Users\Andminster\AppData\Roaming\npm，而不是安装到你的项目目录

webpack打包指令

//将入口的main.js包转换为浏览器可识别的出口bundle.js包
webpack .\src\main.js .\dist\bundle.js  
新版命令：webpack .\src\main.js -o .\dist\bundle.js  

webpack手动打包

在vscode中，建立以下目录和文件

打开终端输入cnpm指令

1.cnpm init -y 安装packge.json

2.cnpm i webpack-cli -g 安装全局的webpack CLI

3.cnpm i webpack -g 安装全局的webpack

4.接下来在main.js中输入一段测试代码，打开浏览器测试效果

//在main.js中经过ES6的语法引入jquery包，浏览器不识别ES6的语法格式，因此须要用webpack对此文件进行转换，转换结果在dist/bundle.js里

import $ from "jquery"
$(function() {
    alert("hello");
});

//使用webpack打包main.js
webpack .\src\main.js .\dist\bundle.js，若是你用的最新版本：webpack .\src\main.js -o .\dist\bundle.js

//在index.html中直接引入bundle.js便可
<script src="../dist/bundle.js"></script>

webpack.config.js

如不喜欢每次转换都提供入口和出口文件路径，能够考虑在项目根目录建立一个webpack.config.js文件，将入口和出口路径配置在该文件中。这样，下次打包时只须要输入webpack便可。

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"/src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"/dist"),
        filename:"bundle.js"
    }
}

webpack-dev-server模块（自动打包）

在熟悉了webpack安装及其使用方式后，如今你能够彻底忽略以上的打包方法。如下介绍的方法是终极绝招，请把上面的方法忘掉，自动打包方法能够自动监视你对程序的修改且能够将改动即时反应在浏览器上。也即，你不须要手动写转换打包的指令，连webpack指令也不须要写。具体操做以下

1.cnpm init -y 安装packge.json

2.cnpm i webpack-cli -g 安装全局的webpack CLI

3.cnpm i webpack -g 安装全局的webpack

4.cnpm i webpack-cli -D 安装本地（当前项目）的webpack CLI到生产环境

5.cnpm i webpack -D 安装本地（当前项目）的webpack到生产环境

6. cnpm i webpack-dev-server -D 安装本地的webpack-dev-server到生产环境

7.在package.json文件中的scripts属性中添加一条

{
  "name": "vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",  
  "dependencies": {
    "jquery": "^3.4.1",
    "webpack-cli": "^3.3.2"
  },
  "devDependencies": {
    "webpack": "^4.31.0",
    "webpack-dev-server": "^3.3.1"
  }
}

8.在当前项目的根目录建立webpack.config.js，添加如下代码

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"./src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    }
}

9.在index.html中引入还未打包的bundle.js，这个文件通过webpack-dev-server自动处理后会生成到内存中，而再也不是dist目录

<script src="/bundle.js"></script>

10.执行cnpm run dev（终止cnpm run dev：在命令窗口按ctrl+c），输出如下信息

在浏览器输入http://localhost:8080打开网站点击src目录下的index.html文件查看效果。如今你对项目的js文件改动后，webpack-dev-server会当即做出响应并反映在浏览器上。

托管站点根目录

有两种方式能够托管站点根目录，第一种是经过在package.json的scripts中为dev指定参数来设置托管的根目录，被托管的目录会被当作站点根目录：

"dev": "webpack-dev-server --open"

"dev": "webpack-dev-server --open --port 3000" //自定义端口号

"dev": "webpack-dev-server --open  --contentBase src" //自定义托管的站点根目录，这会致使cnpm run dev时自动打开托管目录下默认的index.html

"dev": "webpack-dev-server --open  --hot" //热重载，每次改动时不会从新生成一个bundle.js，而是将局部修改的代码反映在已经生成过的bundle.js中，这样作会使当你改动js代码后浏览器当即刷新（刷新按钮有反映）才会呈现改动后的结果，使用hot时只有css不会刷新页面

第二种方式是经过在webpack.config.js的devServer中指定参数来设置托管的根目录，被托管的目录会被当作站点根目录

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"./src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    devServer:{
        open:true,
        hot:true,
        port:3000,
        contentBase:"src" //托管的站点根目录设为src而再也不是项目根目录（本例中项目根目录是vue，src在vue下面）
    }
}

引用node_module目录下的程序包

无论你托管的目录是vue（本页面例子中的根目录）仍是托管的vue下面的src目录，在引用经过cnpm指令安装的程序包（jquery、bootstrap等文件）时，jquery、bootstrap自己是在node-module目录，若是你的站点根目录是src，也不用担忧没法引入与src同级别的node-module目录下的文件。也即无论托管哪一个目录，都是使用如下方式引入node-module目录下的包，都会去node-module去找，不用手动写/node-module/bootstrap……

import $ from "jquery" //node-module目录的文件固定这样引用
import "bootstrap/dist/css/bootstrap.css" //node-module目录的文件固定这样引用

css打包

webpack默认值支持js文件的打包，要打包css须要安装专门处理css的loader模块

1.cnpm i style-loader -D 本地安装style-loader模块

2.cnpm i css-loader -D 本地安装css-loader模块

3.在webpack.config.js中注册模块

const path=require("path");

module.exports={
    //webpack打包的入口文件
    entry:path.join(__dirname,"./src/main.js"),
    //webpack打包的出口文件
    output:{
        path:path.join(__dirname,"./dist"),
        filename:"bundle.js"
    },
    devServer:{
        open:true,
        hot:true,
        port:3000,
        contentBase:"src"
    },
    //配置第三方模块的加载器
    module:{
        rules:[
            {test: /\.css$/,use:['style-loader','css-loader'] } //以css结尾的文件用这俩模块进行处理

　　　 //当webpack发现使用inport引入css文件时，它会到配置文件中去查找module-rules里注册的处理程序

　　    //webpack从右向左调用，先调用css-loader再调用style-loader，数组内的项顺序不能改动。           

        ]
    }
}

4.在src目录建立css目录，在css目录建立index.css

#box{
    font-size:150px;
    color:red;
    font-weight:bold;
} 

5.在src目录的main.js文件中添加如下引入css文件的代码

import $ from "jquery" //jquery安装在本地
import "./css/index.css" //其中./表示当前目录，不能直接写css/index.css，不然报错
$(function() {    
    alert("webpack");
});

6.在src目录的index.html中添加以下代码

<div id="box">webpack</div>

最后运行cnpm run dev看效果 

处理css文件中的url

#box3{
    background:  url('/img/1.PNG') ;  
    height:200px;
}

webpack不能处理url地址，这些url地址指向了图片、字体等。这须要安装url-loader来处理，而url-loader又依赖于file-loader

1.cnpm i file-loader -D

2.cnpm i url-loader -D

3. 注意你的webpack托管的是哪个目录，如今假设你的图片路径为：vue/src/img/1.png。那么若是你的托管的根目录是你的项目根目录vue，则你在css文件中的url为：/src/img/1.png。若是你把src设为站点根目录，好比你把在webpack.config.js文件中的devServer属性的contentBase设src为托管目录，而你的项目根目录原本是vue，那么你在css文件中设置的url为：img/1.png

在webpack.config.js注册url-loader

module: {
    rules: [
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        { test: /\.(png | jpg | gif | ttf | jpeg)$/, use: 'url-loader' }
    ]
}

url-loader默认不会把图片生成为base64的编码，但base64编码有利于网络传输，通常状况下应该将小图片转换为base64，大图不适用。可经过配置module的rules来实现自动识别小图并转换

{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader?limit=2742' } <2742字节会被转换，经测试无效，缘由不明

处理字体图标

好比bootstrap、阿里的iconfont等就有不少字体图标，须要设置过滤规则，用url-loader进行处理

{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader' },

打包less

与css是同样的设置方式，先在src-css目录建立index.less文件

#box2{
    p{
        font-size:50px;
        background: "#000";
        color:red;
    }
}

在main.js引入less

import "./css/index.less"

在webpack.config.js注册less-loader

//配置第三方模块的加载器
module:{
    rules:[
        {test: /\.css$/,use:['style-loader','css-loader'] }, 
        {test: /\.less$/,use:['style-loader','css-loader','less-loader']} //以less结尾的文件用这两模块进行处理
    ]
}

cnpm i less -D 本地安装less，less-loader模块依赖于less模块

cnpm i less-loader -D 本地安装less-loader模块

打包sass

第一种方法

npm i -global node-gyp
npm i -global -production windows-build-tools
cnpm i node-sass -D
cnpm i sass-loader -D

其中node-gyp和production windows-build-tools须要用管理员身份运行powershell，因为这两个工具包都是全局安装，因此随便在哪一个位置打开powershell均可以，使用npm安装这两个工具，安装完成后，再shift加右键项目目录打开powershell安装node-sass和sass-loader。若是以前没有安装gyp和windows构建工具致使失败，必定要先卸载sass相关包，再按本方法从新安装。

第二种方法（没试过，不肯定可行与否）

npm i --save node-sass --registry=https: //registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
npm sass-loader -d

配置第三方模块的加载器

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

全局引入scss（vue-cil + webpack适用）

若是你不但愿在.vue组件文件中导入scss（由于每个组件文件可能都须要用到某个全局的scss文件，这样导入会下降效率，并且组件文件也有深度层级，这样每一个组件文件都导入某个全局的scss文件就得琢磨路径问题，超麻烦。但若是你不把某个全局的scss文件导入到当前.vue组件文件中，则没法使用全局scss文件中的变量）。这个问题靠安装sass-resources-loader来解决。注意如下各类支持sass的包须要同时保存到生产环境和运行环境

cnpm i node-sass -S -D
cnpm i sass-loader -S -D
cnpm i style-loader -S -D

cnpm i sass-resources-loader -S -D

打开build/webpack.base.conf.js，添加scss处理程序（loader）

{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
},

打开build/utils.js，找到scss一行

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders('sass'),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
}

替换为

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateLoaders('sass', { indentedSyntax: true }),
  scss: generateLoaders( 'sass' ).concat(
    {
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve( __dirname, '../src/assets/css/global.scss' )
      }
    }
  ),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
}

resources指定了你的全局scss的路径：css/global.scss，你须要在../src/assets目录中建立一个css目录，在css目录建立一个global.scss文件做为全局scss文件

而后在global.scss中定义一个变量

$bgcolor:#ff6a00;

如今你能够在任何一个.vue组件文件中的style标签里加入lang="scss"，接着就可使用全局变量了。

<style scoped lang="scss">

h1, h2 {   

  font-weight: normal;   

  background:$bgcolor;

}

</style>

打包js文件

webpack只支持一些不算过高级的ES6语法，要完整支持ES6高级语法，须要安装babel-loader，有babel-loader是一个js高级语法编译器，它处理以后会自动交给webpack打包到bundle.js

1.cnpm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D 

2.cnpm i babel-preset-env babel-preset-stage-0 -D

注：babel-loader必须是7.1.5，其它版本装了报错。

在webpack.config.js注册babel-loader

module: {
        rules: [          
            { test: /\.js$/, use: 'babel-loader',exclude:/node_modules/ } //exclude设置被babel-loader编译所排除的目录，若是这个目录被转换，耗时很长并且不能成功运行
        ]
 }

在项目根目录（与package.json同级）建立一个.babelrc的json文件（注：文件名起始处带.号，不带json后缀名）用于注册babel-loader所使用的插件和语法

{
    "presets":["env","stage-0"],
    "plugins":["transform-runtime"]
}

在main.js中写测试代码

class Person{
    static personCount=100;
}

alert(Person.personCount);

import时的路径提示工具

安装扩展工具：Path Intellisense后，在设置种打开json配置输入如下红色部分的代码

{
    "editor.renderLineHighlight": "gutter",
    "editor.mouseWheelZoom": true,
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
    }    
}

在项目根目录下建立jsconfig.json，该文件与package.json同级

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

安装vue-cil

vue-cil自带完整的目录结构，先装package.json、再装webpack-cil、webpack，最后安装vue-cil

1.npm install --global vue-cli

2.安装好后，在C:\Users\Andminster\AppData\Roaming\npm下的node_modules目录下会看到vue-cil

3.建立一个目录，shift右键该目录打开命令行工具，输入：vue init webpack 你准备建立的项目名称（不能有大写字母），接下来会弹出一些提示如图所示，一路回车或yes or no以后，vue-cil会自动为你在你建立的目录下面建立一个完整的vue项目目录。

若是是在visual studio中使用vue项目，因为vue-cil已经完整建立了项目结构，因此只须要在vs中：文件-打开-网站，选择你的项目目录便可把项目载入到vs中

 

自动打开网站

打开package.json文件，为webpack-dev-server增长：--open --hot。

运行

一切就绪以后，关掉命令行工具，再shift右击项目目录（是vue-cil自动建立的，不是你手动建立的目录）运行npm run dev，由于安装vue-cil是在项目目录的上级目录开始的，此时不退出你运行vue项目，会提示找不到文件。

cannot get

若是打开网站后提示cannot get，多是没有安装sass处理包，sass安装参考：全局引入scss（vue-cil + webpack适用）

webpack.base.conf.js

此文件就是配置处理各类文件的loader的地方。 默认状况下不须要改动。

关闭浏览器控制台eslint对错误的提示

打开config目录下的index.js，将useEslint设为false 

vue.config.js

这个文件位于与package.json相同的目录，默认没有建立，你能够自行建立，它会在终端运行 vue-cli-service 时，先找到vue.config.js，获取到你的相关配置，才继续执行其它操做，具体配置结构以下，可直接复制粘贴到vue.config.js中。

module.exports = {
  // 部署应用包时的基本 URL
  publicPath: process.env.NODE_ENV === 'production'
    ? '//your_url'
    : '/',

  // 运行 vue-cli-service build 时生成的生产环境构建文件的目录
  // 默认构建前清除文件夹(构建时传入 --no-clean 可关闭该行为
  outputDir: 'dist',

  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: 'static',

  // 指定生成的 index.html 的输出路径 (相对于 outputDir),也能够是一个绝对路径
  indexPath: 'index.html',

  // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
  filenameHashing: true,

  // 当在 multi-page 模式下构建时，webpack 配置会包含不同的插件
  // (这时会存在多个 html-webpack-plugin 和 preload-webpack-plugin 的实例)。
  // 若是你试图修改这些插件的选项，请确认运行 vue inspect
  pages: {
    index: {
      // page 的入口
      entry: 'src/pages/index/index.js',
      // 模板来源
      template: 'src/pages/index/index.html',
      // 在 dist 的输出为 index.html
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签须要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '首页',
      // 在这个页面中包含的块，默认状况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // 当使用只有入口的字符串格式时，
    // 模板会被推导为 `public/subpage.html`
    // 而且若是找不到的话，就回退到 `public/index.html`。
    // 输出文件名会被推导为 `subpage.html`。

    // 多入口时，接着写子页面
    //subpage: 'src/subpage/main.js'
  },

  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,

  // 是否使用包含运行时编译器的Vue核心的构建
  runtimeCompiler: false,

  // 默认状况下 babel-loader 忽略其中的全部文件 node_modules，
  // 想要经过 Babel 显式转译一个依赖，能够在这个选项中列出来
  transpileDependencies: [],

  // 生产环境 sourceMap
  productionSourceMap: false,

  // 跨域设置 
  // 可取值参考： https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_settings_attributes
  crossorigin: undefined,

  // 构建后的文件是部署在 CDN 上的，启用该选项能够提供额外的安全性, 默认false
  integrity: false,

  // webpack 配置，键值对象时会合并配置，为方法时会改写配置
  // https://cli.vuejs.org/guide/webpack.html#simple-configuration
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  //configureWebpack: (config) => {},

  // webpack 连接 API，用于生成和修改 webapck 配置
  // https://github.com/mozilla-neutrino/webpack-chain
  chainWebpack: ( config ) => {
    // 由于是多页面，因此取消 chunks，每一个页面只对应一个单独的 JS / CSS
    config.optimization
      .splitChunks( {
        cacheGroups: {}
      } );

    // 'src/lib' 目录下为外部库文件，不参与 eslint 检测
    config.module
      .rule( 'eslint' )
      .exclude
      .add( '/Users/maybexia/Downloads/FE/community_built-in/src/lib' )
      .end()
  },

  // 配置高于chainWebpack中关于 css loader 的配置
  css: {
    // false 时只有 *.module.[ext] 结尾的文件才会被视做 CSS Modules 模块
    // true 时能够去掉文件名中的 .module， 并将全部的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块
    modules: false,

    // 是否使用 css 分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用 <style> 方式内联至 html 文件中
    // 生产环境下是 true，开发环境下是 false  
    extract: true,

    // 是否构建样式地图，设置为 true 以后可能会影响构建的性能
    sourceMap: false,

    // css预设器配置项
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },

      postcss: {
        // 这里的选项会传递给 postcss-loader
      }
    }
  },

  // 全部 webpack-dev-server 的选项都支持
  // https://webpack.js.org/configuration/dev-server/
  devServer: {
    open: true,

    host: '127.0.0.1',

    port: 3000,

    https: false,

    hotOnly: false,

    // 将任何未知请求 (没有匹配到静态文件的请求) 代理到该字段指向的地方 
    proxy: null,

    before: app => {
    }
  },
  // 构建时开启多进程处理 babel 编译
  // 是否为 Babel 或 TypeScript 使用 thread-loader
  parallel: require( 'os' ).cpus().length > 1,

  // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},

  // 第三方插件配置
  pluginOptions: {}
};

vue.config.js

关于vue-cil其它参考：Vue2全家桶之一：vue-cli（vue脚手架）超详细教程

经常使用指令

cls //清除控制台信息
ctrl + c //终止控制台程序的执行
cnpm info 包名//查看远程包的版本号
vue 包名 -V //查看本地包版本号
cnpm uninstall 包名 //卸载包

其它

*处理工具xxx-loder在webpack1.0版本不须要后缀loader

* 若是项目运行失败的错误是端口号问题，多是端口号被占用，关闭vscode从新打开或打开windows资源管理器，结束进程便可

 

Javascript - 学习总目录