在家的闲暇时间来完善自己的前端知识。
经过两三天的学习，按照webpack文档学习，vue文档学习，最后实现了两者结合的目标。
webpack
按照网站上guide的流程依次学习
1、使用npm安装webpack
2、设置输入文件，比如怎样引入css，images，fonts，data
3、设置输出文件，比如可以根据自己的设置来决定输出脚本的名称，生成新的页面，在每次生成新页面之前先把旧的页面进行清理
4、开发过程中，使用source maps来显示提示信息，方便开发者定位错误的信息，使用本地服务器访问页面。
5、对于输出的文件进行压缩，减小文件的大小
Vue
1、使用npm进行安装vue
2、在webpack的入口文件中使用
import Vue from ‘vue‘;
引入vue，这样会报错，错误显示引入的是vue.runtime.esm.js，当我们在webpack中使 用：
module.exports = { ?// ... ?resolve: { ???alias: { ?????'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1 ???} ?}}就可以解决报错；
3.最后引入
module.exports = { ?// ... ?plugins: [ ???// ... ???new webpack.DefinePlugin({ ?????'process.env': { ???????NODE_ENV: JSON.stringify('production') ?????} ???}) ?]}代码展示
目录结构：
index.html
<!DOCTYPE html><html> ?<head> ???<meta charset="UTF-8"> ???<title>vue page</title> ???<div class="" id="main"> ?????<div class="" id="head"> ?????</div> ?????<div class="" id="container"> ???????{{message}} ?????</div> ?????<div class="" id="foot"> ?????</div> ???</div> ?</head> ?<body> ?<script type="text/javascript" src="app.bundle.js"></script></body></html>webpack.config.js
const path = require('path');const UglifyJSPlugin = require('uglifyjs-webpack-plugin');const webpack = require('webpack');module.exports = { ?entry : { ???app : './resourse/script/app.js', ?}, ?devtool: 'inline-source-map', ?devServer: { ???contentBase: './dist', ???hot: true ?}, ?plugins: [ ???new webpack.DefinePlugin({ ?????'process.env': { ???????NODE_ENV: JSON.stringify('production') ?????} ???}), ???new webpack.HotModuleReplacementPlugin(), ???new UglifyJSPlugin() ?], ?output : { ???filename : '[name].bundle.js', ???path : path.resolve(__dirname, 'dist') ?}, ?resolve: { ??alias: { ????'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1 ??} }}app.js
import _ from 'lodash';import Vue from 'vue';var app = new Vue({ ?el: '#container', ?data: { ???message: 'Hello Vue!' ?}})最后，可以看到一个经典的hello world显示在页面上。
到此时我认为最简单的webpack和vue已经结合，可以正常的进行前端的开发了，ok，我先开始使用一下自己的劳动成果，使用vue开发一下通用的组件，啦啦啦~~
原文地址：https://segmentfault.com/a/1190000012644031
webpack2.X、Vue学习以及将两者相结合
原文地址：https://www.cnblogs.com/lalalagq/p/9960294.html