webpack vue todo
Posted luxurybug
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack vue todo相关的知识，希望对你有一定的参考价值。
part1、开始
一、准备工作
webpack
webpack-dev-server
webpack打包优化：
(1)、网络优化，减少http请求
(2)、压缩静态资源
(3)、使用浏览器长缓存，尽量减少网络流量
二、思考：如何体验前端价值？
数据缓存、考虑前端工程化概念（es6、less）
网络优化：加快http请求速度、如何缓存http请求
API定制
nodejs层：转发、数据处理
注意：不要花费过多时间去做业务处理
定制和修改vue-cli配置
三、开始demo
1、webpack搭建工程
2、实现todo应用
四、简单使用webpack --config webpack.config.js
1、使用当前目录下的webpack，而不是全局webpack
2、添加处理.vue文件类型的loader,
原因是：webpack默认只能处理.js文件，ES5语法
3、添加vue-loader之后还是报错
解决办法如下：添加VueLoaderPlugin
4、style-loader的作用，是将css文件转换成一个style的dom节点，插入html文件中
5、使用less文件
npm i less less-loader --save-dev
五、使用webpack-dev-server，更改配置
1、process.env
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
当用户使用 npm run build命令时，定义变量 NODE_ENV 值为 production ，
在webpack.config.js文件中，通过process.env.NODE_ENV 得到。
cross-env：实现跨平台
2、webpack.DefinePlugin
plugins: [
new webpack.DefinePlugin({
// 利于打包的时候，使用vue源码的开发版本还是生产版本
‘process.env‘: {
NODE_ENV: isDev ? ‘"development"‘ : ‘"production"‘
}
})
],
3、 使用webpack-dev-server进行简单的配置
（1）devtool：用于调试
（2）hot：浏览器监听到项目文件变化后，不刷新页面，只刷新组件进行更新
更新组件代码，不刷新页面，只刷新更新的组件的那部分视图，同时添加两个webpack内置plugin:HotModuleReplacementPlugin、NoEmitOnErrorsPlugin
config.devServer.hot = true
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
// NoEmitOnErrorsPlugin:减少一些不必要的提示
new webpack.NoEmitOnErrorsPlugin()
)
（3）extract-text-webpack-plugin
默认会将css文件打包在bundle.js文件中，这样bundle.js文件体积过大，我们将css文件单独打包出来
config.module.rules.push({
test: /.less$/,
use: ExtractTextWebpackPlugin.extract({
fallback: ‘style-loader‘,
use: [
‘css-loader‘,
{
loader: ‘postcss-loader‘,
options: {
sourceMap: true
}
},
‘less-loader‘
]
})
})
config.plugins.push(
// contentHash: 内容hash
new ExtractTextWebpackPlugin(‘styles.[chunkhash:8].css‘)
)
part2: vue
一、vue2的核心知识
（1）数据绑定
（2）vue文件格式
（3）render方法
二、api重点
（1）生命周期方法
（2）computed:实时计算 姓+名
part3: webpack的详细说明
一、loader
二、plugin
（1）使用extract-text-webpack-plugin 进行处理
报错a：hooks
解决办法：npm i --save-dev [email protected]
报错b：
config.plugins.push(
// contentHash: 内容hash
new ExtractTextWebpackPlugin(‘styles.[chunkhash:8].css‘)
)
解决办法: 使用[chunkhash:8]
三、webpack中使用的一些变量
（1）hash、contenthash、chunkhash
hash值打包后只生成一个，但是chunkhash是不同的值
以上是关于webpack vue todo的主要内容，如果未能解决你的问题，请参考以下文章