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 现在安装的话都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
<html>
<head>
<meta charset="UTF-8">
<title>Vuetitle>
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.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
到这一步估计大家应该很清楚了吧