深入理解webpack的原理和使用

重新开始一个基于webpack的vue项目，
npm init
npm install webpack vue
启动 npm run build/dev
在编译图片的时候进行安装
npm install style-loader url-loader flie-loader

1，webpack.config.js

module.exports={
	entry:path.join(_dirname,"src/index.js"),  // 入口文件
	output:{
		filename: "build.js",
		path.join(_dirname,"dist")
	},		 // 出口文件
	module: {   //   loader 编译各个模块，图片，css，vue，等
	    rules: [{.............................}]
	 },
}

2，package.json

添加build，“build”: "webpack --config webpack.config.js",
npm run build
添加dev，"dev": "webpack-dev-server --config webpack.config.js",
在webpack.config.js里面
添加target，

3，webpack热加载,页面数据在变动的时候不会出现页面刷新抖动的效果

devtool：“#cheap-module-eval-source-map”，
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),

4，数据的绑定

生命周期方法：created，mouted ，updated， destoryed，
computed：依赖data的时候，数据进行改动，将改动data数据，data数据再展示在view，

5,正式环境的优化

优化css文件的打包，
npm install extract-text-webpack-plugin，
var ExtractTextPlugin = require('extract-text-webpack-plugin')
单独打包静态资源文件，

6，单独对vue、类库代码、业务代码分别进行打包，希望浏览器能更长时间的缓存，

在入口文件里面添加
vendor: ["vue"]
单独打包类库文件
new webpack.optimize.ModuleConcatenationPlugin(),