首页 > 代码库 > webpac入门

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

webpac入门