vue-loader+webpack配置项目流程

前提：安装了node.js与npm

1.建立一个npm项目

新建项目文件夹，打开终端，将路径移动至此文件夹，初始化输入

npm init

按照提示输入项目名称，描述，作者等信息（可回车跳过）

成功创建npm项目

2. 安装所需要的包

在终端中输入

npm install webpack vue vue-loder css-loader vue-template-compiler

*可根据警告中的提示安装缺少的包

等待安装完成

3.建立源码放置的目录

在项目文件夹中新建一个文件夹src作为源码放置目录

在此目录中可以创建.vue文件 例如创建app.vue

<template>
    <div >{{text}}</div>
</template>
<script>
    export default {
        data(){
            return {
                text:"welcome to vue.js"
            }
        }
    }
</script>
<style>
    #main{
        font-size: 26px;
        color: red;
    }
</style>

但是，.vue文件无法在浏览器当中直接运行，所以我们需要用一定的方法使之可以运行

4.创建入口文件

在src目录下创建入口文件index.js,将vue渲染到HTML中，模板如下

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)/*挂载元素*/

5.创建webpack.config.js文件

在项目文件夹中创建一个webpack.config.js文件，模板如下

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry:path.join(__dirname,'src/index.js'),
    output: {
        filename: "bundle.js",
        path: path.join(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            // 它会应用到普通的 `.css` 文件
            // 以及 `.vue` 文件中的 `<style>` 块
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            }
        ]
    },/*为.vue文件配置加载器，只支持原生js*/
    plugins: [
        new VueLoaderPlugin()
    ],
    mode: 'development',
}

在此文件中要声明入口和出口，路径使用绝对路径

6.修改package.json文件

为根目录下package.json文件中scripts添加代码

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

添加此代码后的package.json模板为

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^1.0.1",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.23.1"
  },
  "devDependencies": {
    "webpack-cli": "^3.1.2"
  }
}

完成以上步骤后，在终端输入

npm run build

运行无误后发现根目录中新增了一个名为dist的文件夹，其中有一个名为bundle.js文件，此文件为npm将各类资源打包之后产生的文件

这样，就完成了项目的配置

注意：最新的　vue-loader　还需要在 webpack.config.js中的plugins 中使用