详解用webpack2.0构建vue2.0超详细精简版

更新时间：2020-05-04 02:30:01 作者：startmvc

npminit-y初始化项目安装各种依赖项npminstall--savevue安装vue2.0npminstall--save-devwebpack@^2.1.0-beta.25we

npm init -y 初始化项目

安装各种依赖项

npm install --save vue 安装vue2.0

npm install --save-dev webpack@^2.1.0-beta.25 webpack-dev-server@^2.1.0-beta.9 安装webpack以及webpack测试服务器，默认安装是1.0版本的，所以必须指定版本号

npm install --save-dev babel-core babel-loader babel-preset-es2015 安装babel，一般的浏览器是不认识es6语法的，babel的作用是将es6的语法编译成浏览器认识的语法

npm install --save-dev vue-loader vue-template-compiler 用来解析vue的组件，.vue后缀的文件

npm install --save-dev css-loader file-loader 用来解析css

编写页面

新建目录src，里面新建App.vue


<!-- 简单写个title和一个循环 -->
<template>
 <div id="example">
 <h1>{{ msg }}</h1>
 <ul>
 <li v-for="n in 5">{{ n }}</li>
 </ul>
 </div>
</template>

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

<style scoped>
#example {
 background: red;
 height: 100vh;
}
</style>

在src目录下新建main.js


/* 引入vue和主页 */
import Vue from 'vue'
import App from './App.vue'

/* 实例化一个vue */
new Vue({
 el: '#app',
 render: h => h(App)
})

配置webpack

在根目录下新建webpack.config.js


/* 引入操作路径模块和webpack */
var path = require('path');
var webpack = require('webpack');

module.exports = {
 /* 输入文件 */
 entry: './src/main.js',
 output: {
 /* 输出目录，没有则新建 */
 path: path.resolve(__dirname, './dist'),
 /* 静态目录，可以直接从这里取文件 */
 publicPath: '/dist/',
 /* 文件名 */
 filename: 'build.js'
 },
 module: {
 rules: [
 /* 用来解析vue后缀的文件 */
 {
 test: /\.vue$/,
 loader: 'vue-loader'
 },
 /* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
 {
 test: /\.js$/,
 loader: 'babel-loader',
 /* 排除模块安装目录的文件 */
 exclude: /node_modules/
 }
 ]
 }
}

打包项目

npm install -g webpack@^2.1.0-beta.25 全局安装webpack，以便使用webpack命令

webpack 用webpack命令打包项目，这是目录下会多出一个dist文件夹，查看里面会有build.js，发觉里面的es6语法已经被转化了

最终项目目录如图所示

在根目录下新建index.html，引入build.js


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>vue-webpack</title>
</head>
<body>
 <section id="app"></section>
 <script src="./dist/build.js"></script>
</body>
</html>

页面如图所示