重新开始一个基于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(),