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,在里面进行配置

  • 相关阅读:
    nginx 配置文件简介
    nginx 二进制安装
    nginx 简介  http://nginx.org
    全栈https
    运维工程师如果将web服务http专变为https
    12个JQuery小贴士
    AccessHelper 需修改
    MysqlHelper 需要重写
    Func<T,TResult>泛型委托
    DataConvertJson
  • 原文地址:https://www.cnblogs.com/littlewriter/p/7110415.html
Copyright © 2011-2022 走看看