创建项目

首先要安装nodejs，因为我们要用npm。这个过程我就不赘述了，一下我们直接按照安装好的来用。
　　我们选用的IDE是VS Code。原因嘛，因为我看的教程是用这个的（比人是写java的，没有啥专有的前端偏好，就是觉得eclipse、idea这类的IDE写现在的工程化前端，又重又不顺手。并且也对比了以前前端朋友介绍的IDE，如hbuilder、webstorm，hbuilder命令行不太舒服，插件基于eclipse的不太爽。webstrom要破解，还是支持下正版，就用视频里用的了）。新建空文件夹，然后在该文件夹下打开命令行，输入：npm init。
　　会提示输入项目信息，根据自己的需要来吧，不影响公开发，只不过，是个好习惯。当然，这些后期还是可以改的。完了之后，会看到一个叫package.json的文件，记录了刚才的信息，同时也记录了当前的npm项目的相关信息——啥都没有。

安装vue

我们在命令行中输入如下命令：

npm i webpack vue vue-loader

解释一下，这句话的意思是，使用npm（开始的npm命令）安装（i参数）webpack、vue、vue-loader三个组件。需要注意的是，这是安装到当前的npm项目中，对外界不会有影响。这样做的目的是，隔离性比较好，来来回回会比较干净，不会受到外界干扰，也不会干扰到外界。顺便说明一下，我的npm版本是3.10.10
　　执行后会有些警告，比较有价值的是下面这两句：

npm WARN [email protected] requires a peer of css-loader@* but none was installed.
npm WARN [email protected] requires a peer of vue-template-compiler@^2.0.0 but none was installed.

这是提醒我们[email protected]依赖于css-loader@*和vue-template-compiler@^2.0.0。参照上面的命令安装即可。执行npm i css-loader vue-template-compiler

写代码了

首先新建src目录，里面建立一个app.vue的文件，内容如下：

<template>
    <div id="test">{{text}}</div>
</template>
<script>
export default{
    data(){
        return {
            text:"abc"
        }
    }
}
</script>
<style>
#test{
    color:red;
}
</style>

扩展名为vue的文件，是vue特有的，在这个项目里，将会被我们先前安装的vue-loader进行解析，如何解析，我们后面说。这个里面就是建立了一个基本的显示text的模板，颜色为红色。

调试

在根目录新建webpack.config.js文件内容如下：

const path=require('path')

module.exports={
    entry: path.join(__dirname,'src/index.js'),
    output:{
        filename:'boundle.js',
        path: path.join(__dirname,"dist")
    }
}

这里path是nodejs里面的一个基本包，用来处理路径的。下面的module.exports声明了项目的入口和输出。入口（entry），使用了绝对路径__dirname代表当前这个文件所在的目录，加上后面的是相对路径，拼接成一个绝对路径。输出（output）则声明了文件名及输出的目录。需要注意的是，这个index.js我们之前没有见到，下面是它的代码，我们新建一个，在src里面。

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

const root=document.createElement('div')
document.body.appendChild(root)

new Vue({
    render: (h) => h(App)
}).$mount(root)

可以看到，这里引入了vue这个包和刚才我们创建的app.vue。这里我们主要是new了一个Vue对象。这个对象通过render将我们写的app挂载到了Vue对象内，然后$mount()进行挂载。挂载到了哪呢？就是上面的两行代码，const root=document.createElement(‘div’)创建了一个div，然后，挂载到了body标签里。
　　app.vue是一个组件，是不可以直接使用的，所以才需要index.js这个文件，将这个组件挂载到它里面来进行使用。
　　然后，为了编译这个项目，我们需要在package.json的scripts节点中加一个脚本：

"build":"webpack --config webpack.config.js"

这样做是因为，如果我们直接在命令行执行这个命令的话，会运行我们全局安装的webpack，而这样，我们可以运行这个项目里安装的，比较可靠。
　　执行npm run build。这里执行的时候有个选择是我看的视频里没有的，我选择的是原生的webpack-cli，应该是同一个命令在两个包里都存在导致的。
　　执行完了之后，我们会看到报错，核心内容如下：

ERROR in ./src/app.vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <div>{{text}}</div>
| </template>
 @ ./src/index.js 2:0-27 8:21-24

You may need an appropriate loader to handle this file type.这句话，告诉我们需要为.vue这个类型声明一个loader。因为webpack是只支持js的而且，只是支持es5，当超出它理解范围的时候，我们需要提供loader来帮助他行动。我们在webpack.config.js文件的module.exports中的output平行的后面添加module模块，最终的整体结果如下：

const path=require('path')

module.exports={
    entry: path.join(__dirname,'src/index.js'),
    output:{
        filename:'boundle.js',
        path: path.join(__dirname,"dist")
    },
    module:{
        rules:[
            {
                test:/.vue$/,
                loader: 'vue-loader'
            }
        ]
    }
}

其中，module中声明了rules，其中一条rule就是，如果发现是以.vue结尾的（这里是正则表达式），就是用vue-loader组件（就是我们开篇安装的那个组件）进行解析。再执行npm run build。然后，然后还在报错。

ERROR in ./src/app.vue?vue&type=style&index=0&lang=css
Module parse failed: Unexpected character '#' (16:0)
You may need an appropriate loader to handle this file type.

这就尴尬了。经过我反复对比，代码是没有问题的。查了半天，找到了，vue-loader v15需要添加如下代码：

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

再执行，嗯，成功了，在dist目录生成了bundle.js。
　　咋调试呢？咋运行呢？后面再说，该睡觉了。

vue学习——webpack项目搭建（一）

创建项目

安装vue

写代码了

调试

猜你喜欢