1、项目根目录初始化package.json:
npm init
2、下载css与style的loader配置webpack中的css解析
npm install css-loader style-loader --save-dev
3、下载babel,webpack配置es6语法
npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev
4、下载vue以及相关组件
sudo npm install vue vue-loader vue-html-loader vue-style-loader vue-template-compiler --save-dev
5、webpack.config.js:
module.exports = {
devtool:"sourcemap",
entry:"./js/entry.js",
output:{
filename:"bundle.js"
},
module:{
loaders:[
{
test: /\.css$/,
loader: "style-loader!css-loader" //如果后缀是css,就是用style,css的loader来处理
},
{ //配置使用es6语法写js
test:/\.js$/,
loader:"babel-loader",
exclude:/node_modules/, //忽略掉这个文件夹下的
options: {
presets: ['es2015','stage-0'],
plugins: ['transform-runtime']
}
},{
//配置vue
test:/\.vue$/,
loader:'vue-loader'
}
]
},
resolve:{
alias:{
'vue$':'vue/dist/vue.js'
}
}
}
6、entry.js入口文件:
require('../css/style.css')
import Vue from 'vue'
import Heading from './components/heading.vue'
new Vue({
el:'#app',
components:{ Heading }
})
7、components/heading.vue:
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default{
data(){
return {
message : 'hello vue'
}
}
}
</script>
7、index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Learning</title>
</head>
<body>
<div id="app">
<Heading></Heading>
</div>
<script src="bundle.js"></script>
</body>
</html>
webpack配置vue
最新推荐文章于 2024-06-24 20:34:24 发布