webpack初始化vue项目(一)

一、初始化项目
首先，进入到项目目录
然后用npm初始化项目

npm init
package name: (todo) todolist
version: (1.0.0)
description: demo
git repository:
keywords:
author: doctor
license: (ISC)

然后会让输入一些信息，这里我只写了文件名和作者
然后会打出第一段配置

{
  "name": "todolist",
  "version": "1.0.0",
  "description": "demo",
  "main": "vue.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "doctor",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.13",
    "webpack": "^3.11.0",
    "vue-loader": "^14.1.1",
    "css-loader": "^0.28.9",
    "vue-template-compiler": "^2.5.13"
  },
  "devDependencies": {}
}
Is this ok? (yes)

我们输入yes 点回车就OK了
目录下就生成了一个package.json文件
内容就是我们输出的那些

二、安装webpack和vue
一开始我们安装3个资源
1.webpack
2.vue
3.vue-loader

npm install webpack vue vue-loader   （全局安装了webpack可省掉webpack）

等待安装完成
我们发现目录里面多了一些东西

图片.png

我们的package.json也多了一些内容
就是dependencies。我们项目的依赖

  "dependencies": {
    "vue": "^2.5.13",
    "vue-loader": "^14.1.1",
    "webpack": "^4.0.0"
  }

另外，控制台还输出可一些东西

npm WARN vue-loader@14.1.1 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.
npm WARN vue-loader@14.1.1 requires a peer of vue-template-compiler@^2.0.0 but none is installed. You must install peer dependencies yourself.

我们少了两个依赖 css-loader，vue-template-compiler
于是我们需要继续下载

npm install css-loader vue-template-compiler

报错权限不够，请用管理员再次运行该命令
于是我直接又运行了一次，OK了

三、访问vue文件
1.在目录下建一个src,再在src下新建一个app.vue
在app.vue里面简单的写一些内容

<template>
    <div id="test">{{text}}</div>
</template>
<script>
    export default {
        data(){
            return {
                text:'hello webpack!'
            }
        }
    }
</script>
<style>
    #text{
        color: #999;
    }
</style>

但是网页是无法识别 .vue后缀的文件的
都是打包之后才能访问的
我们继续在src下新建一个 index.js文件
通过index.js来加载app.vue里面的内容

import Vue from 'vue'
import App from './app.vue'

//申明一个空div
const root=document.createElement('div');
document.body.appendChild(root);

//把app.vue的内容挂载到空div上
new Vue({
    render:(h) =>h(App)
}).$mount(root);

在更目录下新建一个 webpack.config.js

const  path=require('path')
module.exports={
    //配置入口
    entry:path.join(__dirname,'src/index.js'),
    output:{//配置打包出口文件
        filename:'bundle.js',
            path:path.join(__dirname,'dist')
    },
    module:{
        rules:[
            {//让webpack识别vue模板
                test:/.vue$/,
                loader:'vue-loader'
            }
        ]
    }
}

这个配置并没有使用，也就是说还没被引用
我们要去package.json把webpack.config.js引用进去
在script下面的test后面加入一行 build

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --config webpack.config.js"
  }

然后在控制台输入
npm run build 就会生成一个dist目录，在里面有一个bundlle.js

图片.png 1

刚刚被坑了，全局下载了webpack，环境里面装了个局部的webpack
导致npm run build 报错
而且全局的webpack是3.11版本，局部下载的居然是4.0.0