小白上学のwebpack+vue低级使用指南

2024年2月11日 203次阅读 来源: smallStone

写这篇文章的时刻先说一下缘由：
webpack：如今很盛行的打包东西；引荐缘由：进修本钱比gulp，fis3等简朴，就是这么直接！
vue：国人开辟的MVVM框架，一点都不逊于recat，vue2.0的实行速率比recat都快！引荐缘由：http://www.cnblogs.com/terry0…这里很威望。但我们本日学的是vue1.0，缘由：vue2.0我还不会(^_^)!而且新手照样vue1.0进修为主吧。缘由：中文文档全，进修曲线简朴，很轻易上手。

课程最先：
须要妙技：
1>.node.js环境
2>.npm 会运用 (我的笔记中有smart-npm能够处理npm慢的题目)
3>.vue 最基本的{{}}标记会用（不会的去vue官网看5分钟教程就会）
4>.ES6 基本晓得import是什么东西就行

实用进修人群：用过vue，但不晓得怎样和webpack一同连系运用的渺茫者；
项目竖立
这里已装置过nodejs，npm，webpack
1.用敕令行东西进入你须要竖立模板文件夹输入：

$ mkdir myvuetest
$ cd myvuetest
$ npm init

你会发明文件中涌现了package.json临时不必管；

2.在项目目录下新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue example</title>
</head>
<body>
    <div>{{message}}</div>
    <script src="dist/build.js"></script>
</body>
</html>

3.在根目录竖立src文件夹，并在该文件夹下竖立main.js

import Vue from 'vue'
new Vue({
    el:'body',
    data:{
        message:'test success!'
    }
});

设置webpack
1.装置webpack，webpack-dev-server以及相干的loaders

# 全局装置webpack，webpack-dev-server，全局装置因为其他项目也会运用到这两个包
$ npm install -g webpack
$ npm install -g webpack-dev-server
# 为项目装置其他依靠 下面i是install的简写，注重vue@1.0是装置vue1.0版本的不然会失足；-D是--save-dev的简写，用于天生package.json中对应的包称号，便于往后治理
$ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue@1.0 vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

这里诠释一部份包的作用：
webpack-dev-server： 用户竖立node的服务器环境，就是能够用lacalhost：8080等端口体式格局阅读文件
webpack-merge：开辟环境和临盆环节的webpaak设置文件的设置兼并
css-loader：编译写入css
style-loader：把编译后的css整合进html
file-loader：编译写入文件，默许情况下天生文件的文件名是文件名与MD5哈希值的组合
vue：vue主程序
vue-laoder：编译写入.vue文件
vue-html-loader：编译vue的template部份
vue-style-loader：编译vue的款式部份
vue-hot-reload-api：webpack对vue完成热替代
babel-core：ES2015编译中心<br/>
babel-loader：编译写入ES2015文档
babel-preset-es2015：ES2015语法
babel-preset-stage-0：开启测试功用
babel-runtime：babel实行环境

2.设置webpack.config.js
在根目录下竖立webpack.config.js，设置以下：

var path = require('path');
module.exports = {
  entry: './src/main.js',
  //定义webpack输出的文件，这里设置了让打包后天生的文件放在dist文件夹下的build.js文件中
  output: {
    path: './dist',
    publicPath:'dist/',
    filename: 'build.js'
  },
  module: {
    loaders: [
      //转化ES6语法
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      //图片转化，小于8K自动转化为base64的编码
      {
        test: /\.(png|jpg|gif)$/,
        loader:'url-loader?limit=8192'
      }
    ]
  },
  //这里用于装置babel，如果在根目录下的.babelrc设置了，这里就不写了
  babel: {
     presets: ['es2015','stage-0'],
     plugins: ['transform-runtime']
  }
}

完成该设置我们在敕令中运转：

$ webpack

翻开index.html就能够看到阅读器中看到我们方才写的笔墨了。

后续总结：在进修打包东西过程当中因为涌现的题目各种蛋疼，让很多人都半途而废。我阅历了半途而废又从新捡起来，搜他人的题目处理本身的题目，然后就逐步学会了。人人互相进修共同进步！本节讲的都是很基本的东西，本身能够延展一下。另有我引荐的是webpack+ES6+vue的新手进修形式！如许你就不会被互联网手艺镌汰！能够关注我，我这个人挺懒的良久才写一篇，但都是用最基本的讲通人人进修的迷惑！值得关注哦！^_^

    原文作者：smallStone
    原文地址: https://segmentfault.com/a/1190000007171860
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞