一、创建项目目录结构:
webpack-demo:
-index.html
-main.js:入口文件
-app.vue:vue主文件
-package.json:工程依赖文件
-webpack.config.js:webpack配置文件
-.babelrc:babel配置文件
二、package.json:安装相关模板(生产模块/开发模块/服务命令)
cnpm i vue --S //i install --S --save
cnpm i -D webpack webpack-dev-server
cnpm i --D css-loader file-loader style-loader
cnpn i --D vue-loader vue-html-loader vue-style-loader vue-template-compiler
cnpm i --D babel-loader babel-core babel-preset-env
babel-preset-env:会根据配置的运行环境自动启用需要的babel插件
安装后的package.json文件如下,特别注意下“scripts”中“dev”的配置:
{
"name": "vue-cli-created-by-self",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --open --hot --port 8888" //
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.5.2"
},
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.3.2",
"css-loader": "^0.28.0",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
三、配置webpack webpack.config.js
module.exports = { //模块
entry: './main.js', //入口文件
output: { //将VUE文件编译输出
path: __dirname+'/dist',
filename: 'build.js' //所有的JS放入build.js
},
module: {
rules: [ //加载规则
{
test: /\.vue$/, //VUE文件
loader: 'vue-loader' //加载器
},
{
test: /\.js$/,
loader: 'babel-loader', //es6转换,所有的es6文件加载及转换
exclude: /node_modules/ //排除这个目录
},
]
}
};
四、编写main.js:main.js是入口文件,webpack编译会通过根目录文件打包到build.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'#app',
render: h=>(App)
/* render: function(createElement){
return createElement(App);
}*/
});
五、app.vue
<template>
<div id="app">
<h1>Welcome to</h1>
<User></User>
</div>
</template>
<script>
import User from './User.vue'
export default {
name: 'App',
components: {
User
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
六、编写babelrc
七、index.html引用build.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-project</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/build.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
此时,webpack将vue/js打包到build.js,先执行npm install
八、运行测试npm run dev