Vue-Webpack简单脚手架搭建

当前Vue版本2.4.2，Webpack版本3.5.5。

搭建简单的Vue脚手架

基本安装

mkdir vue-start && cd vue-start
npm init -y
cnpm install --save-dev webpack html-webpack-plugin clean-webpack-plugin webpack-dev-server
cnpm install --save-dev babel-core babel-loader babel-preset-vue-app
cnpm install --save-dev css-loader style-loader file-loader url-loader
cnpm install --save-dev postcss-loader autoprefixer
cnpm install --save-dev vue-loader vue-template-compiler
cnpm install --save vue

新建webpack.config.js

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

module.exports = {
    entry: {
        app: './src/index.js',
    },
    devtool: 'inline-source-map', //仅限开发环境配置，用于堆栈追踪错误和警告
    devServer: {
        contentBase: './dist',
        hot: true //启用HMR
    },
    module: {
        rules: [{
            test: /\.vue$/,
            use: ['vue-loader']
        },
        {
            test: /\.js$/,
            use: ['babel-loader'],
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader', 'postcss-loader']
        },
        {
            test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
            use: [{
            loader: 'url-loader',
            options: {
                limit: 10000
            }
            }]
        }]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Webpack Vue Demo'
        }),
        new webpack.HotModuleReplacementPlugin() //配置HRM插件
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

修改package.json文件

"scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },

增加.babelrc配置文件

{
  "presets": ["vue-app"]
}

增加postcss.config.js文件

module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

搭建demo页面

新建src目录，在src下新建App.vue文件如下：

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  export default{
    data () {
      return {
          msg: 'Hello World!'
      }
    }
  }
</script>

<style>
  h1{
    color:red;
  }
</style>

新建index.js如下：

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

new Vue({
  el: 'body',
  render: h => h(App)
})

命令行运行npm run start，打开浏览器，可以看到红色的Hello World!，将h1样式改成green，可以看到浏览器自动刷新成绿色。

运行npm run build，可以看到工程目录下多了dist目录。

源代码地址：https://github.com/wu-boy/vue-demo，vue-start目录。

本例子配置简单，仅用于学习使用。