码迷,mamicode.com
首页 > Web开发 > 详细

webpack vue todo

时间:2019-02-02 14:39:36      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:文件格式   更新   体验   run   请求   end   proc   es5   知识   

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 extract-text-webpack-plugin@next

报错b:

  config.plugins.push(

    // contentHash: 内容hash

    new ExtractTextWebpackPlugin(‘styles.[chunkhash:8].css‘)

  )

解决办法: 使用[chunkhash:8]

 

三、webpack中使用的一些变量

1)hash、contenthash、chunkhash

hash值打包后只生成一个,但是chunkhash是不同的值

 

webpack vue todo

标签:文件格式   更新   体验   run   请求   end   proc   es5   知识   

原文地址:https://www.cnblogs.com/luxurybug/p/10348194.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!