webpack_vue

一、在webpack中配置Vue组件的加载器

1.运行npm i vue-loader vue-template-compiler -D命令
2.在webpack.config.js配置文件中，添加vue-loader的配置项如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
        module: {
            rules: [
                //...其他规则,
                { test: /\.vue$/, use: 'vue-loader' }
            ]
        },
        plugins:[
            //...其他插件,
            new VueLoaderPlugin() 
        ]
}

二、在webpack项目中使用Vue

1.运行npm i vue -S 安装vue
2.在src -> index.js入口文件中，通过import Vue from ‘vue’ 来导入vue构造函数
3.创建vue的实例对象，并制定要控制的el区域
4.通过render函数渲染App根组件

// ---------vue---------
import Vue from 'vue'
import App from './components/App'

const vm = new Vue({
    el:"#app",
    // 通过render函数，把指定的组件渲染到el区域中
    render:h => h(App)
})

三、webpack打包发布

1.在package.json文件中配置webpack打包命令

"script":{
	...,
    "build":"webpack -p"
}

2.npm run build打包发布