首页 > Web开发 > 详细

webpac入门

时间:2017-07-03 13:25:39      阅读:316      评论:0      收藏:0      [点我收藏+]

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

webpac入门

原文:http://www.cnblogs.com/littlewriter/p/7110415.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!