vue-loader+webpack项目配置

1.首先创建好项目文件夹project
进入到项目目录后

npm init

初始化项目

2.安装webpack vue vue-loader依赖

npm i webpack vue vue-loader

3.安装vue-loader需要的以来

npm i css-loader vue-template-compiler

4.新建src目录并在src下新建app.vue
编写vue组件

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

<script>
export default {
  name: "app",
  data(){
    return{
      test:'abc'
    }
  }
}
</script>

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

5.新建webpack.config.js文件

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

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$/,//正则表达式
                loader:'css-loader'
            }
        ]
    }
}

6.在src目录下新建index.js

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

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

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

7.运行打包命令

npm run build