欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解从零搭建 vue2 vue-router2 webpack3 工程

程序员文章站 2022-04-09 20:34:11
以新手视角,详细介绍各个步骤内容,不深入讲步骤涉及的原理,主要介绍如何操作。 初始化工程 新建工程目录 vue2practice,在目录下执行npm init -y来创...

以新手视角,详细介绍各个步骤内容,不深入讲步骤涉及的原理,主要介绍如何操作。

初始化工程

新建工程目录 vue2practice,在目录下执行npm init -y来创建一个 package.json,在 package.json 中先添加以下必备模块:

{

 "name": "vue2-vue-router2-webpack3",

 "version": "1.0.0",

 "devdependencies": {

  "vue": "^2.4.2",

  "vue-loader": "^13.0.2",

  "vue-router": "^2.7.0",

  "vue-template-compiler": "^2.4.2",

  "webpack": "^3.4.1",

  "webpack-dev-server": "^2.6.1"

 }

} 

其中 vue-template-compiler 是 vue-loader 的 peerdependencies,npm3 不会自动安装 peerdependencies,然而 vue-template-compiler 又是必备的,那为什么作者不将其放到 dependencies 中呢?有人在 github 上提过这个问题,我大致翻译一下作者的回答(仅供参考):这样做的原因是因为没有可靠的方式来固定嵌套依赖的关系,怎么理解这句话?首先 vue-template-compiler 和 vue 的版本号是一致的(目前是同步更新),将 vue-template-compiler 指定为 vue-loader 的 dependencies 并不能保证 vue-template-compiler 和 vue 的版本号是相同的,让用户自己指定版本才能保证这一点。查看作者的回答(英文) 。如果两者版本不一致,运行时会出现下图所示的错误提示。

详解从零搭建 vue2 vue-router2 webpack3 工程

新建目录结构如下,新增的目录及文件先空着,后面的步骤会说明添加什么内容。

vue2pratice

  |-- package.json

  |-- index.html     // 启动页面

  |-- webpack.config.js // webpack配置文件

  |-- src

    |-- views    // vue页面组件目录

    |-- main.js   // 入口文件

    |-- router.js  // vue-router配置

    |-- app.vue   // 工程首页组件 

配置webpack

webpack 默认读取 webpack.config.js,文件名不能随便改,其中 entry 是必须配置的。

module.exports = {

  entry: './src/main.js',

  output: {

    path: __dirname + '/dist',

    publicpath: '/static/',

    filename: 'build.js'

  }

} 

webpack 2+ 要求output.path必须为绝对路径。

配置 webpack-dev-server,只需在 package.json 添加以下启动命令即可。

"scripts": {

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

} 

webpack-dev-server 2 默认为 inline 模式,热模块替换仍需自己设置。

验证配置

在 index.html 中添加测试代码,引入打包后的 js 文件。

<body>

  hello, webpack 3.

  <br>

  <script src="/static/build.js"></script>

</body> 

在 main.js 中添加测试代码。

// main.js

document.write('来自main.js的问候!') 

执行下面的命令来安装模块并启动服务器。

// 安装依赖

npm install

 

// 运行

npm run dev 

启动后浏览器会自动打开http://localhost:8080,如果控制台没有报错,页面正确显示 main.js 和 index.html 的内容,改动 main.js 后浏览器不刷新能看到效果,则表示配置没问题。

详解从零搭建 vue2 vue-router2 webpack3 工程

vue

新建页面

在 views 目录下新建 index.vue。

<template>

  <div>

    这是{{page}}页面

  </div>

</template>

<script>

export default {

  data: function () {

    return {

      page: 'index'

    }

  }

}

</script> 

webpack 1 需要特定的 loader 来转换 es 2015 import/export,webpack 2 起可以开箱即用。但是 es6 的新语法还是需要 loader 来转换,在没有配置前,先不要用新语法。用了也没报错(比如 let,const等),那是因为你的浏览器已经支持了 es6 语法(新版本浏览器都已经支持)。

配置路由

将 vue-router 实例化传入的参数new vuerouter(参数)提取到 router.js 形成路由配置文件。

import index from './views/index.vue'

export default {

  routes: [

    {

      path: '/index',

      component: index

    }

  ]

} 

从 vue-loader@13.0.0,不能用 require 来引入 .vue 文件,因为 .vue 文件最终会被编译成 es6 module。

首页

首页引入 ouput 配置的 js,添加 vue 实例的挂载目标。

<body>

<div id="app"></div>

<script src="/static/build.js"></script>

</body> 

入口js完成路由配置、初始化 vue 实例。

import vue from 'vue';

import vuerouter from 'vue-router';

import app from './app.vue';

import routerconfig from './router';

vue.use(vuerouter);

var router = new vuerouter(routerconfig)

new vue({

  el: '#app',

  router: router,

  render: h => h(app)

});

从 vue 2.2.0 后使用 require('vue') 会报错,应使用 es6 module(import),具体原因请参考 vue 更新说明 ,截图如下:

详解从零搭建 vue2 vue-router2 webpack3 工程

在首页组件 app.vue 中添加路由链接、路由视图组件。

<template>

  <div>

    <div>

      <router-link to="/index">home</router-link>

    </div>

    <div>

      <router-view></router-view>

    </div>

  </div>

</template> 

配置loader

配置 vue 文件对应的 loader。

module: {

  rules: [

    {

      test: /\.vue$/,

      use: ["vue-loader"]

    }

  ]

} 

webpack2 必须在 module.rules 下配置 loader。'-loader'不能省略,必须将 loader 名写全。可以使用 rule.use 或 rule.loader 来配置 loader(rule.loader 是 rule.use: [ { loader } ] 的简写),建议用 use。

上面完成了新增页面及访问该页面所需的配置,下面来测试下是否能正常访问/index。执行npm run dev,浏览器显示如图界面。

详解从零搭建 vue2 vue-router2 webpack3 工程

支持css

安装 css-loader 后即可在 vue 文件中使用

npm i css-loader -d 

想要支持import / require引入css文件,则需要配置对应的 rule。

{

  test: /\.css$/,

  use: ["vue-style-loader", "css-loader"]

} 
<script>

import "../style/style.css"

</script> 

支持css预处理语言

以 stylus 为例,安装 stylus 及 stylus-loader。

npm install stylus stylus-loader -d 

增加 .styl 文件对应的 loader 配置。

{

  test: /\.styl$/,

  use: ["vue-style-loader", "css-loader", "stylus-loader"]

} 

使用示例:

<style lang="stylus">

  .stylus

    .red

      color red

</style>

<script>

  import "../css/stylus-example.styl"

</script> 

node-sass 安装慢的解决办法

详解从零搭建 vue2 vue-router2 webpack3 工程

使用淘宝镜像:

npm set disturl https://npm.taobao.org/dist

也可以单独设置node-sass镜像:

npm set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass

支持图片及图标字体

安装图片及图标字体依赖的loader。

npm install url-loader file-loader -d 

增加图片及图标字体的loader配置。

{

  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

  use: [{

    loader: "url-loader",

    options: {

      limit: 10000,

      name: 'images/[name].[hash:7].[ext]'  // 将图片都放入images文件夹下,[hash:7]防缓存

    }

  }]

},

{

  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

  use: [{

    loader: "url-loader",

    options: {

      limit: 10000,

      name: 'fonts/[name].[hash:7].[ext]'  // 将字体放入fonts文件夹下

    }

  }]

} 

构建

添加打包命令如下:

"build":"webpack --progress --colors" 

执行npm run build开始构建,完成后,可以看到工程目录下多了dist目录以及 dist/build.js。 

使用 webpack 插件

压缩js

在之前的文章提到过,打开未压缩版的build.js,你会发现es6的语法没有被转化为es5,因此需要安装babel 套件来完成语法的转化,否则压缩的时候就会报错。之前广泛使用的转码规则为 babel-preset-es2015,但 babel 的官网上在9月宣布 es2015 / es2016/ es2017 等等 es20xx 时代的 presets 通通被废弃(deprecated),取而代之的是 babel-preset-env,并且承诺它将成为“未来不会过时的(future-proof)”解决方案。

npm i babel-loader babel-core babel-preset-env -d 

增加babel的配置文件.babelrc。

{

  "presets": [

    ["env", { "modules": false }]

  ],

  "comments": false

} 

将 modules 设置为 false,即交由 webpack 来处理模块化,通过其 treeshaking 特性将有效减少打包出来的 js 文件大小,可以自行对比下前后打包出来的文件的大小,效果还是不错的。

comments 即是否保留注释。

接着配置 js 文件的 loader。

{

  test: /\.js$/,

  use: "babel-loader",

  include: [path.resolve(__dirname, 'src')]

} 

注意:webpack2建议尽量避免exclude,更倾向于使用include。

压缩 js 采用webpack.optimize.uglifyjsplugin,配置如下:

new webpack.optimize.uglifyjsplugin() 

官网称warnings默认为false,你可能会遇到即使没有配置warnings: true,控制台仍显示警告,看下面这段源码就知道了。查看源码

详解从零搭建 vue2 vue-router2 webpack3 工程

只有当options.compress !== false时 warnings 才会被设置默认值 false,所以一旦配置了 compress 其它选项,那就需同时配置warnings: false。

warnings作用是当插件在压缩过程中移除的无效代码或定义是显示警告信息(display warnings when dropping unreachable code or unused declarations etc.)。

提取css

使用extract-text-webpack-plugin插件提取css。更改 css 及 less 的 loader 配置如下。

// 安装插件

npm i extract-text-webpack-plugin -d 

// var extracttextplugin = require("extract-text-webpack-plugin")

{

  test: /\.css$/,

  use: extracttextplugin.extract({

    use: "css-loader"

  })

},

{

  test: /\.styl$/,

  use: extracttextplugin.extract({

    use: ["css-loader", "stylus-loader"]

  })

} 

上述配置并不能提取 vue 文件中的 style,需要设置 vue-loader 参数才可以。

{

  test: /\.vue$/,

  use: {

    loader: "vue-loader",

    options: {

      loaders: {

        css: extracttextplugin.extract({

          use: 'css-loader'

        }),

        stylus: extracttextplugin.extract({

          use: ["css-loader", "stylus-loader"]

        })

      }

    }

  }

} 

初始化插件,filename 可以指定 css 文件的目录。

new extracttextplugin({

  filename: "css/style.css"

}) 

postcss

安装 postcss-loader 及 postcss 插件。

npm i postcss-loader cssnano -d 

配置 loader 如下:

// css-loader配置改为

use: ['css-loader', "postcss-loader"]

// stylus-loader配置改为

use: ["css-loader", "postcss-loader", "stylus-loader"] 

postcss-loader 要放在 css-loader 和 style-loader 之后,css 预处理语言 loader 之前(stylus-loader)。

新增 postcss.config.js 来配置postcss插件,这样就不用给每个 postcss-loader 去配置。更多 postcss-loader 的配置方式请参考 。

module.exports = {

  plugins: [

    require('cssnano')

  ]

} 

cssnano 使用了一系列 postcss 插件,包含了常用的 autoprefixer 等,如何传入 autoprefixer 的配置?

require('cssnano')({

  autoprefixer: {

    add: true,

    browsers: ['> 5%']

  }

}) 

其中有一个插件 postcss-zindex 使用中发现有些问题。如果想禁用这个插件的话,配置如下:

require('cssnano')({

  zindex: {

    disable:true

  }

}) 

附:postcss插件分类搜索网站:

生成首页

安装 html-webpack-plugin 插件。

npm i html-webpack-plugin -d 

初始化插件。

// var htmlwebpackplugin = require('html-webpack-plugin');

new htmlwebpackplugin({

  filename: 'index.html',

  template: 'index.tpl.html'

}) 

其它插件

webpack3 新增的作用域提升。

new webpack.optimize.moduleconcatenationplugin() 

指定生产环境,以便在压缩时可以让 uglifyjs 自动删除代码块内的警告语句。

new webpack.defineplugin({

  'process.env.node_env': json.stringify('production')

}) 

因为这个插件直接做的文本替换,给定的值必须包含字符串本身内的实际引号。通常,有两种方式来达到这个效果,使用 '"production"', 或者使用 json.stringify('production')。

你完全可以在自己的代码中使用process.env.node_env来区分开发和生产,从而针对不同的环境做一些事情。不用担心这部分代码会被保留,最终会被 uglifyjs 删除。例如:

if (process.env.node_env != "production") {

  // 开发环境

}

// webpack.defineplugin插件替换后,上述代码会变成

if ("production" != "production") {

  // 开发环境

}

// 输出

if (false) {

  // 开发环境

}

// uglifyjs 会删除这段无效代码 

使用上述插件后再次构建,会发现生成的js相比原来的体积小了不少。

friendly-errors-webpack-plugin 是一个更友好显示 webpack 错误信息的插件。插件 github 地址:

一般在开发环境下使用。

var friendlyerrorswebpackplugin = require('friendly-errors-webpack-plugin');

 

var webpackconfig = {

 // ...

 plugins: [

  new friendlyerrorswebpackplugin(),

 ],

 // ...

} 

效果如下图:

详解从零搭建 vue2 vue-router2 webpack3 工程

显示构建进度插件:webpack.progressplugin

{

 // ...

 plugins: [

  new webpack.progressplugin(),

 ],

 // ...

} 

效果如下图:

详解从零搭建 vue2 vue-router2 webpack3 工程

美化 webpack 编译控制台打印的信息的插件webpack-dashboard

详解从零搭建 vue2 vue-router2 webpack3 工程

分离webpack配置

将开发和生产配置文件分离,方便增加各个环境下的个性配置。webpack2文档中也详细阐述了如何为多环境配置webpack。基本思路如下:

  1. 编写一个基本配置文件(webpack.base.config.js)
  2. 使用webpack-merge合并这个基础配置和针对环境的特定的配置(webpack.dev.config.js,webpack.prod.config.js)

webpack.base.config.js 内容如下:

var webpack = require('webpack');

var path = require('path');

var utils = require('./utils');

function resolve(relpath) {

  return path.resolve(__dirname, relpath);

}

module.exports = {

  entry: { app: resolve('../src/main.js') },

  output: {

    filename: 'js/[name].js'

  },

  module: {

    rules: [{

        test: /\.js$/,

        use: "babel-loader",

        include: [resolve('../src')]

      },

      {

        test: /\.vue$/,

        use: {

          loader: "vue-loader",

          options: utils.vueloaderoptions()

        }

      },

      {

        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

        use: {

          loader: "url-loader",

          options: {

            limit: 10000,

            name: 'images/[name].[hash:7].[ext]'

          }

        }

      },

      {

        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,

        use: [{

          loader: "url-loader",

          options: {

            limit: 10000,

            name: 'fonts/[name].[hash:7].[ext]'

          }

        }]

      }

    ]

  }

} 


为什么要将vue-loader的options提取出来?其主要是用来配置css及css预处理语言的loader,开发环境可以不用配置,但是生产环境需要提取css、增加postcss-loader等,因此需要提取出来针对不同环境返回相应的options。后面会列出utils.vueloaderoptions的内容。

为什么没有配置css的loader?理由和上面的vue-loader一样。

为什么没有配置path和publicpath?一方面是个性化参数,另外开发和生产可能不相同,因此在webpack.dev.config和webpack.prod.config中分别配置更为合适。

webpack.dev.config.js 内容如下:

var webpack = require('webpack');

var merge = require('webpack-merge');

var htmlwebpackplugin = require('html-webpack-plugin');

var basewebpackconfig = require('./webpack.base.config');

var utils = require('./utils');

var config = require('./config');

object.keys(basewebpackconfig.entry).foreach(function(name) {

  basewebpackconfig.entry[name] = [

    `webpack-dev-server/client?http://localhost:${config.dev.port}/`,

    "webpack/hot/dev-server"

  ].concat(basewebpackconfig.entry[name])

});

module.exports = merge(basewebpackconfig, {

  output: {

    path: config.dev.outputpath,

    publicpath: config.dev.outputpublicpath

  },

  module: {

    rules: utils.styleloaders()

  },

  plugins: [

    new webpack.hotmodulereplacementplugin(),

    new htmlwebpackplugin({

      filename: 'index.html',

      template: 'index.html',

      inject: true

    })

  ]

}) 

添加了htmlwebpackplugin后,index.html中就不需要在自己去引用打包的js了,会自动根据打包的js添加引用,这样更加方便,关于htmlwebpackplugin的配置,需要说明两点:

1.template的路径是相对于webpack编译时的上下文目录,说白了就是项目根目录,因此上面可以直接配置index.html,其指向的就是根目录下的index.html;

2.filename则是相对于webpack配置项output.path(打包资源存储路径)。

html-webpack-plugin关于template和filename路径源码如下:

// https://github.com/jantimon/html-webpack-plugin/blob/master/index.js

// template

this.options.template = this.getfulltemplatepath(this.options.template, compiler.context);

// filename

this.options.filename = path.relative(compiler.options.output.path, filename); 

config.js内容如下:

module.exports = {

  dev: {

    outputpath: path.resolve(__dirname, '../static'),

    outputpublicpath: '/',

    port: 8000

  },

  prod: {

    outputpath: path.resolve(__dirname, '../static'),

    outputpublicpath: '/static/'

  }

} 

utils.js内容如下:

var extracttextplugin = require('extract-text-webpack-plugin');

var isprod = process.env.node_env === "production";

// 根据项目需求添加css预处理语言并安装相应的loader,以stylus-loader为例

var csslang = [{

  name: 'css',

  reg: /\.css$/,

  loader: 'css-loader'

}, {

  name: 'stylus',

  reg: /\.styl$/,

  loader: "stylus-loader"

}];

function genloaders(lang) {

  var loaders = ['css-loader', 'postcss-loader'];

  if (lang.name !== 'css') {

    loaders.push(lang.loader);

  }

  if (isprod) {

    // 生产环境需要提取css

    loaders = extracttextplugin.extract({

      use: loaders

    });

  } else {

    // 开发环境需要vue-style-loader将css提取到页面头部

    loaders.unshift('vue-style-loader');

  }

  return loaders;

}

// 各种css的loader

exports.styleloaders = function() {

  var output = [];

  csslang.foreach(lang => {

    output.push({

      test: lang.reg,

      use: genloaders(lang)

    })

  })

  return output;

};

// vue-loader的options

exports.vueloaderoptions = function() {

  var options = {

    loaders: {}

  };

  csslang.foreach(lang => {

    options.loaders[lang.name] = genloaders(lang);

  });

  return options;

} 

接下来就是如何启动webpack-dev-server,vue-cli的webpack模板工程用的express及webpack中间件做开发服务器,其实用webpack-dev-server就能满足需求,当然用express能够做更多的事情,毕竟webpack-dev-server是一个轻量级的express。dev.js内容如下:

var webpack = require('webpack');

var webpackdevserver = require('webpack-dev-server');

var devconfig = require("./webpack.dev.config");

var config = require("./config");

var compiler = webpack(devconfig);

var server = new webpackdevserver(compiler, {

  hot: true,

  noinfo: true,

  publicpath: config.dev.outputpublicpath,

  stats: { colors: true }

});

server.listen(config.dev.port, "0.0.0.0");

var url = `http://localhost:${config.dev.port}/`;

// 需先安装 opn 模块 npm i opn -d

var opn = require('opn');

// 打包完毕后启动浏览器

server.middleware.waituntilvalid(function() {

  console.log(`> listening at ${url}`);

  opn(`${url}`);

}) 

生产配置文件(webpack.prod.config.js)内容如下:

// 设定为生产环境

process.env.node_env = 'production';

var webpack = require('webpack');

var merge = require('webpack-merge');

var htmlwebpackplugin = require('html-webpack-plugin');

var extracttextplugin = require('extract-text-webpack-plugin');

var basewebpackconfig = require('./webpack.base.config');

var utils = require('./utils');

var config = require('./config');

 

module.exports = merge(basewebpackconfig, {

  output: {

    path: config.prod.outputpath,

    publicpath: config.prod.outputpublicpath

  },

  module: {

    rules: utils.styleloaders()

  },

  plugins: [

    new webpack.defineplugin({

      'process.env.node_env': '"production"'

    }),

    new webpack.optimize.uglifyjsplugin(),

    new extracttextplugin({

      filename: "css/style.css?[contenthash:8]"

    }),

    new htmlwebpackplugin({

      filename: 'index.html',

      template: 'index.html',

      inject: true

    })

  ]

}) 

生产构建(prod.js)内容如下:

var webpack = require("webpack");

var webpackprodconfig = require('./webpack.prod.config');

webpack(webpackprodconfig, function(err, stats) {

  process.stdout.write(stats.tostring());

}); 

对应在package.json中添加开发和生产构建的命令如下:

"scripts": {

  "dev": "node build/dev.js",

  "build": "node build/prod.js"

} 

代码分割

参照vue-cli及webpack文档的提取公共代码的方式,利用插件webpack.optimize.commonschunkplugin将来自node_modules下的模块提取到vendor.js(一般来讲都是外部库,短时间不会发生变化)。于是有如下代码:

new webpack.optimize.commonschunkplugin({

  name: 'vendor',

  minchunks: function(module, count) {

    return module.resource && /\.js$/.test(module.resource) && module.resource.indexof(path.join(__dirname, '../node_modules')) === 0

  }

}) 

如果你查看未压缩版的vendor.js,会发现不仅包含vue的代码,还包含了webpackbootstrap(webpack模块加载器)的代码,按理说放在vendor里面也没啥问题,毕竟后面的模块都需要依赖于此,但是如果你的chunk使用了hash,一旦app代码发生了改变,相应的hash值会发生变化,webpackbootstrap的代码也会发生变化(如图),而我们提取vendor的初心就是这部分代码改变频率不大,显然这不符合我们的目标,那么应当将webpackbootstrap再提取到一个文件中,代码如下:

new webpack.optimize.commonschunkplugin({

  name: 'manifest',

  chunks: ['vendor']

}) 

详解从零搭建 vue2 vue-router2 webpack3 工程 

用 import 还是 require

vue 2.2.0 后不能直接使用 require 来加载 vue,那么到底改是该使用 es6 module 还是 commonjs 呢?,先看一个对比图:

全部使用 es6 module,即import、export default,最终打包的app.js为1.20kb。

详解从零搭建 vue2 vue-router2 webpack3 工程

全部使用 commonjs(除了vue),即require、module.exports,最终打包的app.js为1.12kb。

详解从零搭建 vue2 vue-router2 webpack3 工程

虽然两者大小相差不大,但是这不禁让人觉得用 commonjs 似乎是一条优化措施,那么代码层面到底是怎么回事呢?

为了一探究竟,注释了压缩插件,以about.vue最终构建的代码来看,使用 commonjs 的代码如下:

 (function (module, exports, __webpack_require__) {

 "use strict";

 module.exports = {

  data: function data() {

   return {

    page: 'about'

   };

  }

 };

}), 

这基本上和 about.vue 中的代码相差无几,而使用 es6 module 构建的代码如下:

(function (module, exports, __webpack_require__) {

 "use strict";

 object.defineproperty(exports, "__esmodule", {

  value: true

 });

 exports.default = {

  data: function data() {

   return {

    page: 'about'

   };

  }

 };

}), 

对比两种规范下构建后的代码,使用 es6 module 主要是多了 object.defineproperty 那一部分,从而导致了最终打包的文件大一点儿。那是不是为了最终文件体积能小些就全部使用 commonjs 呢?这个需要你充分理解 commonjs 和 es6 module 的区别,引用《ecmascript 6入门》这本书的解释如下:

es6模块加载的机制,与commonjs模块完全不同。commonjs模块输出的是一个值的拷贝,而es6模块输出的是值的引用。

为了更清楚的理解这段话,我们稍微做一下测试,在 src 下增加一个test.js,内容如下(分别将两种写法列出):
 

// commonjs

var counter = 1;

function inccounter() {

  counter++;

}

module.exports = {

  counter: counter,

  inccounter: inccounter,

};

// es6 module

export let counter = 1;

export function inccounter() {

  counter++;

} 

在about.vue中测试如下:

 
// commonjs

var test = require('../test');

export default {

  created() {

    console.log(test.counter); // 1

    test.inccounter();

    console.log(test.counter); // 1

  }

}

// es6 module

import { counter, inccounter } from '../test';

export default {

  created() {

    console.log(counter); // 1

    inccounter();

    console.log(counter); // 2

  }

} 

最终的输出值也印证了前面的解释,更详细的解读请查阅相关资料或书籍。只有深入理解了两者的区别,自然就能明白何时该使用何种规范。当然 es6 作为未来的趋势,我们应该去做更多的尝试。

异步组件(懒加载)

之前用懒加载的方式是:require.ensure,在 webpack2 中引入了 code splitting-async 的新方法 import(),用于动态引入 es module。require.ensure 可以指定 chunkfilename,但是 import 没有很好的途径去指定,webpack3 为了解决这个问题,提出了用魔法注释的方式来指定模块名。

结合 vue-router 可以轻松实现懒加载,配置路由指向异步组件即可实现懒加载,比如:

{

    path: '/async',

    component: () => import(/* webpackchunkname: "async" */'./views/async.vue')

} 

如果你发现使用 import() 运行时报错,有几种情况:
1.babel presets 配置为 es2015,则不支持动态导入功能,因此需要安装支持动态导入的 presets(npm i babel-preset-stage-2 -d),或者 babel 插件(npm i babel-plugin-syntax-dynamic-import -d);
2.babel presets 配置为 env,但是 modules 配置为 false,babel 则不会解析 import,可以安装插件 (npm i babel-plugin-syntax-dynamic-import -d)解决。

魔法注释虽然指定了块名,但是 webpack 默认的块名配置为 [id].js,即用的模块的 id 作为块名,因此需要我们手动改下配置。

修改 webpack.base.config.js 的 output:

output: {

  filename: 'js/[name].js',

  chunkfilename: "js/[name].[chunkhash].js"

} 

效果如下图:

详解从零搭建 vue2 vue-router2 webpack3 工程 

如果发现魔法注释没有生效,要检查下 .babelrc 的配置项 comments 是否设为 true。或者不配置 comments(默认为true)

extract-text-webpack-plugin 默认不会提取异步模块中的 css,需要加上配置:

new extracttextplugin({

  allchunks:true,

  filename: "css/style.css?[contenthash:8]"

}) 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。