vue webpack环境

2019-04-04 15:59  70人阅读  评论 (0)

vue webpack 环境搭建

安装包

npm init -y
npm install -S vue@2
npm install -D babel-core@6 babel-loader@7 babel-plugin-transform-runtime@6 babel-preset-env@1 babel-preset-stage-0@6 css-loader@0 file-loader@2 html-webpack-plugin@3 less@3 less-loader@4 sass.js@0 sassjs-loader@2 style-loader@0 url-loader@1 vue-loader@14 vue-template-compiler@2 webpack@3 webpack-dev-server@2

配置 webpack.config.js

var path = require("path")
var webpack = require("webpack")
var htmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry: path.join(__dirname, "./src/main.js"),
    output: {
        path: path.join(__dirname, "./dist"),
        filename: "bundle.js"
    },
    devServer: {
        open: true,
        port: 3000,
        contentBase: "src",
        hot: true,

    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({
            template: path.join(__dirname, "./src/index.html"),
            filename: "index.html"
        })
    ],
    module: {
        rules: [
            {test: /\.css$/, use: ["style-loader", "css-loader"]},
            {test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"]},
            {test: /\.scss$/, use: ["style-loader", "css-loader", "sassjs-loader"]},
            {test: /\.(jpg|jpeg|png|git|bmp)$/, use: "url-loader?limit=10240&name=[hash:8]-[name].[ext]"},
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use: "url-loader"},
            {test: /\.js$/, use: "babel-loader", exclude: /node_modules/},
            {test: /\.vue$/, use: "vue-loader"}
        ]
    }
}

配置 .babelrc

{
    "presets": ["env", "stage-0"],
    "plugins": ["transform-runtime"]
}

修改 package.json

,
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000 --hot"

页面 src/index.html

<!DOCTYPE html>
<html>
<head>
    <title>webpack vue</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

脚本 src/main.js

import Vue from "vue"

import login from "./login.vue"

var vm = new Vue({
    el: "#app",
    data: {},
    methods: {},
    render: c => c(login)
})

组件 src/login.vue

<template>
    <div>
        <h1>{{msg}}组件</h1>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            msg: "登录"
        }
    }
}
</script>

<style lang="sassjs" scoped>
h1 {
    font-size: 80px;
}
</style>

运行

npm run dev