Webpackでvueコンポーネントを構成するローダ

1363 ワード

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()  //         
		]
	}

2、webpackプロジェクトでvueをどのように使うか
	1、   npm i vue -s     vue
	2、 src-->index.js      ,  import Vue from 'vue'   vue    
	3、   vue       ,       el   
	4、  render     App    
		//1、  Vue     
		import Vue from 'vue'
		//2、  App   
		import App from './components/App.vue'
		
		const vm = new Vue({
			//3、  vm          
			el:'#app'
			//4、  render   ,         el   
			render: h => h(App)
		})

3、webpackパッケージでのリリース(初体験)
オンラインになる前にwebpackでアプリケーションを全体的にパッケージする必要があり、packageを通過することができる.jsonファイル構成パッケージコマンド
	// package.json      webpack     
	//             webpack.config.js     
	"scripts":{
		//        
		"build":"webpack -p",
		//          
		"dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000"
	}
	
	    npm run build (       dist                dist  )
	// dist        dist      
	// dist / index.html