掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
新闻动态 > 媒体报道

vue开发看这篇文章就够了(下)

Loaders(加载器)

webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript.
  • webpack只能处理JavaScript资源
  • webpack通过loaders处理非JavaScript静态资源

1、 CSS打包

  • 安装:npm i -D style-loader css-loader
  • 注意:use中模块的顺序不能颠倒,加载顺序:从右向左加载
/* 在index.js  导入 css 文件*/
import './css/app.css'

/* webpack.config.js 配置各种资源文件的loader加载器*/
module: {
  // 配置匹配规则
  rules: [
    // test 用来配置匹配文件规则(正则)
    // use  是一个数组,按照从后往前的顺序执行加载
    {test: /\.css$/, use: ['style-loader', 'css-loader']},
  ]
}

2、 使用webpack打包sass文件

  • 安装:npm i -D sass-loader node-sass
  • 注意:sass-loader 依赖于 node-sass 模块
/* webpack.config.js */
// 参考:https://webpack.js.org/loaders/sass-loader/#examples
// "style-loader"  :creates style nodes from JS strings 创建style标签
// "css-loader"    :translates CSS into CommonJS 将css转化为CommonJS代码
// "sass-loader"   :compiles Sass to CSS 将Sass编译为css
module:{
  rules:[
    {test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader']},
  ]
}

3、 图片和字体打包

  • 安装:npm i -D url-loader file-loader
  • file-loader:加载并重命名文件(图片、字体 等)
  • url-loader:将图片或字体转化为base64编码格式的字符串,嵌入到样式文件中
/* webpack.config.js */
module: {
  rules:[
    // 打包 图片文件
    { test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader' },

    // 打包 字体文件
    { test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' }
  ]
}

图片打包细节

  • limit参数的作用:(单位为:字节(byte))

    • 当图片文件大小(字节)小于指定的limit时,图片被转化为base64编码格式
    • 当图片文件大小(字节)大于等于指定的limit时,图片被重命名以url路径形式加载(此时,需要file-loader来加载图片)
  • 图片文件重命名,保证相同文件不会被加载多次。例如:一张图片(a.jpg)拷贝一个副本(b.jpg),同时引入这两张图片,重命名后只会加载一次,因为这两张图片就是同一张
  • 文件重命名以后,会通过MD5加密的方式,来计算这个文件的名称
/* webpack.config.js */

module: {
  rules: [
    // {test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=100'},
    {
      test: /\.(jpg|png|gif|jpeg)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 8192
          }
        }
      ]
    }
  ]
}

字体文件打包说明

  • 处理方式与图片相同,可以使用:file-loader或url-loader

babel

基本使用(两步)

  • 第一步:
/* webpack.config.js */

module: {
  rules: [
    // exclude 排除,不需要编译的目录,提高编译速度
    {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
  ]
}
  • 第二步:在项目根目录中新建.babelrc配置文件
/* 创建 .babelrc 文件*/
// 将来babel-loader运行的时候,会检查这个配置文件,并读取相关的语法和插件配置
{
  "presets": ["env"]
}

babel的说明

  • babel的作用:

    • 1 语法转换:将新的ES语法转化为浏览器能识别的语法(babel-preset-*)
    • 2 polyfill浏览器兼容:让低版本浏览器兼容最新版ES的API

babel-preset-*

Babel通过语法转换器,能够支持最新版本的JavaScript语法 
babel-preset-* 用来指定我们书写的是什么版本的JS代码
  • 作用:将新的ES语法转化为浏览器能识别的ES5代码
  • ES6语法提案的批准流程

    • ES2015 也就是 ES6, 下一个版本是ES7, 从 ES6 到 ES7之间经历了 5 个阶段
    • babel-preset-es2015 转换es6的语法
    • babel-preset-stage-0 转换比es6更新的语法
Stage 0 - Strawman(展示阶段)
Stage 1 - Proposal(征求意见阶段)
Stage 2 - Draft(草案阶段)
Stage 3 - Candidate(候选人阶段)
Stage 4 - Finished(定案阶段)

Stage 0 is "i've got a crazy idea",
stage 1 is "this idea might not be stupid",
stage 2 is "let's use polyfills and transpilers to play with it",
stage 3 is "let's let browsers implement it and see how it goes",
stage 4 is "now it's javascript".

babel-polyfill 和 transform-runtime

  • 作用:实现浏览器对不支持API的兼容(兼容旧环境、填补)

    • 在低版本浏览器中使用高级的ES6或ES7的方法或函数,比如:'abc'.padStart(10)
  • 方式一 polyfill
  • 方式二 transform-runtime
  • 方式一:npm i -S babel-polyfill
  • 方式二:npm i -D babel-plugin-transform-runtime 和 npm i -S babel-runtime

    • 注意:babel-runtime包中的代码会被打包到你的代码中(-S)
区别:
polyfill 所有兼容性问题,都可以通过polyfill解决(包括:实例方法)、污染全局环境
runtime  除了实例方法以外,其他兼容新问题都能解决、不污染全局环境

polyfill:如果想要支持全局对象(比如:`Promise`)、静态方法(比如:`Object.assign`)或者**实例方法**(比如:`String.prototype.padStart`)等,那么就需要使用`babel-polyfill`

babel-runtime :提供了兼容旧环境的函数,使用的时候,需要我们自己手动引入
  比如: const Promise = require('babel-runtime/core-js/promise')
  存在的问题:
    1 手动引入太繁琐
    2 多个文件引入同一个helper(定义),造成代码重复,增加代码体积
babel-plugin-transform-runtime:
    1 自动引入helper(比如,上面引入的 Promise)
    2 babel-runtime提供helper定义,引入这个helper即可使用,避免重复
    3 依赖于 babel-runtime 插件

transform-runtime插件的使用:
  直接在 .bablerc 文件中,添加一个 plugins 的配置项即可!!!
  "plugins": [
    "transform-runtime"
  ]
/*
  babel-polyfill 的使用步骤:
  1 main.js
*/
// 第一行引入
require("babel-polyfill")

var s = 'abc'.padStart(4)
console.log(s)


// 2 webpack.config.js 配置
module.exports = {
  entry: ['babel-polyfill', './js/main.js']
}

总结

babel-core babel核心包

babel-loader 用来解析js文件

babel-preset-* 新ES语法的解析和转换

transform-runtime / babel-polyfill 兼容旧浏览器,到达支持新API目的

// 判断浏览器是否兼容 padStart 这个 API
if (!String.prototype.padStart) {
  // 如果不兼容, 就自己模拟 padStart的功能实现一份
  String.prototype.padStart = function padStart(targetLength,padString) {
  }
}

vue单文件组件

  • vue-loader
  • single-file components(单文件组件)
  • 后缀名:.vue,该文件需要被预编译后才能在浏览器中使用
  • 注意:单文件组件依赖于两个包 vue-loader / vue-template-compiler
  • 安装:npm i -D vue-loader vue-template-compiler
<!-- App.vue 示例代码: -->
<template>
  <div>
    <h1>VUE 单文件组件示例 -- App.vue</h1>
    <p>这是 模板内容</p>
  </div>
</template>

<script>
  // 组件中的逻辑代码
  export default {}
</script>

<style>
/* 组件样式 */
h1 {
  color: red;
}
</style>
// webpack.config.js 配置:
module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    }
  ]
}

使用单文件组件

/* main.js */

import Vue from 'vue'
// 导入 App 组件
import App from './App.vue'

const vm = new Vue({
  el: '#app',
  // 通过 render 方法,渲染App组件
  render: c => c(App)
})

单文件组件使用步骤

  • 1 安装:npm i -D vue-loader vue-template-compiler
  • 2 在 webpack.config.js 中配置 .vue 文件的loader

    • { test: /\.vue$/, use: 'vue-loader' }
  • 3 创建 App.vue 单文件组件,注意:App可以是任意名称
  • 4 在 main.js 入口文件中,导入 vue 和 App.vue组件,通过 render 将组件与实例挂到一起

单文件组件+路由

import Vue from 'vue'
import App from './App.vue'

// ------------- vue路由配置 开始 --------------
import Home from './components/home/Home.vue'
import Login from './components/login/Login.vue'

// 1 导入 路由模块
import VueRouter from 'vue-router'
// 2 ** 调用use方法使用插件 **
Vue.use(VueRouter)
// 3 创建路由对象
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/login', component: Login }
  ]
})

// ------------- vue路由配置 结束 --------------

const vm = new Vue({
  el: '#app',
  render: c => c(App),
  // 4 挂载到 vue 实例中
  router
})

Mint-UI

  • 基于 Vue.js 的移动端组件库
  • Mint-UI

快速开始

  • 安装:npm i -S mint-ui
// 1 导入 mint-ui模块
import MintUI from 'mint-ui'
// 2 导入 样式
import 'mint-ui/lib/style.css'
// 3 注册插件
Vue.use(MintUI)

MUI

  • MUI
  • MUI 也是移动端的UI库
  • 使用:从github下载包,找到dist文件夹,只需要导入样式即可
// 只需要导入 MUI的样式 即可,根据MUI的例子,直接使用HTML结果即可
// 导入样式
import './lib/mui/css/mui.min.css'

ElementUI

{
  "presets": [
    ["es2015", { "modules": false }], "stage-0"
  ],

  "plugins": [
    ["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      },
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-default"
      }
    ]]
  ]
}

Webpack 发布项目

  • webpack 打包的各种坑
  • webpack 命令能够生成dist目录到磁盘中,最终,把打包后的代码,部署服务器中去
  • webpack-dev-server 仅是在内存中生成的文件,并没有写到磁盘中,所以,只能在开发期间使用

创建项目发布配置文件

  • 开发期间配置文件:webpack.config.js
  • 项目发布配置文件:webpack.prod.js (文件名称非固定 production 生产环境)
  • 命令:webpack --config webpack.prod.js 指定配置文件名称运行webpack
  • 参数:--display-error-details 用于显示webpack打包的错误信息
/* package.json */

"scripts": {
  "build": "webpack --config webpack.prod.js"
}
1 在项目根目录中创建 webpack.prod.js 文件
2 在 package.json 中, 配置一个 scripts
3 在 终端中 通过 npm run build 对项目进行打包

打包处理过程

1 删除掉 devServer 相关的配置项
2 将图片和字体文件输出到指定的文件夹中
3 自动删除dist目录
4 分离第三方包(将使用的vue等第三方包抽离到 vender.js 中)
5 压缩混淆JS 以及 指定生成环境
6 抽取和压缩CSS文件
7 压缩HTML页面
8 配合vue的异步组件,实现按需加载功能

处理图片路径

  • 注意:如果limit小于比图片大,那么图片将被转化为base64编码格式
  • name参数介绍
/* webpack.prod.js */
// 处理URL路径的loader

{
  test: /\.(jpg|png|gif|bmp|jpeg)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 8192,
      name: 'images/[hash:7].[ext]' // 作用:将图片输出到images文件夹中,文件名采用7位的哈希值(MD5),并且保持原来的图片文件扩展名

      // name:指定文件输出路径和输出文件命令规则
      // [hash:7]:表示使用7位哈希值代表文件名称
      // [ext]:表示保持文件原有后缀名
      // name: 'imgs/img-[hash:7].[ext]'
    }
  }
},

自动删除dist目录

  • 安装:npm i -D clean-webpack-plugin
  • 作用: 每次打包之前, 删除上一次打包的dist目录
/* webpack.prod.js */
const cleanWebpackPlugin = require('clean-webpack-plugin')

plugins: [
  // 创建一个删除文件夹的插件,删除dist目录
  new cleanWebpackPlugin(['./dist'])
]

分离第三方包

  • 目的:将公共的第三方包,抽离为一个单独的包文件,这样防止重复打包!

    • 例如:main.js、router、vuex中都引入了vue,不分离的话,vue会被打包3次
    • 抽离后, vue文件只会被打包一次, 用到的地方仅仅是引用
/* webpack.prod.js */

// 1 入口 -- 打包文件的入口
entry: {
  // 项目代码入口
  app: path.join(__dirname, './src/js/main.js'),
  // 第三方包入口
  vendor: ['vue', 'vue-router', 'axios']
},

output: {
  // 2 修改输出文件路径和命名规则
  filename: 'js/[name].[chunkhash].js',
},

plugins: [
  // 3 抽离第三方包
  new webpack.optimize.CommonsChunkPlugin({
    // 将 entry 中指定的 ['vue', 'vue-router', 'axios'] 打包到名为 vendor 的js文件中
    // 第三方包入口名称,对应 entry 中的 vendor 属性
    name: 'vendor',
  }),
]

压缩混淆JS

  • 注意:uglifyjs 无法压缩ES6的代码
plugins: [
  // 优化代码
  // https://github.com/webpack-contrib/uglifyjs-webpack-plugin/tree/v0.4.6
  new webpack.optimize.UglifyJsPlugin({
    // 压缩
    compress: {
      // 移除警告
      warnings: false
    }
  }),

  // 指定环境为生产环境:vue会根据这一项启用压缩后的vue文件
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production')
    }
  })
]

抽取和压缩CSS文件

压缩和抽离CSS报错的说明:
Error processing file: css/style.css
postcss-svgo: Error in parsing SVG: Unquoted attribute value

原因:压缩和抽离CSS的插件中只允许 SVG 使用双引号
/* webpack.prod.js */

// 分离 css 到独立的文件中
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 压缩 css 资源文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

// bug描述: 生成后面的css文件中图片路径错误,打开页面找不到图片
// 解决:google搜索 webpack css loader 样式图片路径
output: {
  // ...

  // https://doc.webpack-china.org/configuration/output/#output-publicpath
  // 设置公共路径
  publicPath: '/',
},

module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
      })
    },
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ['css-loader', 'sass-loader']
      })
    },
  ]
},
plugins: [
  // 通过插件抽离 css (参数)
  new ExtractTextPlugin("css/style.css"),
  // 抽离css 的辅助压缩插件
  new OptimizeCssAssetsPlugin()
]

压缩HTML页面

new htmlWebpackPlugin({
  // 模板页面
  template: path.join(__dirname, './index.html'),

  // 压缩HTML
  minify: {
    // 移除空白
    collapseWhitespace: true,
    // 移除注释
    removeComments: true,
    // 移除属性中的双引号
    removeAttributeQuotes: true
  }
}),

vue配合webpack实现路由按需加载

步骤

  • 1 修改组件的引用方式
// 方式一: require.ensure()
const NewsList = r => require.ensure([], () => r(require('../components/news/newslist.vue')), 'news')

// 方式二: import() -- 推荐
// 注意:/* webpackChunkName: "newsinfo" */ 是一个特殊的语法,表示生成js文件的名称
const NewsInfo = () => import(/* webpackChunkName: "newsinfo" */ '../components/news/newsinfo.vue')
  • 2 修改 webpack 配置文件的output
output: {
  // ------添加 chunkFilename, 指定输出js文件的名称------
  chunkFilename: 'js/[name].[chunkhash].js',
},


vue开发看这篇文章就够了(上)

vue开发看这篇文章就够了(中)

原文来自:segmentfault

标签/Tag

合作伙伴/Partner

提供优质服务资源的开发者服务平台