手动搭建 vue 开发环境 #1

mwang0 · 2019-05-16T08:17:58Z

手动搭建 vue 开发环境 - 基础

技术栈： webpack4、babel7、vue2

es6/7/8 转 es5

依赖安装

npm install babel-loader @babel/core @babel/preset-env -D

修改 webpack 配置

module: {
  // 其它选项...
  rules: [
    // 其它选项...
    {
      test: /\.js$/,
      include: /src/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

修改 package.json 配置

"babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "browsers": [
              "> 1%",
              "last 2 versions"
            ]
          }
        }
      ]
    ]
  }

es6/7/8 api 转 es5

依赖安装

npm install core-js@2 @babel/runtime-corejs2 -S

修改 babel.config.js 配置, 按需引入 polyfill.

module.exports = function(api) {
  api.cache(true)
  return {
    presets: [
      [
        '@babel/preset-env',
        {
          useBuiltIns: 'usage',
          corejs: 2,
          targets: {
            browsers: ['> 1%', 'last 2 versions']
          }
        }
      ]
    ]
  }
}

处理 css

依赖安装

npm install -D style-loader css-loader

修改 webpack 配置

module: {
  rules: [
    // 其它选项...
    {
      test: /\.css$/,
      include: [/src/],
      use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
    }
  ]
}

处理 font

依赖安装

npm install -D url-loader

修改 webpack 配置

module: {
  rules: [
    // 其它选项...
    {
      test: /\.(eot|woff2?|ttf|svg)(\?.*)?$/,
      include: [/src/],
      use: 'url-loader'
    }
  ]
}

处理 image

修改 webpack 配置

module: {
  rules: [
    // 其它选项...
    {
      test: /\.(jpe?g|png?|webp|gif)(\?.*)?$/,
      include: [/src/],
      use: 'url-loader',
      options: {
        limit: 8192 //小于8KB以base64嵌入
      }
    }
  ]
}

处理 vue

依赖安装

npm install -D vue-loader vue-template-compiler

修改 webpack 配置

const VueLoaderPlugin = require('vue-loader/lib/plugin.js')

module: {
  rules: [
    // 其它选项...
    {
      test: /\.vue$/,
      include: [/src/],
      use: 'vue-loader'
    }
  ]
}

plugins: [
  // 其它选项...
  new VueLoaderPlugin()
]

创建 html

创建 html 模板文件，保存路径 src/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>m-admin</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

依赖安装

  npm install -D html-webpack-plugin

修改 webpack 配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
  // 其它选项...
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, '../src/index.html')
  })
]

热更新

依赖安装

npm install -D webpack-dev-server

修改 webpack 配置

const webpack = require('webpack')

plugins: [
  // 其它选项...
  new webpack.HotModuleReplacementPlugin()
]

修改 package 配置

  "scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.config.js"
  }

es6/7/8 转 es5 #1

mwang0 added good first issue Good for newcomers doc labels May 16, 2019

mwang0 added a commit that referenced this issue May 16, 2019

feat: 添加webpack #1

55d98f2

mwang0 added a commit that referenced this issue May 23, 2019

feat<config>

16ce6a7

es6/7/8 转 es5 #1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

手动搭建 vue 开发环境 #1

手动搭建 vue 开发环境 #1

mwang0 commented May 16, 2019 •

edited

Loading

手动搭建 vue 开发环境 #1

手动搭建 vue 开发环境 #1

Comments

mwang0 commented May 16, 2019 • edited Loading

手动搭建 vue 开发环境 - 基础

es6/7/8 转 es5

es6/7/8 api 转 es5

处理 css

处理 font

处理 image

处理 vue

创建 html

热更新

mwang0 commented May 16, 2019 •

edited

Loading