• todo项目总结


    vue+webpack项目工程配置

    1、vue-loader+webpack项目配置

    2、webpack配置项目加载各种静态资源

    3、webpack-dev-server的配置和使用

    安装:

    package.json修改

    webpack.config.js修改

    热加载:

    hot:true

    new  hotreplacementplugin()

    增加一些避免不必要的错误信息显示的插件,不重要

    重新启动:npm run dev

    hot加载方法因为vue-loader里已经提供了。

    但是因为开发使用vue框架和es6的方式,浏览器编译后,代码是编译后的代码,无法看懂,为了方便调试,使用sourcemap将编译后的代码和自己写的代码做出映射,使得在浏览器调试时直接看到自己写的代码。

    sourcemap:

    config.devtool=‘#cheap-module-eval-source-map’

    配置vue的jsx写法以及postcss

    1、配置文件及插件安装

    創建postcss.config.js:

    autoprofixer:自动添加css浏览器前缀

    插件安裝

    .babelrc:用于vue支持jsx

    preset env

    babel-plugin-transform-vue-jsx轉化vue里的jsx的代碼

    在webpack.config.js增加

    {test:‘jsx’,loader:babel-jsx}

    {loader:postcss-loader

    options:{sourceMap:true}}//加快效率

    webpack配置css單獨分離打包:

    plugin:extract-text-webpack-plugin:用於打包非js的內容單獨打包成一個靜態文件

    針對不同環境處理.stylus

    相關插件安裝

    hash和chunkhash的區別

    以上是js里的css分離,下面是vue

    webpack區分打包類庫代碼:

    類庫代碼:vue框架及第三方包

    類庫代碼和業務代碼分離打包:混在一起,每次業務代碼修改,js里的所有代碼也要跟著業務代碼更新而更新,

    區分打包vuek框架代碼:

    修改正式環境里的entry

    增加插件:

    new webpack.optimize.CommonsChunkPlugin({name:'verdor'})

    區分打包webpack代碼:

    new webpack.optimize.CommonsChunkPlugin({name:'runtime'})

    hash和chunkhash的區別:

  • 相关阅读:
    解决centos7的root账户下无法通过code命令启动vscode
    centos7安装epel
    centos7用过yum安装vscode
    yum install gcc报错Error: Package: glibc-2.17-260.el7_6.6.i686 (updates) Requires: glibc-common = 2.17
    centos7通过yum从vim7升级到vim8
    解决VM虚拟机安装centos7无法联网
    centos7设置开机默认使用root账户登陆
    centos7使用sudo命令提示sudo command not found
    不同编译器下C++基本数据类型的字节长度
    C++函数模板
  • 原文地址:https://www.cnblogs.com/Zhengxiaoxiao/p/10597162.html
Copyright © 2020-2023  润新知