Vue, Webpack 4 & Babel 基础入门

翻译 田勇 ⋅ 于 2个月前 ⋅ 1757 阅读 ⋅ 原文地址


这是一篇协同翻译的文章,目前翻译进度为 17%,你可以点击『我来翻译』按钮来 参与翻译


在本教程中,我们将配置一个最小的构建链来创建 Vue 应用。


  • Vue: 组织代码
  • Babel: 编译代码
  • Webpack: 打包代码

为什么选择 Babel 和 Webapck?

  • 两者都是各自领域的顶尖解决方案
  • 两者都完美支持 vue-cli
XiaoTeng 翻译于 2个月前

1. Node

创建新的 Node 项目:

mkdir hello-vue

cd hello-vue

npm init -y

小提示 : 如果你运行 npm init 的时候附带参数 -f , --force , -y 或者 --yes ,那么该命令将使用默认参数且不会要求您提供任何参数选项。

XiaoTeng 翻译于 2个月前

2. Babel


What is Babel?

Babel is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).

Babel website:


We will be using the following Babel libraries:

  • babel-core: contains the core API.
  • babel-preset-env: automatically determines the Babel plugins and polyfills you need based on your targeted browser or runtime environments.
  • babel-preset-stage-3: any transforms in stage-x presets are changes to the language that haven’t been approved to be part of a release of Javascript (such as ES6/ES2015).

npm install --save-dev babel-core babel-preset-env babel-preset-stage-3

Tip: "npm i -D" is a shorter alias for "npm install-save-dev"

What is a Babel preset?

In Babel, a preset is a set of plugins used to support particular language features.


Inside the root directory, create a .babelrc file with the following contents:

"scripts": {
  "dev": "webpack-dev-server --mode development --progress --hot --open",
  "build": "webpack --mode production --progress"

What is the purpose of .babelrc?

.babelrc is the standard configuration file for Babel.


To verify the current configuration we will be transpiling a file via Babel’s built-in CLI.

npm install babel-cli --no-save

Trick: we will only use this library to verify the current configuration, it will not be part of our final build chain, we are therefore not saving it as a dependency. This behavior can be specified via the --no-save flag.

  • Inside the root directory, create a dist folder.
  • Inside the rootdirectory, create a src folder.
  • Inside the src directory, create an ‘index.js’ file with the following contents:
module.exports = {
  module: {
      rules: [

  plugins: [


The above snippet demonstrates rest properties for object destructuring assignment and spread properties for object literals, a feature that will be transformed by Babel’s stage 3 preset.

First transpile the source:

npx babel src/index.js --out-file dist/main.js

Then run the transpiled output:

node dist/main.js

The following should be logged:



{ a: 3, b: 4 }

Keep in mind the above result, we will be re-using this particular transpilation test to verify future build steps.

Tip: checkout the following article to learn more about the npx command.

Tip: checkout the official documentation to learn more about Babel’s CLI.

3. Webpack


What is Webpack?

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.


We will be using the following Webpack libraries:

  • webpack
  • webpack-cli: encapsulates all code related to command line interface handling.
  • webpack-dev-server: serves a webpack app and updates the browser on changes.

npm install --save-dev webpack webpack-cli webpack-dev-server

Add the following scripts to your package.json:

"scripts": {
  "dev": "webpack-dev-server --mode development --progress --hot --open",
  "build": "webpack --mode production --progress"

The --mode flag specifies the mode to use (production or development).

The --progress flag specified whether to print compilation progress.

CLI documentation:

DevServer documentation:

Configuration: base

Create a webpack.config.js file with the following contents:

module.exports = {
  module: {
      rules: [

  plugins: [


Want to learn more about Webpack’s configuration file? Checkout

Configuration: loaders

Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “load” them.

We will be using the following loaders:

  • babel-loader: allows transpiling JavaScript files using Babel and webpack.
  • vue-loader: .vue component loader.

npm install --save-dev babel-loader vue-loader vue-template-compiler

Note: vue-template-compiler is a peer dependency of vue-loader.

Update Webpack configuration:

module.exports = {
  module: {
      rules: [
            test: /\.vue$/,
            exclude: /node_modules/,
            loader: 'vue-loader'
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
            loader: 'babel-loader'
  plugins: [


Configuration: plugins

Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack flexible.

We will be using one plugin: html-webpack plugin

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates or use your own loader.

Install the plugin:

npm install --save-dev html-webpack-plugin

Update webpack configuration:

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

module.exports = {
  module: {
    rules: [
      // Loaders
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'

We are referencing a template but it does not exist yet, create an index.html file in the src directory with the following contents:

<!doctype html>
<html lang="en">

    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <title>Hello Vue</title>

    <!-- Our vue app will be mounted on this DOM element -->
    <div id="app"></div>
    <!-- Bundle will be injected below -->



  • npm run build
  • Open dist/index.html in browser.
  • Open the browser console, verify logs.

4. Vue


npm install vue

Creating a Vue component

Inside the src directory create a Vue component named App.vue with the following contents:

  <h1>{{ message }}</h1>

export default {
  name: 'app',
  data() {
    return {
      message: 'Hello, Vue!'

To learn more about single file components:

Creating the application entry point

Delete all code inside index.js and replace it with the following:

import Vue from 'vue';

import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)


The end

We are done setting up our minimal build chain!

If you have questions or feedback you are welcome to get in touch via Twitter.



我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。


回复数量: 0

Vue.js 官方中文文档