zoukankan      html  css  js  c++  java
  • webpac入门

    基于node环境,必须确保node已经安装:node-v,npm-v

    基础入门

    前身:browserify

    缺点:只能转化JS

    webpack作用:一切都是模块化(js、css图片等),一个模块加载器、打包工具

    安装webpack

    流程:

     1.安装webpack命令环境

      npm install webpack -g

     验证:

      webpack -- version

     2.package.json 工程文件(需要依赖模块、库描述、版本、作者) 

      npm init

     3.安装本地webpack

      npm install webpack -D

    案例:http://www.runoob.com/w3cnote/webpack-tutorial.html

      webpack entry.js bundle.js

    webpack加载器

    webpack默认只支持JavaScript文件,其他文件需要加载器(loader),loader类似一种转化器。

      css文件:style-loader、css-loader

      下载:npm install style-loader  css-loader -D

    注意:多个loader加载,用!进行连接

    配置webpack.config.js

    作用:配置一些webpack需要的入口、出口、loader

    终端执行:webpack

    其他:webpack    开发环境下编译打包

        webpack -p   生产环境下编译(打包)

        webpack -w  监听文件改动,自动编译(速度快)

        webpack -d  开启(生成)source map  (显示出未编译的原文件,方便调试)

       webpack -pwd 

    官方建议使用webpack.config.js,如果自己定义名字为config.js

      终端执行: webpack --config config.js

    ES6:babel转化

      babel使用:npm install babel-loader babel-core babel-preset-es2015 -D

      配置babel预设:

      1.webpack.config.js(不推荐)

        babel:{

          "presets":['2015']

        }

      2.新增一个文件.babelrc,在里面进行配置

  • 相关阅读:
    [转]基于S2SH框架的项目—antlr-2.7.2.jar包冲突问题
    输入法那没有小键盘的图标解决方法
    Chrome百度不显示中文字体
    转:数据库范式(1NF 2NF 3NF BCNF)
    转:海明纠错码
    奇阶魔方阵
    字符串的模式匹配
    红黑树
    排序算法总结
    关于面试总结9-接口测试面试题
  • 原文地址:https://www.cnblogs.com/littlewriter/p/7110415.html
Copyright © 2011-2022 走看看