webpack+vue-loader项目配置

步骤一: 安装vscode后重启, Win+R 输入 npm init, 生成 package.json 文件, 一直回车默认设置, 最后输入y;
npm init

步骤二: npm 下载安装 webpack, vue, vue-loader, 根据警告提示安装 css-loader;
npm i webpack vue vue-loader
npm i css-loader

 

 

 

 

 

 

 

 

 

 

步骤三: 项目部署
1、新建文件夹 src, 并在该目录下创建文件 app.vue 和 index.js;
app.vue 具体代码如下:

<template>
  <div id="test">{{text}}</div>
</template>

<script>
export default {
  data() {
      return {
          text: '我的第一个'
      }
  }    
}
</script>

<style>
#test{
  color: red;
}
</style>

 index.js 具体代码如下：

 npm i style-loader 

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)

 2、在package.json文件同级目录， 创建文件 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')
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            }
        ]
    }
}

3、修改 package.json, 代码如下：

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

步骤四: 运行程序, 根据警告提示，安装 vue-template-compiler, 再次运行 npm run build
npm run build
npm i vue-template-compiler

成功运行程序后，自动生成打包文件 dist/bundle.js， 程序结构如下：