深入理解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(),