Vue-loader+webpack项目配置

1、新建文件夹

2、命令行输入

1. npm init
2. npm i webpack vue vue-loader
3. npm i css-loader style-loader vue-template-compiler

3、新建src文件夹 源码放置目录 >app.vue

app.vue

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

index.js

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

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

new Vue({
    // h是generate api參數
    render:(h)=>h(App)
}).$mount(root)

4、 新建webpack.config.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    // 打包前端资源 (js css img font) 通過http請求加載 渲染
    // 入口文件 path.join 路徑拼接成絕對路徑
    entry:path.join(__dirname,'src/index.js'),
    // 出口文件
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {
                // 使用vue-loader為webpack輸出.vue的文件類型
                test:/.vue$/,
                loader:'vue-loader'
            },{
                test:/.css$/,
                use:['style-loader','css-loader']
            }
        ]
    }
}

5、 在package.json写脚本
如果不配置webpack的话，它将会找到全局的webpack

{
  "name": "vue-ssr-tech",
  "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": "^2.1.0",
    "style-loader": "^0.23.1",
    "vue": "^2.6.8",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.8",
    "webpack": "^4.29.6"
  },
  "devDependencies": {
    "webpack-cli": "^3.2.3"
  }
}

6、npm run build