webpack配置vue开发环境

最新推荐文章于 2024-05-04 16:31:06 发布

天空影

最新推荐文章于 2024-05-04 16:31:06 发布

阅读量2.2k

点赞数

分类专栏：大前端-vue 大前端-配置项文章标签： webpack vue

本文链接：https://blog.csdn.net/jx950915/article/details/80105227

版权

大前端-vue 同时被 2 个专栏收录

23 篇文章 4 订阅

订阅专栏

大前端-配置项

14 篇文章 0 订阅

订阅专栏

首先，你要完成了下面几点：

然后安装vue需要的包

npm install vue vue-loader vue-style-loader vue-html-loader vue-template-compiler --save-dev

这里强调一下 ：vue-loader 现在安装的话都15.0.3版本，会出现vue-loader was used without the corresponding plugin.。然后我也不知道什么原因，我就把版本号改为14.0.3 了就ok了。

配置

resolve:{
    alias:{
        'vue$':'vue/dist/vue.common.js'
    }
}
……
{
    test: /\.vue$/,
    loader: 'vue-loader'
}

整体目录

vue-eWorks
    |__dist
    |__node_modules
    |__src
        |__components
            |__Hello.vue
        |__index.html
        |__main.js
    |__.babelrc
    |__package.json
    |__webpack.config.js

整体npm包 packjson.js

"dependencies": {
    "vue": "^2.5.16",
    "webpack": "^3.10.0"
},
 "devDependencies": {
   "babel-core": "^6.26.0",
   "babel-loader": "^7.1.4",
   "babel-preset-es2015": "^6.24.1",
   "css-loader": "^0.28.11",
   "file-loader": "^1.1.11",
   "style-loader": "^0.21.0",
   "url-loader": "^1.0.1",
   "html-webpack-plugin": "^3.2.0",
   "vue-html-loader": "^1.2.4",
   "vue-loader": "^14.0.3",
   "vue-style-loader": "^4.1.0",
   "vue-template-compiler": "^2.5.16",
   "webpack-dev-server": "^2.9.7"
 }

整体配置 webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        "main":"./src/main.js",
    }, 
    output:{
        path:__dirname+ "/dist/",
        filename:"js/[name].js",       
    },
    devServer: {
        contentBase: "./dist",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    } ,
    resolve:{
        alias:{
            'vue$':'vue/dist/vue.common.js'
        }
    },
    module: {  
        loaders: [  
            {  
                test: /\.css$/,  
                use: ['style-loader','css-loader']  
            } ,
            {    
                test: /\.js$/,    
                exclude: /node_modules/,    
                loader: 'babel-loader'    
            },
            {
    　　　　　　test: /\.(png|svg|jpg|gif|woff|woff2|svg|eot|ttf)$/,
                loader: 'url-loader?limit=8192&&name=img/[name].[ext]'
            } ,
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            title:'index',
            filename:'index.html',
            inject:true,
            chunks:['main']
        })
    ]
  }

.babelrc

{ "presets": [ "es2015" ] }

文件
index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
<div id="test">
    <Hello></Hello>
</div>
</body>
</html>

main.js

import Vue from 'vue';
import Hello from "./components/Hello.vue";

new Vue({
    el: "#test",
    template: '<Hello/>',
    components: { Hello }
})

Hello.vue

<template>
    <div>{{msg}}</div>
</template>

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

<style>
    div {
        margin:200px;
        color: green;
        font-size: 20px;
    }
</style>

执行 npm run server

到这一步估计大家应该很清楚了吧

天空影

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
webpack配置vue开发环境

首先，你要完成了下面几点：配置css 配置js 配置图片文件配置html-webpack-plugin（可选）然后安装vue需要的包npm install vue vue-loader vue-style-loader vue-html-loader vue-template-compiler --save-dev这里强调一下：vue-loader 现在安装的话都...
复制链接

扫一扫